/*General styles*/

* {
    font-family: 'Inconsolata', monospace;
    color: black;
    
      
}

html{
    scroll-behavior: smooth; 
    /*background: rgb(162,226,155);
    background: radial-gradient(circle, rgba(162,226,155,1) 0%, rgba(46,53,144,1) 100%);
    */

    /*background-image: linear-gradient( 135deg, #92FFC0 10%, #002661 100%);*/
    /*background-color:#00539CFF;*/

    background: rgb(34,195,81);
    background: linear-gradient(280deg, rgba(34,195,81,1) 0%, rgba(0,83,156,1) 26%, rgba(255,214,98,1) 100%);
    

    background : #033561;
    width : 100vw;
    

}

body{
    overflow-y: scroll; 
    overflow-x:hidden; 
    
    
    scrollbar-width: thin;
    margin:0;
    
}

body::-webkit-scrollbar{
    width : 20px;
    background-image: inherit;
    background-blend-mode: lighten;
}

body::-webkit-scrollbar-thumb{

    background-color:black;
    
    border-radius: 20px;
    border : 7px solid transparent;
    background-clip: content-box;
    
}

body::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
  }

body::-webkit-scrollbar-track{

    background-color: #033561;
    
    
}



/*Header styles*/

.topnav{
    
    overflow:visible;
    position:fixed;
    width : 100vw;
    margin : 0 10px 0 15px;
    
    z-index : 1;
    /*background-color: #fff;*/
    
}

.topnav-logo{
    float : left;
    margin : 10px 10px 10px 10px;
    transition: transform .2s;

}

.topnav-logo:hover{

    transform: scale(1.1);

}

.topnav-links{
    float : right;
    
    
    /*padding-top: 15px;*/
    text-align: center;
    margin : 10px 50px 10px 10px;
    font-weight: 600;
    
    

    /*margin-inline-end: 100px;*/
}



.topnav-links a:hover{
    
    color:black; 
    text-decoration: underline;
    
}

.topnav-links a, a:visited, a:active{ 
    
    color: #FFD662FF;
    text-decoration: none;
}

.topnav-rightlist{
    text-align:center;
    display: inline-block;
    
}

/*Smaller screens*/

@media only screen and (max-width: 500px){

    html{
        scroll-behavior: smooth;
    }
    
    .topnav{
        overflow:hidden;
        position:fixed;
        top : 0;
        width: 100vw;
        max-height: 70px;
    }
    
    .topnav-links{
        float : right;
        height: 50px;
        text-align: center;
        margin : 5px 5px 5px 5px;
        transform: scale(0.8);

        position : absolute;
        left : 40px;
        
    }

    .topnav-links ul{
        padding:0;
    }

    .topnav-links a:hover{
        
        color:black; 
        text-decoration: underline;
    }
    
    .topnav-links a, a:visited, a:active{ 
       
        color: #FFD662FF;
        text-decoration: none;
        
        font-size: small;
    }   
    
    
    .topnav-rightlist{
        text-align:center;
        display: inline-block;
        margin : 5px 5px 5px 5px;   
    }

}


/*Main body styles*/
.intro{

    color:black;
    padding-top: 150px;
    text-align :center;
    
}

.intro p{

    color:black;
    font-weight: 800;

}

.intro h1{
    color: black;

    
}

.typing-container {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
}

.typing-container #feature-text {
    margin-left: 8px;
    
}

.typing-container .input-cursor {
    display: inline-block;
    width: 2px;
    height: 42px;
    background-color: white;
    margin-left: 8px;
    animation: blink 0.6s linear infinite alternate;
}

@keyframes blink {
    0% {opacity: 1;}
    40% {opacity: 1;}
    60% {opacity: 0;}
    100% {opacity: 0;}
}

.intro a, a:visited, a:active{

    color:#FFD662FF;
    text-decoration: none;
    
}

.intro a:hover{
    color:black;
    text-decoration: underline;
}

.imagelinks{
   
    text-align: center;
    /*transform: scale(0.03);*/
}

.imagelinks a:hover{
    text-decoration: none;
    margin : 0;
}

.imagelinks svg{
    width:50px;
    height:50px;
    margin:10px;

}

.imagelinks svg:hover{

    fill: #FFD662FF;
}


#intropane{
    height:100vh;
    width:100vw;
    /*background-color: white;*/
}

#aboutmepane{
    height: 53vh;
    width: 100vw;
}

#projectpane {
    /*height: 520px;*/
    height: 75vh;
    width: 100vw;
    
 
    /*background-color: blue;*/
}

#educationpane{
    height: 100vh;
    width:100vw;
    margin: 10px;
    

    /*
    background-color: grey;
    border-style: dotted;
    border-color: gold;
    */

}

.education{
    text-align: center;
    
}

.education h1{
    color:black;
    font-weight: 900;
}

.education p{
    color:black;
    font-weight: 500;
}

.educationContainer{
    position: relative;
    width: inherit;
    display : flex;
    margin : 50px 0 0 0;
    
    
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding : 30px;
}

.educationContainer .card{
    position : relative;
    max-width: 300px;
    height : 215px;
    background : #fff;
    margin : 30px 10px;
    padding : 20px 15px;
    display: flex;
    flex-direction : column;

    transition: 0.3s ease-in-out;
}

.educationContainer .card:hover{
    height : 420px; 
}

.educationContainer .card .imgBox{
    position : relative;
    width : 260px;
    height : 260px;

    top: -60px;
    left : 20px;
   
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);

}

.educationContainer .card .imgBox img{
    max-width: 100%;
    border-radius: 4px;

}

.educationContainer .card .content{

    position : relative;
    margin-top : -140px;
    padding : 10px 15px;
    text-align: center;
    color : #111;
    visibility: hidden;
    opacity: 0;
    transition : 0.3s ease-in-out;

}

.educationContainer .card:hover .content{

    visibility: visible;
    opacity: 1;
    margin-top : -40px;
    transition-delay : 0.3s;
}


.project{
    text-align:center;
}

.project p{
    font-weight: 500;
    color:black;
}

.project h{
    color:black;
    font-weight : 900;
}


/*Footer styles*/
.footerbar{

    overflow:hidden;
    text-align:center;
    padding-bottom: 20px;
    margin-top: 20px;

    /*background-color: inherit;*/

}

.footerbar a, a:visited, a:active{

    color:#FFD662FF;
    text-align: center;
    font-weight : 600;
    /*padding-inline-end: 15px;
    padding-top : 10px;*/
    text-decoration: none;

}

.footerbar a:hover{
    color : black;
    text-decoration: underline;
}

.footerbar p, h3{

    color:black;
    
}