@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

.inter-regular {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }
  .inter-bold {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .inter-regular-italic {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .inter-bold-italic {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-style: italic;
  }

@keyframes slideRight {
    from {
      transform: translateX(-100vw);
    }
    to {
      transform: translateX(0);
    }
  }

@keyframes slideAndBob {
    0%{
        transform: translate(-100vw, 0);
    }
    12.5%{
        transform: translate(-87.5vw, -3vh);
    }
    25%{
        transform: translate(-75vw, 0);
    }
    37.5%{
        transform: translate(-62.5vw, -3vh);
    }
    50%{
        transform: translate(-50vw, 0);
    }
    62.5%{
        transform: translate(-37.5vw, -3vh);
    }
    75%{
        transform: translate(-25vw, 0);
    }
    87.5%{
        transform: translate(-12.5vw, -3vh);
    }
    100%{
        transform: translate(0vw, 0);
    }
}
@keyframes waterText {
	0%,
	100% {
		clip-path: polygon(
			0% 45%,
			16% 44%,
			33% 50%,
			54% 60%,
			70% 61%,
			84% 59%,
			100% 52%,
			100% 100%,
			0% 100%
		);
	}

	50% {
		clip-path: polygon(
			0% 60%,
			15% 65%,
			34% 66%,
			51% 62%,
			67% 50%,
			84% 45%,
			100% 46%,
			100% 100%,
			0% 100%
		);
	}
}

body, main{
    margin: 0 0;
    font-family: 'Inter', sans-serif;
}

nav{
    position: fixed;
    top: 0;
    overflow: hidden;
    background-color: #1c4587;
    height: 5vh;
    width: 100%;
}

footer{
    text-align: left;
    background-color: rgb(4, 4, 56);
    padding: 10px 0;
    margin-top: 15vh;
}

#QR-code{
    width: 20%; 
    padding: 2% 4%;
}

#hero{
    background-color: white;
    height: 75vh;
    width: 100vw;
    position: relative;
}

.title-wrapper{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

#stroke, #fill{
    margin: 0 auto;
    text-align: center;
}

.team488-real-wrapper {
	position: relative;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

#middle-text{
    font-size: 2vw;
    color: #1c4587;
    font-family: "Poppins", sans-serif;
    margin: 0 0;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.team488-wrapper{
    margin: auto auto;
}

#reefscape{
    margin-left: auto;
    margin-right: auto;
}

.team488-real-wrapper{

}

.team488-wrapper {
    #reefscape{
        position: relative;
        width: 50vw;
        left: 0%;
        filter: brightness(1.5);
    }
}

.team488-wrapper h2 {
	font-size: 8vw;
	position: absolute;
	font-family: "Poppins", sans-serif;
}

#stroke {
	color: transparent;
	-webkit-text-stroke: 4px #1c4587;
    position: absolute;
}

#fill {
	color: #1c4587;
    position:static;
	animation: waterText 4s ease-in-out infinite;
}

.wave-wrapper-wrapper{
    position: absolute;
    overflow-x: hidden;
    width: 100vw;
    height: fit-content;
    height: 75vh;
}

.wave-wrapper{
    height: fit-content;
    width: 100vw;
    overflow: hidden; 
    white-space: nowrap; 
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 0;
    left: 0;
}

.fg-wave-1, .fg-wave-2, .mfg-wave-1, .mfg-wave-2, .mbg-wave-1, .mbg-wave-2, .bg-wave-1, .bg-wave-2, .algae{
    width: 100vw; 
    height: auto; 
    animation: slideRight 10s linear infinite; 
    flex-shrink: 0;
}

.fg-wave-1, .fg-wave-2{
    animation: slideRight 10s linear infinite; 
}

.mfg-wave-1, .mfg-wave-2{
    animation: slideRight 15s linear infinite; 
}

.algae{
    animation: slideAndBob 15s linear infinite; 
}

.mbg-wave-1, .mbg-wave-2{
    animation: slideRight 20s linear infinite; 
}

.bg-wave-1, .bg-wave-2{
    animation: slideRight 30s linear infinite; 
}

a:hover{
    color: #9186c5;
}

#wave-graphic{
    width: 100%;
}

button, .project-title, .project-nav, .project-title-inactive, .project-nav-active, .project-nav-inactive, .in-depth, .in-depth-active, .in-depth-inactive, .on-the-surface, .on-the-surface-active, .on-the-surface-inactive{
    letter-spacing: -0.789px;
}

