body, html {
    width: 100vw;
    height: 100vh;
    margin: 0;
}

* {
    user-select: none;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: white;
    isolation: isolate;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.background {
    background-image: linear-gradient(167deg, #ffb90d 0%, #cc0045 50%, #a832ae 100%);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 0;
    position: absolute;
}

.intro {
    text-align: center;
    padding: 200px 10px;
    z-index: 1;
    position: relative;
    transition: 0.3s padding ease;
}


.intro h1 {
    font-size: 10em;
    font-weight: bold;
    margin: 0;
}

.intro h2 {
    margin: 0;
    font-size: 3.3em;
    font-weight: normal;
}

.swirls {
    opacity: 0.8;
    isolation: unset;
    mix-blend-mode: color-burn;
    position: absolute;
    width: 1697px;
    right: calc( 50vw - 962px);
    height: 815px;
}

.swirls-ani {
    opacity: 0.8;
    isolation: unset;
    mix-blend-mode: color-burn;
    position: absolute;
    width: 185%;
    top: -120%;
    left: -40%;
    transform: rotate(-25deg);
    animation: spin 10s linear infinite;
}

.st0{
    fill:none;
    stroke:rgba(17, 18, 24, 0.3);
    stroke-width:250;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
}


.foreground {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    top: calc(1200px - 50vw);
}

.blob-1 {
    position: absolute;
    height: 100%;
    bottom: -30%;
    left: -40%;
}

.blob-2 {
    position: absolute;
    height: 110%;
    bottom: -60%;
    right: -50%;
}

.st1 {
    fill: white;
}

.in-3d {
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    margin: auto;
    perspective: 300px;
}

.blob {
    filter: drop-shadow(0px 20px 30px rgba(0,0,0,0.4));
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

.triangle {
    width: 0;
    height: 0;
    border-left: 2.2em solid transparent;
    border-right: 2.2em solid transparent;
    border-bottom: 4em solid white;
    border-top: 0px transparent;
}

.animation {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3em 0;
    filter: url('#fancy-goo');
}

.circle {
    width: 9em;
    height: 9em;
    background: white;
    border-radius: 1000px;
}
.square {
    width: 4em;
    height: 4em;
    background: white;
}

.ani1 {
    transform: rotate(-90deg);
}
.ani5 {
    transform: rotate(90deg);
}

.animation div {
    margin: 0 -80px;
}

.ani3 {
    width: 200px;
    z-index: 3;
    margin: 0 -29px !important;
}

nav {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 3;
    height: 100%;
}

nav .seal {
    -webkit-filter: url('#fancy-goo') drop-shadow(0px 20px 20px rgba(0,0,0,0.2));
    filter: drop-shadow(0px 20px 20px rgba(0,0,0,0.2));
    width: 100%;
    text-align: center;
    padding-top: 450px;
    position: relative;
    z-index: 1;
}

.seal img {
    height: 300px;
    z-index: 1;
    position: absolute;
    cursor: pointer;
    left: 0;
    top: 0;
    transition: 1s ease all;
}

.seal .circle {
    position: absolute;
    top: 56px;
    left: 85px;
    margin: auto;
    z-index: 0;
    transition: transform 0.5s ease;
    transform: scale(1);
}

.seal-inner {
    height: 300px;
    z-index: 1;
    position: relative;
    width: 300px;
    margin: auto;
}

.seal-inner:hover .circle {
    transform: scale(1.3);
}

.seal img.top {
    top: -450px;
}

nav .items {
    position: absolute;
    width: 900px;
    max-width: 100%;
    z-index: 4;
    color: black;
    font-size: 3em;
    font-weight: bold;
    text-align: center;
    padding-top: 350px;
}

.seal.clicked .circle {
    transition: 1s all ease;
    transform: scale(30);
}

.seal img.exiting {
    transition: 0.4s ease all;
}

.seal.clicked img {
    cursor: default;
    top: -450px;
}

.exit {
    cursor: pointer;
}


.menu-item {
    display: block;
    margin: 1em 0;
    transition: 0.3s ease all;
    position: relative;
    top: 0;
    color: black;
    text-decoration: none;
}

.menu-item.up {
    margin-top: 0;
/*    opacity: 0.5;
    pointer-events: none;
    text-decoration: line-through;*/
}

.menu-item.up:hover {
    top: -10px;
}

.menu-item.down:hover {
    top: 10px;
}

img.glow {
    z-index: 0;
    position: absolute;
    width: 300px;
    top: 450px;
    transform: scale(1);
    filter: drop-shadow(0px 0px 5px white);
    opacity: 0.5;
    transition: 1s ease all;
    animation: pulse 1s ease infinite;
    animation-direction: alternate;
}

@keyframes pulse {
  0% {
    filter: drop-shadow(0px 0px 0px white);
  }
  100% {
    filter: drop-shadow(0px 0px 15px white);
  }
}


/* Compact down when close to mobile*/
@media screen and (max-width: 600px) {
    .intro {
        padding: 100px 10px;
    }

    .swirls {
        top: -100px;
    }

    .seal {
        top: -100px;
    }
    
    img.glow {
        top: 350px;
    }

    .seal.clicked img {
        top: -350px;
    }

    .items {
        padding-top: 250px !important;
    }
}