@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inconsolata:wght@200..900&display=swap'); 

/*
    mainBackground: #ffffff
    navbar/footer: #14213d
    div-background: #e5e5e5
    primary-text-color: #000000
    header text color: #fca311
    internal links color: #135578
*/

body{
    min-height: 100vh;
    font-family: "Inconsolata", monospace;
    background-color: #ffffff;
    color: #000000; 
}

nav{
    background-color: #14213d;
    box-shadow: 5px;
    color: #fca311;
}

main{
    min-height: 100vh;
}



/*
    General fixes
*/
.sectionMedium{
    min-height: 50vh;
}
.sectionLarge{
    min-height: 80vh;
}

#nav-logo{
    color: #fca311;
    font-weight: 700;
}
#nav-item{
    color: #fca311;
}

.nav-item:hover{
    font-weight: 700;
    border-bottom: #fca311 solid 1px;
}

.container{
    display: flex;
    justify-content: center;
    align-items: center;
}

/*
    Home Section
*/

.intro{
    margin-top: 20vh;
    height: 70vh;
    flex: 1;
}

img{
    max-height: 400px;
    border-radius: 50%;
}

.text-section h1{
    font-family: 'Bebas Neue', sans-serif;
    color: #fca311;
    font-size: 4rem;
    font-weight: 700;
}

.text-section a{
    color: #135578;
    text-decoration: none;
}
.text-section a:hover{
    border-bottom: #135578 solid 1px;
    animation: fadeIn;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.links-section{
    padding-top: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    margin-bottom: 20vh;
}

.links-section a{
    text-decoration: none;
    color: #fca311;
    vertical-align: middle;
}
.links-section i{
    color: #fca311;
}

.btn{
    background-color: #135578;
    text-align: center;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

#fHover:hover{
    color: #fca311;
}


/*
    Interests section
*/

.interestsIntro{
    margin-top: 20vh;
    margin-bottom: 20vh;
}

.interestsIntro h2{
    overflow: hidden; 
    white-space: nowrap;
    font-family: 'Bebas Neue', sans-serif;
    color: #fca311;
    font-size: 3rem;
    font-weight: 700;
    animation: typing 3.5s steps(100, end), blink-caret .75s step-end;
}

.interestsIntro p{
    animation: fadeInAnimation ease 10s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }

  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
  }
  @keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*
    Skills page
*/
.redHeight{
    max-height: 40vh;
    margin-top: -10vh;
}
.skillsIntro{
    min-height: 100vh;
}
.skillsIntro h2{
    font-size: 4em;
    font-weight: 700;
    font-family: 'Bebas Neue', 'Courier New', Courier, monospace;
    color: #fca311;
}

.skillsFocus{
    min-height: 50vh;
}

.skillsFocus h2{
    font-size: 3em;
    font-weight: 600;
    font-family: 'Bebas Neue', 'Courier New', Courier, monospace;
    color: #fca311;
}

.dshSdL{
    border-right: #135578 dashed;
}

/*
    Projects Page Specific CSS
*/
.tpvBg{
    background: #173404;
    color: #c4a747;
    padding: 20px;
    box-shadow: 10px 10px #f3f3f3 .7;
}

.yfBg{
    background: #f3f3f3;
    color: #D11239;
    padding: 20px;
}

.aPGBG{
    background-color: #f3f3f3;
    color: #135578;
    padding: 20px;
}

.gpdBG{
    background-color: #135578;
    color: #fca311;
    padding: 20px;
}

.fdhqBG{
    background-color: #e61919;
    color: white;
    padding: 20px;
}

.msuFarmBG{
    background-color: #18453b;
    color: #ffffff;
    padding: 20px;
}

.tpvBg h2,
.yfBg h2,
.aPGBG h2,
.gpdBG h2,
.fdhqBG h2,
.msuFarmBG h2{
    font-weight: 700;
}

.tpvBg:hover,
.yfBg:hover,
.aPGBG:hover,
.gpdBG:hover,
.fdhqBG:hover,
.msuFarmBG:hover{
    box-shadow: #000000 10px 10px;
}
.flC h2, 
.flC h6{
    text-align: center;
}

@media(min-width: 750px){
    .nav-item{
        margin: 0 25px 0 25px;
    }
    .text-section{
        margin: 0;
        position: relative;
        top: 25%;
    }

    .interestsIntro hr{
        max-width: 80%;
    }

    .int-card{
        max-width: 80%;
    }

    #sm-paragraph{
        max-width: 70%;
    }
    #sm-paragraph-r{
        max-width: 70%;
        float: right;
    }
    .skillsFocus hr{
        margin-top: 20px;
    }
}

@media(max-width: 500px){
    .text-section{
        padding: 20px;
    }

    .links-section{
        margin-top: 20vh;
    }

    .smMT{
        margin-top: 5vh;
    }

    .dshBSM{
        border-bottom: #14213d dashed;
    }
    .dshSdL{
        border: none;
    }

    .skillsIntro{
        font-size: 1.3em;
    }
}