@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/vanilla-dreamers');
@import url('https://fonts.cdnfonts.com/css/monday-feelings');

:root {
    --background: #eee;
    --speed: 0.85;
	--primary: #fff;
	--size: 2;
    --ease: cubic-bezier(0.175, 0.885, 0.32, 1.125);
}

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: 'Poppins', sans-serif; */
}

/* --------------------------------------------------------------------- */
/* Menu Button */

.menu{
    position: fixed;
    display: block;
    z-index: 999;
    top: var(--menu-pos-top, 3vh);
    right: var(--menu-pos-right, 3vh);
}

/** menu icon **/
.toggle { 
    position: absolute;
    height: 7vh;
    width: 7vh;
    min-height: 50px;
    min-width: 50px;
    top: 22%;
    right: 20%;
    scale: 120%;
}

.toggle:hover { 
    cursor: pointer;
}

.toggle span {
    display: block;
    position: absolute;
    height: 6.5%;
    width: 80%;
    left: 10%;
    background: black;
    border-radius: 9px;
    opacity: 1;
    transform: rotate(0deg);
    transition: all 0.4s;
}

.toggle span:nth-child(1) {
    top: 20%;
}
  
.toggle span:nth-child(2) {
    top: 45%;
    width: 60%;
}
  
.toggle span:nth-child(3) {
    top: 70%;
}

.toggle.is-active span {
    background: black;
}
  
#menu-icon.is-active span:nth-child(1) {
    top: 45%;
    transform: rotate(135deg);
}
  
#menu-icon.is-active span:nth-child(2) {
    opacity: 0;
    right: 60px;
}
  
#menu-icon.is-active span:nth-child(3) {
    top: 45%;
    transform: rotate(-135deg);
}



    /** menu links **/
.nav{
    z-index: 998;
    list-style-type: none !important;
    display: block;
    background-color: transparent;
    position: absolute;
}

