/* font-family: 'Roboto', sans-serif; */
/* font-family: 'Dancing Script', cursive; */
/* font-family: 'Montserrat', sans-serif; */
/* font-family: 'Press Start 2P', cursive; */

html{
    scroll-behavior: auto !important;
    box-sizing: border-box;
}

/* Background image */
#Myndi{
    background-image:  url("/assets/img/myndi_coffee.png");
    background-repeat: repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    /* width: 100vw; */
}

#Myndi-small{
    background-image:  url("/assets/img/2.png");
    background-repeat: repeat;
    background-size: cover;
    background-position: center;
    /* width: 100vw; */
}
/* End of Background image */

.paperOverlay {
    background-repeat: repeat;
    background-image: url("/assets/img/paper.png");
    mix-blend-mode: multiply;
    pointer-events: none;
}

.press-2p{
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
}

.montserrat{
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
}

/* Navbar */
.navbar{
    background: transparent;
    position: fixed;
    /* width: 100vw; */
    z-index: 1;
}

.navbar-nav{
    letter-spacing: 3px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
}
/* End of Navbar */

/* Navbar color */
#about-me-nav{
    color: #FFE4C4 !important;
}

#experience-nav{
    color: #FFE4C4 !important;
}

#works-nav{
    color: #FFE4C4 !important;
}

#contact-nav{
    color: #FFE4C4 !important;
}
/* End of Navbar color */

/* Hero Section BIG SCREEN*/
#Hero-Section{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
}

#Hero-Section div{
    position: absolute;
    bottom: 45px;
    left: 0;
    right: 0;
    margin: auto;
}

#Hero-Section h1:first-child{
    color: #FFE4C4 !important;
    font-family: 'Roboto', sans-serif;
    text-shadow: 1.5px 1.5px 1px black, -1.5px -1.5px 3px gray;
    font-weight: 400;
    letter-spacing: 5px;
    word-spacing: 5px;
}

#Hero-Section h1{
    color: #FFE4C4 !important;
    font-family: 'Roboto', sans-serif;
    text-shadow: 2px 2px 1px black, -1.5px -1.5px 3px gray;
    font-weight: 900;
    letter-spacing: 10px;
}

#Hero-Section h5{
    color: #FFE4C4 !important;
    font-family: 'Roboto', sans-serif;
    text-shadow: 2px 2px 1px black , -1.5px -1.5px 3px black;
    font-weight: 900;
    letter-spacing: 10px;
}
/* End BIG SCREEN*/

/* Hero Section SMALL SCREEN */
#Hero-Section2{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
}

#Hero-Section2 div{
    position: absolute;
    bottom: 45px;
    left: 0;
    right: 0;
    margin: auto;
}
#Hero-Section2 h1:first-child{
    color: #FFE4C4 !important;
    font-family: 'Roboto', sans-serif;
    text-shadow: 1.5px 1.5px 1px black, -1.5px -1.5px 3px gray;
    font-weight: 400;
    letter-spacing: 5px;
    word-spacing: 5px;
}

#Hero-Section2 h1{
    color: #FFE4C4 !important;
    font-family: 'Roboto', sans-serif;
    text-shadow: 2px 2px 1px black, -1.5px -1.5px 3px gray;
    font-weight: 900;
    letter-spacing: 10px;
}

#Hero-Section2 h5{
    color: #FFE4C4 !important;
    font-family: 'Roboto', sans-serif;
    text-shadow: 2px 2px 1px black , -1.5px -1.5px 3px black;
    font-weight: 900;
    letter-spacing: 10px;
}
/* End SMALL SCREEN*/

.hero-line{
    width: 345px;
}
/* End of Hero Section */

/* Buttons style */
.brd{
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
    background-color: hsla(0, 0%, 100%, 0.7);
    border-radius: 20px;
    height: auto;
}
/* End of Buttons style */

