.max-w-73p{
    max-width: 70%;
}
.nav-item-style {
    font-family: 'Quattrocento', serif;
    font-weight: 400;
}
.body {
    padding: 3vw 6vw;
}
.mynav{
    padding-top: 1vw;
    /* padding-bottom: 2vw; */
    padding-left: 1vw;
    padding-right: 1vw;
}
.heading {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
}
.passage {
    font-family: 'Quattrocento', serif;
    font-weight: 400;
}
.box-passage{
    font-family: 'Quattrocento', serif;
    font-weight: 400;
    color:white;
}
.box-title{
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
}
.grey-container{
    background-color: #545454;
}
.image-description{
    text-align: center;
    color: #545454;
}
.check-out{
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
}
.nav-item-style:hover{
    /* text-decoration: underline; */
}
footer{
    background-color: #545454;
    padding-bottom: 2vw;
    margin: 0;
}
#footer-text1 {
    color:white;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
}
#footer-icons{
    color:white;
    padding: 0;
    text-align: center;
}
.fa-discord, .fa-instagram, .fa-linkedin, .fa-youtube{
    color: white;
}
.footer-text2{
    color:white;
    font-family: 'Quattrocento', serif;
    font-weight: 400;
    text-align: center;
}
.yellow{
    color: #FFB703;
}
.blue {
    color: #4285F4;
}
.red{
    color:#FA4C22;
}
.green{
    color:#34a853;
}
.grey{
    background-color: #545454;
}
.white{
    background-color: whitesmoke;
}

/* new classes for project.html */
.project-header{
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-align: center;
}
.project-box-heading{
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    text-align: center;
}
.project-box-description{
    font-family: 'Quattrocento', serif;
    font-weight: 400;
    text-align: start;
    color: white;
}
.project-box-members{
    font-family: 'Quattrocento', serif;
    font-weight: 400;
    text-align: start; 
    text-decoration: underline;
}

.project-image-container{
    align-items: center;
    /* padding-top: auto;
    padding-bottom: auto; */
    padding-right: 0;
    padding-left: 0;

    max-width: 100%;
    max-height: 100%;
    /* background-image: url('/img_projects/Vista.png');  */
    /* background-color: #545454; */
    /* background-size: cover; */
}
.outer-container{
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #545454;
}
/* .image2{
    max-width: 100%;
    height: auto;
    align-items: center;

} */
/* .project-box{
    border-radius: 15px 15px;
    border: 2vw solid #545454;
    margin-bottom: 3vw;
} */
.team-icon{
    font-family: 'Quattrocento', serif;
    font-weight: 400;
    text-align: center;
}
.icon-border-blue{
    border: 0.5vw solid #4285F4;
}
.icon-border-red{
    border: 0.5vw solid #FA4C22;;
}
.icon-border-yellow{
    border: 0.5vw solid #FFB703;
}
.icon-border-green{
    border: 0.5vw solid #34a853;
}
.project-last-line-container{
    margin-top: 1vw;
    margin-left: 2vw;
}
.read-more-container{
    font-family: 'Quattrocento', serif;
    font-weight: 400;
    text-align: end;
}
.image2{
    max-width: 100%;
    height: auto;
    align-items: center;
}
.enigma {
    padding-right: 0;
    padding-left: 0;
    padding-top: 0vh;
    padding-bottom: 0vh;
}