.project-content-image-div{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-content-image{
    width: 95%;
    height: auto;
}

.project-content-table-image{
    width: 95%;
    height: auto;
}

.project-content-image-subtitle{
    font-weight: 900;
    font-style: italic;
    color: rgb(141, 141, 141);
}

table{
    width: 100%;
    border-collapse: collapse;
}
th, td{
    border: 1px solid black;
    padding: 2%;
    text-align: left;
}
th{
    color: #1c4587;
    text-align: center;
}

#wave-graphic{
    width: 100%;
}

.links{
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100vw;
    display: flex;
    flex-direction: row;
    background-color: #1c4587;
    align-items: center;
    justify-content: space-evenly;
    height: 7vh;
}

button{
    border-width: 0;
    font-weight: 900;
    background-color: transparent;
    font-size: 0.8rem;
    margin: 0 0;
    padding: 0.2vh 1.4vw 0.2vh 0;
    letter-spacing: -0.789px;
}

a{
    text-decoration: none;
    color: #58499b;
    font-weight: 700;
}

#menu-btn{
    position: fixed;
    top: 10px;
    right: 10px;
    width: 100px;
    aspect-ratio: 10 / 8;
    background-color: #1c4587;
    border-radius: 10px;
    z-index: 10;
    transition: width 0.2s ease, background-color 0.2s ease;
}

#menu-btn:hover{
    width: 110;
    background-color: #345b99;
}

.button-enabled,.button-disabled{
    font-weight: 900;
    font-size: 1.5vw;
}
.button-enabled:hover,.button-disabled:hover{
    filter: brightness(0.9);
    cursor: pointer;
}

.button-enabled{
    color: white;
}

.button-disabled{
    color: #AFACFF;    
}

.project{
    box-sizing: border-box;
    padding: 2%;
}

.project-title, .project-title-inactive, .content{
    transition: opacity 1s ease, height 0.5s ease-in-out, color 0.5s ease-in-out;
}

.project-title-inactive{
    color: #8e8e8e;
}

.project-header{
    display: flex;
    flex-direction: column;
}

