body{
    margin: 0;
    padding: 0;
    user-select: none;
}

.navbar{
    font-family: Segoe UI;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 2vh;
}

.navbar img{
    max-width: 6vh;
}

.navbar li{
    list-style: none;
}

.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-family: Noto Sans;
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
    gap: 35px;
}

.project-title{
    padding: 0;
    margin: 0;
}

.project-title h1{
    padding: 0;
    margin: 0;
}

.project-title h3{
    padding: 0;
    margin: 0;
    font-size: 2vh;
}

.project-gif img{
    height: 25vh;
    width: 40vh;
}

.project-about{
    max-width: 40vh;
    margin-left: auto;
    margin-right: auto;
}

.project-screencaps{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin: 0;
    padding: 0;
    gap: 2vh;
}

.mySlides{
    height: 25vh;
    width: 40vh;
}

.marginspace{
    margin-top: 5vh;
    margin-bottom: 5vh;
}

footer{
    display: flex;
    flex-direction:row;
    justify-content: space-around;
    align-items: center;
    align-content: center;
}

footer .fa{
    font-size: 10vh;
}

/* For DESKTOP: */
@media only screen and (min-width: 768px){
    .container{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        align-content: center;
        font-family: Noto Sans;
        max-width: 85%;
        margin-left: auto;
        margin-right: auto;
        gap: 35px;
    }

    .project-title h1{
        font-size: 5vh;
    }
    
    .project-title h3{
        padding: 0;
        margin: 0;
        font-size: 3vh;
    }

    .project-gif img{
        height: 35vh;
        width: 55vh;
    }

    .project-about{
        max-width: 55vh;
        margin-left: auto;
        margin-right: auto;
    }
    
    .project-screencaps{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin: 0;
        padding: 0;
        gap: 2vh;
    }
    
    .mySlides{
        height: 35vh;
        width: 55vh;
    }
    
    .screencap iframe{
        height: 35vh;
        width: 55vh;
    }
}