@media(min-width: 280px){
    .toggler{
        font-size: 15px;
        padding: 4px 6px;
    }
    .nav-item-style {
        font-size: 3vw;
    }
    .heading{
        font-size: 7vw;
        text-align: center;
    }
    .passage{
        font-size: 4.2vw;
        padding-top: 3vw;
        padding-bottom: 2.0vw;
        text-align: center;
    }
    .box-passage{
        font-size: 3.5vw;
        padding-left: 3vw;
        padding-right: 3vw;
    }
    .box-title{
        font-size: 5vw;
        padding: 2vw;
    }
    .grey-container{
        border-radius: 15% / 25%;
        margin-bottom: 3vw;
    }
    .image{
        padding-top: 2vw;
    }
    .image-description{
        font-size: 3vw;
        padding: 1vw;
    }
    .check-out{
        font-size: 5vw;
    }
    #footer-text1 {
        font-size: 5vw;
    }
    .fa-discord, .fa-instagram, .fa-linkedin, .fa-youtube{
        font-size: 5vw;
        padding: 1vw;
    }
    .footer-text2{
        font-size: 2vw;
    }
    /* Project.html code */
    .project-header{
        padding: 4vw;
        font-size: 7vw;
    }
    .project-box-heading{
        font-size: 5vw;
    }
    .project-box-description{
        font-size: 2.5vw;
    }
    .project-box-members{
        font-size: 3vw;
    }
    .project-image-container{
        border-radius: 3vw 0vw 0vw 3vw;
    }
    .project-box{
        border-radius: 4.2vw 4.2vw;
        border: 1.6vw solid #545454;
        margin-bottom: 3vw;
    }
    .team-icon{
        font-size: 2.5vw;
        padding: 0.2vw;
        padding-bottom: 0;
        border-radius: 3vw 3vw;
    }
    .read-more-container{
        font-size: 2.5vw;
        padding: 0.5vw;
    }
    .project-last-line-container{
        margin-top: 1vw;
        margin-left: 1vw;
    }
    .two-boxes{
        padding-left: 7vw;
        padding-right: 7vw;
    }
}
@media(min-width: 576px){
    .toggler{
        font-size: 28px;
        padding: 6px 8.5px;
    }
    .nav-item-style {
        font-size: 2.7vw;
    }
    .box-passage{
        font-size: 3.5vw;
        padding-left: 3vw;
        padding-right: 3vw;
    }
    .box-title{
        font-size: 5vw;
        padding: 2vw;
    }
    .grey-container{
        border-radius: 15% / 25%;
        margin-bottom: 3vw;
    }
    .image{
        padding-top: 2vw;
    }
    .image-description{
        font-size: 3vw;
        padding: 1vw;
    }
    .check-out{
        font-size: 5vw;
    }
}
@media(min-width: 768px){
    .toggler{
        font-size: 35px;
        padding: 7px 9px;
    }
    .nav-item-style {
        font-size: 3vw;
    }
    .box-passage{
        font-size: 3.5vw;
        padding-left: 3vw;
        padding-right: 3vw;
    }
    .box-title{
        font-size: 5vw;
        padding: 2vw;
    }
    .grey-container{
        border-radius: 15% / 25%;
        margin-bottom: 3vw;
    }
    .image{
        padding-top: 6.5vw;
    }
    .image-description{
        font-size: 3vw;
        padding: 1vw;
    }
    .icon-border-blue{
        border: 0.35vw solid #4285F4;
    }
    .icon-border-red{
        border: 0.35vw solid #FA4C22;;
    }
    .icon-border-yellow{
        border: 0.35vw solid #FFB703;
    }
    .icon-border-green{
        border: 0.35vw solid #34a853;
    }
    .image2{
        max-width: 100%;
        height: auto;
        align-items: center;
    }
}
@media(min-width: 992px){
    .heading{
        font-size: 4.3vw;
        text-align: start;
    }
    .passage{
        font-size: 2.3vw;
        padding-top: 1.5vw;
        padding-bottom: 1.5vw;
        text-align: start;
    }
    .max-w-73p{
        max-width: 40%;
    }
    .nav-item-style {
        font-size: 1.7vw;
    }
    #navbarNav{
        max-width: 50%;
    }
    .box-passage{
        font-size: 1.1vw;
        padding: 0;
    }
    .box-title{
        font-size: 2.1vw;
        padding: 0.5vw;
    }
    .grey-container{
        border-radius: 30px 30px;
        margin-bottom: 3vw;
        box-sizing: border-box;
        border: 0.5vw solid white;
    }
    .image{
        padding-top: 6.2vw;
    }
    .image-description{
        font-size: 1.5vw;
        padding: 0.5vw;
    }
    .check-out{
        font-size: 2vw;
        padding-top: 2.2vw;
    }
    #footer-text1 {
        font-size: 3vw;
    }
    .fa-discord, .fa-instagram, .fa-linkedin, .fa-youtube{
        font-size: 2.7vw;
        padding: 0.5vw;
    }
    .footer-text2{
        font-size: 1.7vw;
        margin: 0;
    }
    /* Project page */
    .project-header{
        padding: 2.5vw;
        font-size: 4vw;
    }
    .project-box-heading{
        font-size: 2.5vw;
    }
    .project-box-description{
        font-size: 1.5vw;
    }
    .project-box-members{
        font-size: 1.7vw;
    }
    .project-image-container{
        border-radius: 1vw 0vw 0vw 1vw;
    }
    .project-box{
        border-radius: 1.2vw 1.2vw;
        border: 1vw solid #545454;
        margin-bottom: 2vw;
    }
    .team-icon{
        font-size: 1.3vw;
        padding: 0.2vw;
        padding-bottom: 0;
        border-radius: 3vw 3vw;
    }
    .read-more-container{
        font-size: 1.5vw;
        padding: 0.4vw;
    }
    .project-last-line-container{
        margin-top: 0.5vw;
        margin-left: 0.25vw;
    }
    .icon-border-blue{
        border: 0.2vw solid #4285F4;
    }
    .icon-border-red{
        border: 0.2vw solid #FA4C22;;
    }
    .icon-border-yellow{
        border: 0.2vw solid #FFB703;
    }
    .icon-border-green{
        border: 0.2vw solid #34a853;
    }
    .two-boxes{
        padding-left: 5vw;
        padding-right: 5vw;
    }
    .image2{
        max-width: 100%;
        height: auto;
        align-items: center;
    }
} 
@media(min-width: 1030px){
    .enigma {
        padding-right: 0;
        padding-left: 0;
        padding-top: 1vh;
        padding-bottom: 1vh;
    }
} 
@media(min-width: 1300px){
    .enigma {
        padding-right: 0;
        padding-left: 0;
        padding-top: 1.2vh;
        padding-bottom: 1.2vh;
    }
} 