.project-title-div{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.project-title-div:hover{
    cursor: pointer;
    filter: brightness(0.9);
}

.project-title, .project-title-inactive{
    font-weight: 700;
    margin: 2vh 0 0 0;
}

.discipline-tag{
    transition: background-color 1s ease, font-size 0.25s ease-in-out,color 1s ease;
}

.vision-discipline-tag, .programming-discipline-tag, .electrical-discipline-tag, .mechanical-discipline-tag, .cad-discipline-tag{
    font-weight: 900;
    box-sizing: border-box;
    height: fit-content;
    padding: 1%;
    color: white;
}

.vision-discipline-tag{
    background-color: #55ACFE;
}
.vision-discipline-tag.discipline-tag-inactive{
    background-color: #87c5ff;
}

.programming-discipline-tag{
        
}
.electrical-discipline-tag{
    
}
.mechanical-discipline-tag{
    
}
.cad-discipline-tag{
    
}

.demo-btn{
    color: #a7a7a7 !important;
    cursor: default !important;
}

.project-navbar{
    display: flex;
    flex-wrap: wrap;

    transition: opacity 1s ease, height 0.5s ease-in-out, width 0.5s ease-in-out;
    overflow: hidden;
    opacity: 1;
}

.project-content{  
    transition: opacity 1s ease, height 0.5s ease-in-out, max-height 0.5s ease-in-out;
    overflow: hidden;
    opacity: 1;
    border-bottom: 2px solid rgb(191 191 191 /37%)
}

.project-nav{
    color:black;
}

.project-nav:hover{
    cursor: pointer;
}

.interest-tag-div{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    clip-path: inset(0 100% 0 0); 
    max-height: 0;
    transition: max-height 0.5s ease-in-out, clip-path 0.5s ease-in-out;
}

.interest-tag-div.active {
    clip-path: inset(0 0 0 0); 
    max-height: 200px;
}

.interest-tag{
    border-radius: 7px;
    padding: 0.5vh 1vw;
    margin: 0.5vh 1vw 0.5vw 0;
    font-size: 0.5rem;
    font-weight: 900;
    color: white;
}

.ml{
    background-color: #3B82F6;
}
.ai{
    background-color: #d81919;
}
.computer-vision{
    background-color: #10B981;
}
.unique-approach{
    background-color: #EC4899;
}
.math{
    background-color: #119427;
}
.physics{
    background-color: #81097b;
}
.autonomous{
    background-color: #ff7300;
}
.networking{
    background-color: #00aec5;
}
.uiux{
    background-color: #f16785;
}
.efficiency-booster{
    background-color: #00c020;
}
.color-detection{
    background-color: #00db54;
}

.project-navbar-bottom-row{
    display:flex;
    align-items: baseline;
}

.hidden-content{
    display: none;
}

.under-construction{
    width: 60%;
    height: auto;
}

video{
    width: 95%;
    height: auto;

}

@media (min-width: 0px) and (max-width:768px){
    a:hover{
        color: #3a2f6e;
    }
    .button-enabled:hover,.button-disabled:hover, .project-title-div:hover{
        filter:brightness(1)
    }
}

@media (min-width: 0px) and (max-width: 420px){
    .links{
        height: 4vh;
    }
    
    .interest-tag{
        border-radius: 9px;
        font-size: 0.5rem;
    }
    .button-enabled,.button-disabled{
        font-size: 3vw;
    }
    .wave-wrapper {
        width: 300vw;
    }
    
    .fg-wave-1, .fg-wave-2, .mfg-wave-1, .mfg-wave-2, .mbg-wave-1, .mbg-wave-2, .bg-wave-1, .bg-wave-2, .algae {
        width: 300vw; 
        animation: slideRight0-420 10s linear infinite; 
    }
    .fg-wave-1, .fg-wave-2{
        animation: slideRight0-420 10s linear infinite; 
    }
    
    .mfg-wave-1, .mfg-wave-2{
        animation: slideRight0-420 15s linear infinite; 
    }
    
    .algae{
        animation: slideAndBob0-420 15s linear infinite; 
    }
    
    .mbg-wave-1, .mbg-wave-2{
        animation: slideRight0-420 20s linear infinite; 
    }
    
    .bg-wave-1, .bg-wave-2{
        animation: slideRight0-420 30s linear infinite; 
    }
    
    @keyframes slideRight0-420 {
        from {
            transform: translateX(-300vw);
        }
        to {
            transform: translateX(0);
        }
    }
    
    @keyframes slideAndBob0-420 {
        0% {
            transform: translate(-300vw, 0);
            opacity: 0;
        }
        12.5% {
            transform: translate(-262.5vw, -3vh);
            opacity: 0;
        }
        25% {
            transform: translate(-225vw, 0);
            opacity: 1;
        }
        37.5% {
            transform: translate(-187.5vw, -3vh);
            opacity: 1;
        }
        50% {
            transform: translate(-150vw, 0);
            opacity: 1;
        }
        62.5% {
            transform: translate(-112.5vw, -3vh);
            opacity: 1;
        }
        75% {
            transform: translate(-75vw, 0);
            opacity: 1;
        }
        87.5% {
            transform: translate(-37.5vw, -3vh);
            opacity: 0;
        }
        100% {
            transform: translate(0vw, 0);
            opacity: 0;
        }
    }
    .project-title, .project-title-inactive{
        font-size: 7.9vw;
    }

    .vision-discipline-tag, .programming-discipline-tag, .electrical-discipline-tag, .mechanical-discipline-tag, .cad-discipline-tag{
        border-radius: 5px;
        margin: 2vh 0 0 2vw;
    }
    .project-nav, .project-nav-inactive{
        font-size: 3.6vw;
    }
    
    .project-nav-active{
        font-size: 3.9vw;
        color: #1100FF;
    }
    
    .project-nav-inactive{
        color: #bebebe;
    }
    
    .technical-overview-wrapper{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: baseline;
        
    }

    .technical-overview-subwrapper{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    .technical-overview-subwrapper>p{
        margin: 0 0;
        padding: 0 0;
    }
    
    .on-the-surface, .in-depth, .technical-overview-subwrapper>p, .on-the-surface-inactive, .in-depth-inactive, .inactive, .on-the-surface-active, .in-depth-active{
        font-weight: 900;
        font-size: 2.5vw;
        color: 818181;
        padding: 0.1vw 0.1vw;
    }
    
    .on-the-surface, .in-depth{
        cursor: pointer;
    }

    .on-the-surface-active{
        color: #55ACFE;
    }
    
    .on-the-surface-inactive, .in-depth-inactive, .inactive{
        color: #c9c9c9;
    }
    
    .in-depth-active{
        color: #370084;
    }
    
    .project-content-item{
        margin: 3vh 0;
    }
    
    .project-content-item-title{
        margin: 1vh 0;
    }
    
    .project-content-item-paragraph{
        margin: 2vh 0;
    }
    
    .project-content-item-list{
        margin: 1vh 0;
    }
    
    .hidden-project{
        visibility: hidden;
        position: absolute;
    }   
    #middle-text{
        font-size: 5vw;
    }
    
    .team488-wrapper #reefscape{
        width: 90vw;
        margin: 0 0;
    }
    
    .team488-wrapper h2 {
        font-size: 16vw;
        border-width: 2px;
    }
    #stroke{
        -webkit-text-stroke: 2px #1c4587;
    }
    @keyframes slideAndBob {
        0%{
            transform: translate(-100vw, 0);
        }
        12.5%{
            transform: translate(-87.5vw, -1.8vw);
        }
        25%{
            transform: translate(-75vw, 0);
        }
        37.5%{
            transform: translate(-62.5vw, -1.8vw);
        }
        50%{
            transform: translate(-50vw, 0);
        }
        62.5%{
            transform: translate(-37.5vw, -1.8vw);
        }
        75%{
            transform: translate(-25vw, 0);
        }
        87.5%{
            transform: translate(-12.5vw, -1.8vw);
        }
        100%{
            transform: translate(0vw, 0);
        }
    }
}