/* About me */
.plume-color{
    color: #FFE4C4;
    text-shadow: 1px 1px 1px black;
}

#About-Me h2{
    font-family: 'Dancing Script', cursive;
    font-weight: 600 !important;
}

#About-Me h5{
    font-family: 'Montserrat', sans-serif;
}

.carousel-item{
    font-family: 'Dancing Script', cursive;
    font-weight: 500 !important;
    font-size: 20px;
    color: rgb(44, 44, 44);
    line-height: 3;
}

.profile-about-me{
    width: 256px;
    height: 256px;
    border: 1px;
    border-radius: 50%;
}

.logos-about-me{
    height: 64px;
    width: 64px;
}

.carousel-indicators{
    bottom: -10px !important;
}

.carousel-control-next{
    right: -50px !important;
}

.text-neon{
    color: rgb(18, 245, 18);
}

.text-neon-red{
    color: rgb(255, 0, 0);
}
/* End of About me */


/* Experience */
/* .grad-top{
    background-image: linear-gradient(to top, #FFE4C4, white);
} */

#Experience{
    font-family: 'Roboto', sans-serif;
}

.learning-exp{

    font-family: 'Montserrat', sans-serif;
    /* color: white;
    text-shadow: 2px 2px 1px rgb(255, 255, 255), -2px -2px 1px rgba(255, 255, 255, 0.5); */
}

.code-color{
    color: white;
    text-shadow: 2px 2px 1px black;
}

/* #grad-bot{
    background-image: linear-gradient(#FFE4C4, white);
} */
/* End of Experience */


/* Works */
#Works{
    font-family: 'Montserrat', sans-serif;
    background-color: #ffffff;
}

.brd2{
    margin-top: 5px;
    margin-bottom: 5px;
    /* background-color: hsla(0, 0%, 100%, 0.7); */
    border-radius: 20px;
    height: auto;
    width: auto;
    color: white;
    text-shadow: 2px 2px 1px rgb(0, 0, 0), -1px -1px 1px rgb(0, 0, 0);
}

/* .brd-divider{
    height: 3rem;
    background-color: #FFE4C4;
    box-shadow: inset 0 0.5em 1.5em rgba(39, 39, 39, 0.1), inset 0 0.5em 1.5em rgba(39, 39, 39, 0.1);
    width: 100%;
} */

.shadow-text{
    color: #ffffff !important;
    text-shadow: 2px 2px 1px rgb(20, 20, 20), -2px -2px 4px rgba(59, 59, 59, 0.774) !important;
}

.shadow-text-black-bg{
    color: #ffffff !important;
    text-shadow: 2px 2px 1px rgb(216, 216, 216), -1px -1px 2px rgb(20, 20, 20) !important;
}
/* End of Works */

/* Contact */
#Contact h1{
    font-family: 'Roboto', sans-serif;
    font-size: 52px;
    letter-spacing: 10px;
}

#Contact p{
    font-family: 'Montserrat', sans-serif;
}
/* End of Contact */

/* Footer */
#Footer h1{
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 3px;
}

#Footer a{
    color: white;
    text-decoration: none;
}
/* End of Footer */

.works-done {
    max-width: 20rem !important;
    width: 100%;

    font-family: 'Montserrat', sans-serif;
    color: rgb(30, 30, 30);

    border-style: solid;
    border-width: 0.1em;
    border-color: rgb(30, 30, 30);
    border-radius: .5em 5em .5em .5em;
}

.works-done:hover {
    background-color: rgb(30, 30, 30);
    color: white;
    transform: scale(1.05);
    transition: transform 250ms ease-out;
}

.works-done:active {
    box-shadow: 0 0 1px 6px rgb(20, 20, 20, 0.2) !important;
}

.works-done span {
    font-size: 12px;
}

.oc {
    height: 100%;

    background-image: url('/assets/img/CM.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    border-radius: 0 0 .5em .5em;
}