/* mobile view */
/* * {
    box-sizing: border-box;
} */


body{
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    line-height: 1.6;
    background-color: #0f172a;
    overflow: auto;
}

.animation-container {
    overflow: hidden; 
}


@keyframes fade-down{
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(1);
        
    }
    
    100% {
        opacity: 1;
        transform: translateY(0px) scale(1);
        
    }
}
@keyframes slideInFromLeft {
    to {
        opacity: 1;
        transform: translateX(0%); 
    }
}
.slide-in-from-left {
    animation: slideInFromLeft 1s ease-out forwards;
}


.animate-fl {
    /* opacity: 0; 
    transform: translate(-20%); */
    animation: fade-down 1s;
}

.temp {
    padding-top: 35px;
}



.main, footer{
    padding: 0 50px;
    padding-top: 20px;
}
.footer-email{
    padding-bottom: 30px;
}
footer{
    margin-bottom: 20px;
}
.about, h1{
    padding: 20px 0;
}
#section1 {
    animation: fade-down 1s 0.1s backwards;
}
#section2 {
    animation: fade-down 1s 0.2s backwards;
}
#section3 {
    animation: fade-down 1s 0.3s backwards;
}
#section4 {
    animation: fade-down 1s 0.4s backwards;
}
.intro {
    font-family: 'Courier New', monospace;
    color: #64FFDA;

    /* opacity: 0; 
    transform: translate(-20%);
    animation: slideInFromLeft 1s ease-out forwards; */
    animation: fade-down 1s;

}
h1{
    color: white;
    /* font-size: clamp(40px, 8vw, 80px); */
    font-size: xxx-large;
    font-family: 'Archivo Black';
    line-height: 1;

}
h2{
    font-size: x-large;
    color: #8892B0;
    font-family: 'Archivo Black';

    

}
/* font-family: 'Courier New', monospace; */
h3{
    font-size: large;
    color: #8892B0;
}
.body_container h2{
    margin-bottom: 5px;
}
p, li {
    font-size: large;
}


.nav{
    color: black;
    background-color: #66b2b2;
}

/* .container{
    overflow: auto;
    max-width: 1100px;
    padding: 0 40px;
    margin: 0 auto;
} */

.nav .flex{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 30px;
    margin-left: auto;
    
}
.logo-container{
    display: none;
    margin-right: auto;
}
.logo{
    display: none;
    width: 20%;
    min-width: 45px;
    margin-right: auto;
}
.nav ul{
    display: flex;
}
a{
    color: #64FFDA;
    text-decoration: none;
}
/* TODO add hover, focus mode for umichprojects button */
.umichprojects{
    display: inline-block;
    margin: 10px 0px;
    padding: 10px;
    border: solid #64FFDA 1px;
    
}
.umichprojects:hover, .umichprojects:focus{
    transform: scale(0.98);
    transition: transform 0.3s ease;
}
.quick-links img:hover, .quick-links img:focus, .quick-links i:hover, .quick-links i:focus{
    transform: scale(0.98);
    transition: transform 0.3s ease;
}
.projects div:hover, .projects div:focus, .experiences div:hover, .experiences div:focus{
    transform: scale(0.98);
    transition: transform 0.3s ease;
}
.nav a {
    color: black;
    margin: 0 5px;
    padding: 10px;
    text-decoration: none;
}

.nav a:hover, .nav a:focus{
    border-bottom: solid 4px #020202;
}

.curr{
    border-bottom: solid 4px #020202;
}
.quick-links{
    padding-top: 20px;
    display: flex;
    justify-content:left;
}
.quick-links img, .quick-links i, .projects img, .icon{
    width: 10%;
    max-width: 50px;
}
.tech-skills{
    font-family: 'Courier New', monospace;
    color: #64FFDA;

}
.projects, .experiences{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 20px;
}
.projects div, .experiences div{
    background-color: #112340;
    padding: 20px;
    border-radius: 2%;

}
ul li::before{
    content: "\2022";
    color: #64FFDA;
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
}
/* .coursework ul li::before, .projects ul li::before, .experiences ul li::before{ */
    /* content: "\2022"; */
    /* color: #64FFDA; */
    /* display: inline-block; Needed to add space between the bullet and the text */
    /* width: 1em; Also needed for space (tweak if needed) */
    /* margin-left: -1em; Also needed for space (tweak if needed) */
/* } */
.nav ul li::before {
    display: none;
}
.skip{
    display: none;
}
.nav {
    position: sticky;
    top: 0;
    z-index: 200;
}
.logo{
    display: none;
}
@media screen and (min-width: 800px) {
    /* this is tablet */
    .projects{
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
    }
    .skip{
        display: block;
      }
    .skip a:focus{
        z-index: 300;
        top: 20px;
    }
    .skip a{
        background: black;
        left: 0;
        padding: 6px;
        color: white;
        -webkit-transition: top 1s ease-out;
        transition: top 1s ease-out;
        position: absolute;
        top: -40px;
        z-index: 300;
    }
    .logo{
        max-width: 30px;
        display: inline;
    }
    .logo-container{
        display: inline;
    }
    
}


@media screen and (min-width: 900px) {
    /* this is desktop */
    .about{
        display: grid;
        grid-template-columns: 1fr 3fr;
        row-gap: 35px;
    }
    .projects{
        row-gap: 35px;
        column-gap: 35px;
    }
}
  
/* add media for preferred reduced motion */
@media screen and (prefers-reduced-motion: reduce){
    .skip a, .slide-in-from-left, .intro{
        -webkit-transition: none; 
        transition: none;        
    }

}