@media (min-width: 420px) and (max-width: 553px){
    .links{
        height: 5vh;
    }
    .interest-tag{
        border-radius: 9px;
        font-size: 0.6rem;
    }
    .button-enabled,.button-disabled{
        font-size: 3vw;
    }
    .wave-wrapper {
        width: 300vw;
    }
    .fg-wave-1, .fg-wave-2, .mfg-wave-1, .mfg-wave-2, .mbg-wave-1, .mbg-wave-2, .bg-wave-1, .bg-wave-2, .algae {
        width: 300vw; 
        animation: slideRight420-553 10s linear infinite; 
    }
    .fg-wave-1, .fg-wave-2{
        animation: slideRight420-553 10s linear infinite; 
    }
    
    .mfg-wave-1, .mfg-wave-2{
        animation: slideRight420-553 15s linear infinite; 
    }
    
    .algae{
        animation: slideAndBob420-553 15s linear infinite; 
    }
    
    .mbg-wave-1, .mbg-wave-2{
        animation: slideRight420-553 20s linear infinite; 
    }
    
    .bg-wave-1, .bg-wave-2{
        animation: slideRight420-553 30s linear infinite; 
    }
    
    @keyframes slideRight420-553 {
        from {
            transform: translateX(-300vw);
        }
        to {
            transform: translateX(0);
        }
    }
    
    @keyframes slideAndBob420-553 {
        0% {
            transform: translate(-300vw, 0);
            opacity: 0;
        }
        12.5% {
            transform: translate(-262.5vw, -3vh);
            opacity: 0;
        }
        25% {
            transform: translate(-225vw, 0);
            opacity: 1;
        }
        37.5% {
            transform: translate(-187.5vw, -3vh);
            opacity: 1;
        }
        50% {
            transform: translate(-150vw, 0);
            opacity: 1;
        }
        62.5% {
            transform: translate(-112.5vw, -3vh);
            opacity: 1;
        }
        75% {
            transform: translate(-75vw, 0);
            opacity: 1;
        }
        87.5% {
            transform: translate(-37.5vw, -3vh);
            opacity: 0;
        }
        100% {
            transform: translate(0vw, 0);
            opacity: 0;
        }
    }

    .project-title, .project-title-inactive{
        font-size:  7.9vw;
    }
    
    .vision-discipline-tag, .programming-discipline-tag, .electrical-discipline-tag, .mechanical-discipline-tag, .cad-discipline-tag{
        border-radius: 5px;
        margin: 2vh 0 0 2vw;
    }
    
    .project-nav{
        font-size: 0.9rem;
    }
    
    
    .project-nav-active{
        font-size: 1rem;
        color: #1100FF;
    }
    
    .project-nav-inactive{
        font-size: 0.9rem;
        color: #bebebe;
    }
    
    .technical-overview-wrapper{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: baseline;
        
    }

    .technical-overview-subwrapper{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    .technical-overview-subwrapper>p{
        margin: 0 0;
        padding: 0 0;
    }
    
    .on-the-surface, .in-depth, .technical-overview-subwrapper>p, .on-the-surface-inactive, .in-depth-inactive, .inactive, .on-the-surface-active, .in-depth-active{
        font-weight: 900;
        font-size: 0.7rem;
        color: 818181;
        padding: 0.1vw 0.1vw;
    }
    
    .on-the-surface-active{
        color: #55ACFE;
    }
    
    .on-the-surface-inactive, .in-depth-inactive, .inactive{
        color: #c9c9c9;
    }
    
    .in-depth-active{
        color: #370084;
    }
    
    .project-content-item{
        margin: 3vh 0;
    }
    
    .project-content-item-title{
        margin: 1vh 0;
    }
    
    .project-content-item-paragraph{
        margin: 2vh 0;
    }
    
    .project-content-item-list{
        margin: 1vh 0;
    }
    
    .hidden-project{
        visibility: hidden;
        position: absolute;

    }
    #middle-text{
        font-size: 5vw;
    }
    
    .team488-wrapper #reefscape{
        width: 78vw;
    }
    
    .team488-wrapper h2 {
        font-size: 15vw;
        border-width: 2px;
    }
    #stroke{
        -webkit-text-stroke: 3px #1c4587;
    }
}