.menuSection {
    position: absolute;
    transition: all calc(var(--speed, 1) * 1s) calc(var(--delay, 0) * 1s) var(--ease);
    filter: drop-shadow(0px 0px 10px #708b94) url("#goo");
    animation: morph 8s ease-in-out infinite;
    border-radius: 40% 30% 70% 60% / 30% 70% 40% 60%;
    background-color: #a9d2df;
    list-style-type: none;
    z-index: 9;
    width: fit-content !important;
    height: fit-content !important;
    opacity: 0;
}

.menuShadow {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all calc(var(--speed, 1) * 1s) calc(var(--delay, 0) * 1s) var(--ease);
    animation: morph 8s ease-in-out infinite;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

.menuContainer {
    list-style-type: none;
}

.menuHeader{
    font-family: 'Vanilla Dreamers', sans-serif;
    font-size: 2.5em;
    white-space: nowrap;
}

.menuHeader a{
    transition: all 0.5s ease;
    text-decoration: none;
    color: black;
}

.menuLink a:hover, .menuHeader a:hover{
    color: red;
    padding-right: 8px;
}

.menuLink a{
    font-family: 'Monday Feelings', serif;
    font-size: 1.5em;
    transition: all 0.5s ease;
    text-decoration: none;
    color: black;
}


@keyframes morph {
    0% {border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;} 
    50% {border-radius:  30% 60% 70% 40% / 50% 60% 30% 60%;}
    100% {border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;} 
}


.container.is-active, .footer.is-active{
  filter: blur(10px);
}


.menuHome div, .menuTeam div, .menuProject div, .menuParts div, .menuhp div, .menuAwards div, .menuSafety div{
    width: fit-content;
    height: fit-content;
    position: relative;
    white-space: nowrap;
    text-align: left;
}

.menuHome div, .menuSafety div, .menuhp div{
    padding: 25px 25px;
}

.menuTeam div {
    top: -20px;
    padding: 15px 25px;
    
}
.menuTeam section {
    top: -20px;
    line-height: 5px;
    
}

.menuProject div {
    padding: 15px 50px;
    top: -25px;

}
.menuProject section {
    top: -30px;
    line-height: 5px;
}
.menuProject div ul{
    display: grid !important;
    grid-template-columns: 60% 40%;
    text-align: left;
}



.menuAwards section {
    top: -20px;
    line-height: 5px;
}
.menuAwards div{
    top: -20px;
    padding: 20px;
}

.menuParts section {
    top: -20px;
    line-height: 5px;
}
.menuParts div {
    top: -20px;
    padding: 20px 20px;
}

.menuTeam section, .menuProject section, .menuParts section, .menuAwards section{
    /* border: 1px solid red; */
    width: fit-content;
    height: fit-content;
    padding: 25px;
    position: relative;
    border-radius: 50%;

    filter: drop-shadow(0px -1px 2px #708b94) url("#goo");
    animation: morph 8s ease-in-out infinite;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    border-radius: 50px;
    background-color: grey;
    z-index:999;
}


/* hide links */

.menuHome {
    right: -70px;
    top: -20px;
    scale: 5%;
}

.menuTeam {
    right: -110px;
    top: -80px;
    scale: 5%;
}

.menuProject {
    right: -150px;
    top: -100px;
    scale: 5%;
}

.menuParts {
    right: -100px;
    top: -70px;
    scale: 5%;
}

.menuSafety {
    right: -70px;
    top: -20px;
    scale: 5%;
}

.menuhp {
    right: -180px;
    top: -80px;
    scale: 5%;
}

.menuAwards {
    right: -180px;
    top: -80px;
    scale: 5%;
}

/* display on screen */

.nav.is-active [class~="menuHome"]{
    /* transition: 0.5s; */
    scale: 120%;
    margin-top: 13vh;
    margin-right: 80vw;
    --delay: 0.1;
    transform: rotate(-10deg);
    opacity: 1;
    transition-delay: 0.05s;
}

.nav.is-active [class~="menuTeam"]{
    scale: 110%;
    margin-top: 20vh;
    margin-right: 53vw;
    --delay: 0.1;
    transform: rotate(2deg);
    opacity: 1;
    transition-delay: 0.2s;
}

.nav.is-active [class~="menuProject"]{
    scale: 100%;
    margin-top: 25vh;
    margin-right: 19vw;
    --delay: 0.1;
    transform: rotate(0deg);
    opacity: 1;
    transition-delay: 0.25s;
}

.nav.is-active [class~="menuhp"]{
    scale: 100%;
    margin-top: 65vh;
    margin-right: 74vw;
    --delay: 0.1;
    transform: rotate(-4deg);
    opacity: 1;
    transition-delay: 0.25s;
}

.nav.is-active [class~="menuSafety"] {
    scale: 120%;
    margin-top: 51vh;
    margin-right: 47vw;
    --delay: 0.1;
    transform: rotate(-1deg);
    opacity: 1;
    transition-delay: 0.1s;
}

.nav.is-active [class~="menuAwards"] {
    scale: 110%;
    margin-top: 77vh;
    margin-right: 38vw;
    --delay: 0.1;
    transform: rotate(2deg);
    opacity: 1;
    transition-delay: 0.15s;
}

.nav.is-active [class~="menuParts"]{
    scale: 110%;
    margin-top: 66vh;
    margin-right: 10vw;
    --delay: 0.1;
    transform: rotate(5deg);
    opacity: 1;
    transition-delay: 0.2s;
}

@media (min-width: 1000px) {
    .menu__item {
      font-size: 3rem;
    }
}



@media(max-width: 1000px){
    .nav.is-active [class~="menuHome"],
    .nav.is-active [class~="menuTeam"],
    .nav.is-active [class~="menuProject"],
    .nav.is-active [class~="menuhp"],
    .nav.is-active [class~="menuSafety"],
    .nav.is-active [class~="menuAwards"],
    .nav.is-active [class~="menuParts"]{
        scale: 80%;
    }
    .nav.is-active [class~="menuHome"]{
        margin-right: 80vw;
        margin-top: 5vh;
    }
    .nav.is-active [class~="menuTeam"]{
        margin-right: 30vw;
        margin-top: 15vh;
    }
    .nav.is-active [class~="menuProject"]{
        margin-right: 60vw;
        margin-top: 37vh;   
    }
    .nav.is-active [class~="menuhp"]{
        margin-top:65vh;
    }
    .nav.is-active [class~="menuSafety"]{
        margin-top: 35vh;
        margin-right: 15vw;
    }
    .nav.is-active [class~="menuAwards"]{
        margin-top: 85vh;
        margin-right: 50vw;
    }
    .nav.is-active [class~="menuParts"]{
        margin-top: 60vh;
        margin-right: 20vw;
    }
}

@media(max-width: 500px){
    .nav.is-active [class~="menuHome"],
    .nav.is-active [class~="menuTeam"],
    .nav.is-active [class~="menuProject"],
    .nav.is-active [class~="menuhp"],
    .nav.is-active [class~="menuSafety"],
    .nav.is-active [class~="menuAwards"],
    .nav.is-active [class~="menuParts"]{
        scale: 75%;
    }
    .nav.is-active [class~="menuHome"]{
        margin-right: 75vw;
        margin-top: 5vh;
    }
    .nav.is-active [class~="menuTeam"]{
        margin-right: 30vw;
        margin-top: 15vh;
    }
    .nav.is-active [class~="menuProject"]{
        margin-right: 60vw;
        margin-top: 37vh;   
    }
    .nav.is-active [class~="menuhp"]{
        margin-top: 65vh;
        margin-right: 55vw;
    }
    .nav.is-active [class~="menuSafety"]{
        margin-top: 35vh;
        margin-right: 15vw;
    }
    .nav.is-active [class~="menuAwards"]{
        margin-top: 85vh;
        margin-right: 50vw;
    }
    .nav.is-active [class~="menuParts"]{
        margin-top: 55vh;
        margin-right: 15vw;
    }
}
  

@media(max-height: 435px){
    .nav.is-active [class~="menuHome"],
    .nav.is-active [class~="menuTeam"],
    .nav.is-active [class~="menuProject"],
    .nav.is-active [class~="menuhp"],
    .nav.is-active [class~="menuSafety"],
    .nav.is-active [class~="menuAwards"],
    .nav.is-active [class~="menuParts"]{
        scale: 80%;
    }
    .nav.is-active [class~="menuHome"]{
        margin-top: 13vh;
        margin-right: 90vw;
    }
    
    .nav.is-active [class~="menuTeam"]{
        margin-top: 65vh;
        margin-right: 80vw;
    }
    
    .nav.is-active [class~="menuProject"]{
        margin-top: 40vh;
        margin-right: 65vw;
    }
    
    .nav.is-active [class~="menuhp"]{
        margin-top: 65vh;
        margin-right: 43vw;
    }
    
    .nav.is-active [class~="menuSafety"] {
        margin-top: 10vh;
        margin-right: 30vw;
    }
    
    .nav.is-active [class~="menuAwards"] {
        margin-top: 45vh;
        margin-right: 20vw;
    }
    
    .nav.is-active [class~="menuParts"]{
        margin-top: 60vh;
        margin-right: 25vw;
    }
}



@media (max-aspect-ratio: 1920 / 1080) {
    .banner { 
        position: relative;
        height: 70vh;
        width: var(--modified-banner-width);
    }

    .banner img {
        height: 100%;
        width: auto;
        position: absolute;
        left: calc(0.5 * (var(--viewport-width) - var(--modified-banner-width))); /* Centres Horizontally */
    }
}

@media (min-aspect-ratio: 1920 / 1080) {
    .banner { 
        position: relative;
        width: 100%;
        height: calc(var(--viewport-width) * 756 / 1920);
    }

    .banner img { 
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
    }
}