@media(min-width: 1400px){
    /* .max-w-73p{
        min-width: 50%;
    } */
    .nav-item-style {
        font-size: 1.4vw;
    }
    .logo {
        padding-left: 1.5vw;
        padding-top: 0.1vw;
    }
    .heading {
        font-size: 3.9vw;
    }
    .passage {
        font-size: 1.8vw;
    }
    .box-passage{
        font-size: 1.1vw;
        padding: 0.5vw;
    }
    .box-title{
        font-size: 2.1vw;
        padding: 0.5vw;
    }
    .grey-container{
        margin-bottom: 3vw;
        box-sizing: border-box;
        border: 0.5vw solid white;
        border-radius: 50px 50px;
    }
    .image{
        padding-top: 3vw;
    }
    .image-description{
        font-size: 1.5vw;
        padding: 0.5vw;
    }
    .check-out{
        font-size: 2vw;
        padding-top: 0.7vw;
    }
    /* Project page */
    .project-header{
        padding: 1vw;
        font-size: 3vw;
    }
    .project-box-heading{
        font-size: 2vw;
    }
    .project-box-description{
        font-size: 1.2vw;
        /* text-align: center; */
    }
    .project-box-members{
        font-size: 1.4vw;
    }
    .project-image-container{
        border-radius: 1vw 0vw 0vw 1vw;
    }
    .project-box{
        border-radius: 1.2vw 1.2vw;
        border: 0.8vw solid #545454;
        margin-bottom: 1.2vw;
    }
    .team-icon{
        font-size: 1.3vw;
        padding: 0.2vw;
        padding-bottom: 0;
        border-radius: 3vw 3vw;
    }
    .read-more-container{
        font-size: 1.2vw;
        padding: 0.4vw;
    }
    .project-last-line-container{
        margin-top: 0.5vw;
        margin-left: 0.25vw;
    }
    .two-boxes{
        padding-left: 5.5vw;
        padding-right: 5.5vw;
    }
    .first-box{
        padding-right: 1.5vw;
    }
    .second-box{
        padding-left: 1.5vw;
    }
    .enigma {
        padding-right: 0;
        padding-left: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

a[href^="#"] {
    transition: all 0.2s ease-in-out;
}

a[href^="#"]:hover {
    color: white;
}

body {
    scroll-behavior: smooth;
}


.fade-in {
    animation-name: fadeIn;
    animation-duration: 1s;
  }

@keyframes fadeIn {
from {
    opacity: 0;
}

to {
    opacity: 1;
}
}

/* set up the trigger for the animation */
.element.is-visible {
opacity: 1;
animation-name: slideInFromTop;
}

.element.is-hidden {
opacity: 1;
animation-name: slideInFromBottom;
}

.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}