@media (min-width: 553px){
    .interest-tag{
        border-radius: 15px;
        font-size: 0.8rem;
    }
}
@media (min-width: 553px) and (max-width:769px){
    .links{
        height: 5vh;
    }
    .button-enabled,.button-disabled{
        font-size: 3vw;
    }
    .wave-wrapper {
        width: 150vw;
    }
    
    .fg-wave-1, .fg-wave-2, .mfg-wave-1, .mfg-wave-2, .mbg-wave-1, .mbg-wave-2, .bg-wave-1, .bg-wave-2, .algae {
        width: 150vw; 
        animation: slideRight553-769 10s linear infinite; 
    }
    .fg-wave-1, .fg-wave-2{
        animation: slideRight553-769 10s linear infinite; 
    }
    
    .mfg-wave-1, .mfg-wave-2{
        animation: slideRight553-769 15s linear infinite; 
    }
    
    .algae{
        animation: slideAndBob553-769 15s linear infinite; 
    }
    
    .mbg-wave-1, .mbg-wave-2{
        animation: slideRight553-769 20s linear infinite; 
    }
    
    .bg-wave-1, .bg-wave-2{
        animation: slideRight553-769 30s linear infinite; 
    }
    
    @keyframes slideRight553-769 {
        from {
            transform: translateX(-150vw);
        }
        to {
            transform: translateX(0);
        }
    }
    
    @keyframes slideAndBob553-769 {
        0% {
            transform: translate(-150vw, 0);
        }
        12.5% {
            transform: translate(-131.25vw, -3vh);
        }
        25% {
            transform: translate(-112.5vw, 0);
        }
        37.5% {
            transform: translate(-93.75vw, -3vh);
        }
        50% {
            transform: translate(-75vw, 0);
        }
        62.5% {
            transform: translate(-56.25vw, -3vh);
        }
        75% {
            transform: translate(-37.5vw, 0);
        }
        87.5% {
            transform: translate(-18.75vw, -3vh);
        }
        100% {
            transform: translate(0vw, 0);
        }
    }
    
    .project-title, .project-title-inactive{
        font-size: 6vw;
    }
    
    .vision-discipline-tag, .programming-discipline-tag, .electrical-discipline-tag, .mechanical-discipline-tag, .cad-discipline-tag{
        border-radius: 6px;
        margin: 2.1vh 0 0 2vw;
        font-size: 1.2rem;
    }
    
    .project-navbar{
        align-items: baseline;
    }

    .project-nav-active, .project-nav-inactive, .project-nav{
        font-size: 0.9rem;
    }
    
    .project-nav-active{
        color: #1100FF;
        font-size: 1rem;
    }
    
    .project-nav-inactive{
        color: #bebebe;
    }
    
    .technical-overview-wrapper{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: baseline;
    }

    .technical-overview-subwrapper{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    .technical-overview-subwrapper>p{
        margin: 0 0;
        padding: 0 0;
    }
    
    .on-the-surface, .in-depth, .technical-overview-subwrapper>p, .on-the-surface-inactive, .in-depth-inactive, .inactive, .on-the-surface-active, .in-depth-active{
        font-weight: 900;
        font-size: 0.7rem;
        color: 818181;
        padding: 0.1vw 0.1vw;
    }
    
    .on-the-surface-active{
        color: #55ACFE;
    }
    
    .on-the-surface-inactive, .in-depth-inactive, .inactive{
        color: #c9c9c9;
    }
    
    .in-depth-active{
        color: #370084;
    }
    
    .project-content-item{
        margin: 3vh 0;
    }
    
    .project-content-item-title{
        margin: 1vh 0;
        font-size: 1.5rem;
    }
    
    .project-content-item-paragraph{
        margin: 2vh 0;
    }
    
    .project-content-item-list{
        margin: 1vh 0;
    }
    
    .hidden-project{
        visibility: hidden;
        position: absolute;
    }   
    .title-wrapper{
        
    }
    
    .team488-wrapper {
    }
    
    #middle-text{
        font-size: 5vw;
    }
    
    .team488-wrapper #reefscape{
        width: 70vw;
    }
    
    .team488-wrapper h2 {
        font-size: 16vw;
        border-width: 2px;
    }
    #stroke{
        -webkit-text-stroke: 3px #1c4587;
    }
}

@media (min-width: 769px) and (max-width: 1440){
    .links{
        height: 6vh;
    }
}

@media (min-width: 769px) and (max-width:1023px){
    .button-enabled,.button-disabled{
        font-size: 2.5vw;
    }
    .wave-wrapper {
        width: 150vw;
    }
    
    .fg-wave-1, .fg-wave-2, .mfg-wave-1, .mfg-wave-2, .mbg-wave-1, .mbg-wave-2, .bg-wave-1, .bg-wave-2, .algae {
        width: 150vw; 
        animation: slideRight769-1023 10s linear infinite; 
    }
    .fg-wave-1, .fg-wave-2{
        animation: slideRight769-1023 10s linear infinite; 
    }
    
    .mfg-wave-1, .mfg-wave-2{
        animation: slideRight769-1023 15s linear infinite; 
    }
    
    .algae{
        animation: slideAndBob769-1023 15s linear infinite; 
    }
    
    .mbg-wave-1, .mbg-wave-2{
        animation: slideRight769-1023 20s linear infinite; 
    }
    
    .bg-wave-1, .bg-wave-2{
        animation: slideRight769-1023 30s linear infinite; 
    }
    
    @keyframes slideRight769-1023 {
        from {
            transform: translateX(-150vw);
        }
        to {
            transform: translateX(0);
        }
    }
    
    @keyframes slideAndBob769-1023 {
        0% {
            transform: translate(-150vw, 0);
        }
        12.5% {
            transform: translate(-131.25vw, -3vh);
        }
        25% {
            transform: translate(-112.5vw, 0);
        }
        37.5% {
            transform: translate(-93.75vw, -3vh);
        }
        50% {
            transform: translate(-75vw, 0);
        }
        62.5% {
            transform: translate(-56.25vw, -3vh);
        }
        75% {
            transform: translate(-37.5vw, 0);
        }
        87.5% {
            transform: translate(-18.75vw, -3vh);
        }
        100% {
            transform: translate(0vw, 0);
        }
    }
    .project-title, .project-title-inactive{
        font-size: 6vw;
    }
    
    .vision-discipline-tag, .programming-discipline-tag, .electrical-discipline-tag, .mechanical-discipline-tag, .cad-discipline-tag{
        border-radius: 7px;
        margin: 2.1vh 0 0 2vw;
        font-size: 3vw;
    }
    
    .project-navbar{
        align-items: baseline;
    }
    
    .project-nav, .project-nav-active, .project-nav-inactive{
        font-size: 2vw;
    }
    
    
    .project-nav-active{
        font-size: 2.2vw;
        color: #1100FF;
    }
    
    .project-nav-inactive{
        color: #bebebe;
    }
    
    .technical-overview-wrapper{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: baseline;
    }

    .technical-overview-subwrapper{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    .technical-overview-subwrapper>p{
        margin: 0 0;
        padding: 0 0;
    }
    
    .on-the-surface, .in-depth, .technical-overview-subwrapper>p, .on-the-surface-inactive, .in-depth-inactive, .inactive, .on-the-surface-active, .in-depth-active{
        font-weight: 900;
        font-size: 1.5vw;
        color: 818181;
        padding: 0.1vw 0.1vw;
    }
    
    .on-the-surface-active{
        color: #55ACFE;
    }
    
    .on-the-surface-inactive, .in-depth-inactive, .inactive{
        color: #c9c9c9;
    }
    
    .in-depth-active{
        color: #370084;
    }
    
    .project-content-item{
        margin: 3vh 0;
    }
    
    .project-content-item-title{
        margin: 1vh 0;
        font-size: 2.5vw;
    }
    
    .project-content-item-paragraph, .project-content-item-list, .project-content-image-subtitle{
        font-size: 2.2vw;
    }
    
    .project-content-item-paragraph{
        margin: 2vh 0;
    }
    
    .project-content-item-list{
        margin: 1vh 0;
    }
    
    .project-content-image-subtitle{
        font-weight: 900;
        font-style: italic;
        color: black;
    }

    .hidden-project{
        visibility: hidden;
        position: absolute;
    }   
    
    #middle-text{
    }
    
    .team488-wrapper #reefscape{
    }
    
    .team488-wrapper h2 {
    }
}

@media (min-width: 1023px) and (max-width:1600px){
    .under-construction{
        width: 40%;
        height: auto;
    }
    .button-enabled,.button-disabled{
        font-size: 2vw;
    }
    .project-title, .project-title-inactive{
        font-size: 5vw;
    }
    
    .vision-discipline-tag, .programming-discipline-tag, .electrical-discipline-tag, .mechanical-discipline-tag, .cad-discipline-tag{
        border-radius: 8px;
        margin: 2.1vh 0 0 2vw;
        font-size: 2.5vw;
    }
    
    .project-navbar{
        align-items: baseline;
    }
    
    .project-nav, .project-nav-active, .project-nav-inactive{
        font-size: 1.5vw;
    }
    
    .project-nav-active{
        font-size: 1.7vw;
        color: #1100FF;
    }
    
    .project-nav-inactive{
        color: #bebebe;
    }
    
    .technical-overview-wrapper{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: baseline;
    }

    .technical-overview-subwrapper{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    .technical-overview-subwrapper>p{
        margin: 0 0;
        padding: 0 0;
    }
    
    .on-the-surface, .in-depth, .technical-overview-subwrapper>p, .on-the-surface-inactive, .in-depth-inactive, .inactive, .on-the-surface-active, .in-depth-active{
        font-weight: 900;
        font-size: 1vw;
        color: 818181;
        padding: 0.1vw 0.1vw;
    }
    
    .on-the-surface-active{
        color: #55ACFE;
    }
    
    .on-the-surface-inactive, .in-depth-inactive, .inactive{
        color: #c9c9c9;
    }
    
    .in-depth-active{
        color: #370084;
    }
    
    .project-content-item{
        margin: 3vh 0;
    }
    
    .project-content-item-title{
        margin: 1vh 0;
        font-size: 2.5vw;
    }
    
    .project-content-item-paragraph, .project-content-item-list, .project-content-image-subtitle{
        font-size: 1vw;
    }
    
    .project-content-item-paragraph{
        margin: 2vh 0;
    }
    
    .project-content-item-list{
        margin: 1vh 0;
    }
    
    .project-content-image-subtitle{
        font-weight: 900;
        font-style: italic;
        color: rgb(97, 97, 97);
    }

    .hidden-project{
        visibility: hidden;
        position: absolute;
    }   
    #middle-text{
    }
    
    .team488-wrapper #reefscape{
        width: 42vw;
    }
    
    .team488-wrapper h2 {
        font-size: 8vw;
    }
    #hero{
        height: 80vh;
    }
    .wave-wrapper-wrapper{
        height: 80vh;
    }
}
@media (min-width: 1600px) and (max-width:2000px){
    .under-construction{
        width: 35%;
        height: auto;
    }
    .button-enabled,.button-disabled{
        font-size: 2vw;
    }
    .project-title, .project-title-inactive{
        font-size: 5vw;
    }
    
    .vision-discipline-tag, .programming-discipline-tag, .electrical-discipline-tag, .mechanical-discipline-tag, .cad-discipline-tag{
        border-radius: 7px;
        margin: 2.1vh 0 0 2vw;
        font-size: 2.1vw;
    }
    
    .project-navbar{
        align-items: baseline;
    }
    
    .project-nav, .project-nav-active, .project-nav-inactive{
        font-size: 1.5vw;
    }
    
    .project-nav-active{
        font-size: 2.2vw;
        color: #1100FF;
    }
    
    .project-nav-inactive{
        color: #bebebe;
    }
    
    .technical-overview-wrapper{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: baseline;
    }

    .technical-overview-subwrapper{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    .technical-overview-subwrapper>p{
        margin: 0 0;
        padding: 0 0;
    }
    
    .on-the-surface, .in-depth, .technical-overview-subwrapper>p, .on-the-surface-inactive, .in-depth-inactive, .inactive, .on-the-surface-active, .in-depth-active{
        font-weight: 900;
        font-size: 1.1vw;
        color: 818181;
        padding: 0.1vw 0.1vw;
    }
    
    .on-the-surface-active{
        color: #55ACFE;
    }
    
    .on-the-surface-inactive, .in-depth-inactive, .inactive{
        color: #c9c9c9;
    }
    
    .in-depth-active{
        color: #370084;
    }
    
    .project-content-item{
        margin: 3vh 0;
    }
    
    .project-content-item-title{
        margin: 1vh 0;
        font-size: 2.5vw;
    }
    
    .project-content-item-paragraph, .project-content-item-list, .project-content-image-subtitle{
        font-size: 1.2vw;
    }
    
    .project-content-item-paragraph{
        margin: 2vh 0;
    }
    
    .project-content-item-list{
        margin: 1vh 0;
    }
    
    .project-content-image-subtitle{
        font-weight: 900;
        font-style: italic;
        color: rgb(97, 97, 97);
    }

    .hidden-project{
        visibility: hidden;
        position: absolute;
    }   
    #middle-text{
    }
    
    .team488-wrapper #reefscape{
        width: 42vw;
    }
    
    .team488-wrapper h2 {
        font-size: 8vw;
    }
    #hero{
        height: 80vh;
    }
    .wave-wrapper-wrapper{
        height: 80vh;
    }
}

@media (min-width: 2000px) and (max-width:2500px){
    .under-construction{
        width: 30%;
        height: auto;
    }
    .button-enabled,.button-disabled{
        font-size: 1.5vw;
    }
    a{
        text-decoration: none;
        color: #3a2f6e;
        font-weight: 700;
    }
    .project-title, .project-title-inactive{
        font-size: 6rem;
    }
    
    .vision-discipline-tag, .programming-discipline-tag, .electrical-discipline-tag, .mechanical-discipline-tag, .cad-discipline-tag{
        border-radius: 15px;
        margin: 2.1vh 0 0 2vw;
        font-size: 1.6vw;
    }
    
    .project-navbar{
        align-items: baseline;
    }
    
    .project-nav, .project-nav-active, .project-nav-inactive{
        font-size: 1.5vw;
    }
    
    .project-nav-active{
        font-size: 1.6vw;
        color: #1100FF;
    }
    
    .project-nav-inactive{
        color: #bebebe;
    }
    
    .technical-overview-wrapper{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: baseline;
    }

    .technical-overview-subwrapper{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    .technical-overview-subwrapper>p{
        margin: 0 0;
        padding: 0 0;
    }
    
    .on-the-surface, .in-depth, .technical-overview-subwrapper>p, .on-the-surface-inactive, .in-depth-inactive, .inactive, .on-the-surface-active, .in-depth-active{
        font-weight: 900;
        font-size: 1vw;
        color: 818181;
        padding: 0.1vw 0.1vw;
    }
    
    .on-the-surface-active{
        color: #55ACFE;
    }
    
    .on-the-surface-inactive, .in-depth-inactive, .inactive{
        color: #c9c9c9;
    }
    
    .in-depth-active{
        color: #370084;
    }
    
    .project-content-item{
        margin: 3vh 0;
    }
    
    .project-content-item-title{
        margin: 1vh 0;
        font-size: 2.5vw;
    }
    
    .project-content-item-paragraph, .project-content-item-list, .project-content-image-subtitle{
        font-size: 1.3vw;
    }
    
    .project-content-item-paragraph{
        margin: 2vh 0;
    }
    
    .project-content-item-list{
        margin: 1vh 0;
    }
    
    .project-content-image-subtitle{
        font-weight: 900;
        font-style: italic;
        color: rgb(97, 97, 97);
    }

    .hidden-project{
        visibility: hidden;
        position: absolute;
    }   
    #middle-text{
    }
    
    .team488-wrapper #reefscape{
        width: 38vw;
    }
    
    .team488-wrapper h2 {
        font-size: 8vw;
    }
}
@media (min-width: 2500px){
    .under-construction{
        width: 30%;
        height: auto;
    }
    .project-title, .project-title-inactive{
        font-size: 7rem;
    }
    
    .vision-discipline-tag, .programming-discipline-tag, .electrical-discipline-tag, .mechanical-discipline-tag, .cad-discipline-tag{
        border-radius: 15px;
        margin: 2.1vh 0 0 2vw;
        font-size: 1.6vw;
    }
    
    .project-navbar{
        align-items: baseline;
    }
    
    .project-nav, .project-nav-active, .project-nav-inactive{
        font-size: 1.5vw;
    }
    
    .project-nav-active{
        font-size: 1.6vw;
        color: #1100FF;
    }
    
    .project-nav-inactive{
        color: #bebebe;
    }
    
    .technical-overview-wrapper{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: baseline;
    }

    .technical-overview-subwrapper{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    .technical-overview-subwrapper>p{
        margin: 0 0;
        padding: 0 0;
    }
    
    .on-the-surface, .in-depth, .technical-overview-subwrapper>p, .on-the-surface-inactive, .in-depth-inactive, .inactive, .on-the-surface-active, .in-depth-active{
        font-weight: 900;
        font-size: 1.8rem;
        color: 818181;
        padding: 0.1vw 0.1vw;
    }
    
    .on-the-surface-active{
        color: #55ACFE;
    }
    
    .on-the-surface-inactive, .in-depth-inactive, .inactive{
        color: #c9c9c9;
    }
    
    .in-depth-active{
        color: #370084;
    }
    
    .project-content-item{
        margin: 3vh 0;
    }
    
    .project-content-item-title{
        margin: 1vh 0;
        font-size: 2vw;
    }
    
    .project-content-item-paragraph, .project-content-item-list, .project-content-image-subtitle{
        font-size: 1.1vw;
    }
    
    .project-content-item-paragraph{
        margin: 2vh 0;
    }
    
    .project-content-item-list{
        margin: 1vh 0;
    }
    
    .project-content-image-subtitle{
        font-weight: 900;
        font-style: italic;
        color: black;
    }

    .hidden-project{
        visibility: hidden;
        position: absolute;
    }   
}