body {
    background-color: black;
    color: white;
    font-family: "San Francisco";
    margin: 0;
    padding: 0;
    cursor: none;
    }
h1 {
    font-size: 200px;
    text-align: center;
    text-shadow: 0px 0px 64px #008080;
}
section {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 100vh;
    perspective: 1000px !important;
}
svg {
    filter: drop-shadow(0px 3px 44px rgb(255, 255, 255));
}
#content-wrapper {
    position: absolute;
}
#bg {
    position: fixed;
    top: 0; left: 0;
}
#h1 {
    z-index: 500;
    position: relative;
    align-items: center;
}
/*
letter 1 is 714.5228881835938
letter 2 is 682.3062744140625
letter 3 is 431.2262268066406
letter 4 is 431.2261962890625
letter 5 is 701.8886108398438
letter 6 is 321.2958679199219*/
@media only screen and (max-width: 850px) {
    #hello {
        scale: 0.8;
    }
}
@media only screen and (max-width: 600px) {
    #hello {
        scale: 0.7;
    }
    .floor-shadow::before {
        scale: 0.7;
    }
}
#hello {
    animation: fill 3s ease forwards 2.2s;
}
#hello path:nth-child(1) {
    stroke-dasharray: 714.5228881835938;  
    stroke-dashoffset: 714.5228881835938;
    animation: line-anim 1.1s ease forwards;
    animation-delay: 1.3s;
}
#hello path:nth-child(2) {
    stroke-dasharray: 682.3062744140625;
    stroke-dashoffset: 682.3062744140625;
    animation: line-anim 1.1s ease forwards;
    animation-delay: 1.5s;
}
#hello path:nth-child(3) {
    stroke-dasharray: 431.2262268066406;
    stroke-dashoffset: 431.2262268066406;
    animation: line-anim 1.1s ease forwards;
    animation-delay: 1.7s;
}
#hello path:nth-child(4) {
    stroke-dasharray: 431.2262268066406;
    stroke-dashoffset: 431.2262268066406;
    animation: line-anim 1.1s ease forwards;
    animation-delay: 1.9s;}
#hello path:nth-child(5) {
    stroke-dasharray: 701.8886108398438;
    stroke-dashoffset: 701.8886108398438;
    animation: line-anim 1.1s ease forwards;
    animation-delay: 2.1s;
}
#hello path:nth-child(6) {
    stroke-dasharray: 321.2958679199219;
    stroke-dashoffset: 321.2958679199219;
    animation: line-anim 1.1s ease forwards;
    animation-delay: 2.3s;
}
@keyframes line-anim {
    to{
        stroke-dashoffset: 0;
    }
}
@keyframes fill {
    from{
        fill:transparent;
        filter: drop-shadow(0px -200px 84px #300000);
    }
/*     23% {
        fill: #600000;
        filter: drop-shadow(0px -200px 84px #800000);
    }
    60% {
        fill: #706100;
        filter: drop-shadow(0px 200px 84px #807100);
    }
    85% {
        fill: #003030;
    } */
    to{
        fill: white;
        filter: drop-shadow(0px 3px 44px #00a0a0);
    }
}
@keyframes underliner {
    from {
        text-decoration: none;
        text-decoration-color: #000000;
    }
    to {
        text-decoration: underline;
        text-decoration-color: #ffffff;
        background-color: #2e2e2e;
    }
}
/* @font-face {
    font-family: "San Francisco";
    font-weight: 400;
    src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
} */
:root {
    --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
h1, h2, h3, p, b {
    font-family: var(--system-ui);
    font-weight: 550;
}
b {
    font-weight: normal;
}

.cursor {
    z-index: 2;
    width: 20px;
    height: 20px;
    border: 1px solid white;
    border-radius: 50%;
    position: fixed;
    transition-duration: 0ms;
    transition-timing-function: ease-out;
    transform: translate(-50%,-50%);
    animation: cursorAnim .5s infinite alternate;
    pointer-events: none;
}

.cursor::after {
    z-index: 2;
    content: "";
    width: 20px;
    height: 20px;
    position: fixed;
    border: 8px solid gray;
    border-radius: 50%;
    opacity: .5;
    top: -8px;
    left: -8px;
    pointer-events: none;
    animation: cursorAnim2 .5s infinite alternate;
}

@keyframes cursorAnim {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(.7);
    }
}

@keyframes cursorAnim2 {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(.4);
    }
}

@keyframes cursorAnim3 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(3);
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}
.floor-shadow {
    background: none;
    border: none;
    padding: 0;
    pointer-events: none;
}
.floor-shadow::before {
    content: "";
    position: absolute;
    background: #00a0a0;
    top: 90%;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 65%;
    transform: perspective(50vh) rotateX(65deg) translateZ(4vh);
    filter: blur(90px) opacity(0.6);
}
.expand {
    animation: cursorAnim3 .5s forwards;
    border: 1px solid red;
}

.navbar-el {
    width: 100vw;
    height: 7.5vh;
    position: fixed;
    background-color: #000000;
    z-index: 10000;
    text-align: center;
}
.navbar {
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    display: grid;
    grid-template-columns: repeat(5, 9vw);
    place-items: center;
    justify-content: center;
    border: none;
}
.navbar-item {
    height: 7.5vh;
    width: 9vw;
    background-color: #000000;
    border: none;
}

a.navbar-item-link {
    font-size: 1.1vw;
    text-align: center;
    text-decoration: none;
    color: rgb(220, 220, 220);
}
.navbar-item:hover {
    text-shadow: 0px 3px 20px #ffffff;
    animation: underliner 0.5s ease forwards;
    cursor: none;
}
.logo {
    margin: auto;
    color: white;
}
.arrow {
    border: solid rgb(255, 255, 255);
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 26px;
    margin-top: -10px;
}
.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    padding-left: 24vw; padding-right: 24vw;
    place-items: center;
    font-size: 3.5vw;
}
#visitStore{
    display: grid;
    place-items: center;
    align-content: center;
}

/*Animation 1*/
.hidden {
    scale: 1.6;
    opacity: 0;
    filter: blur(28px);
    transform: translate(0px,-244px) rotate(0deg);
    transition: all 1s;
}

.shown {
    scale: 1;
    opacity: 1;
    filter: blur(0);
    transform: translate(0px,40px) rotate(0deg);
}
/*Animation 2*/
.hidden1 {
    opacity: 0;
    scale: 1;
    filter: blur(28px);
    transform: translate(0px,40px) rotate(0deg);
    transition: all 0.85s ease-in-out;
}
.hidden1:nth-child(2) {
    transition-delay: 100ms;
    opacity: 0;
    filter: blur(12px);
    transform: rotate(720deg) translate(0px,40px);
}
.hidden1:nth-child(3) {
    transition-delay: 200ms;
}
.hidden1:nth-child(4) {
    transition-delay: 300ms;
    opacity: 0;
    filter: blur(12px);
    transform: rotate(720deg) translate(0px,-40px);
}
.hidden1:nth-child(5) {
    transition-delay: 400ms;
}
.shown1 {
    transition-delay: 0ms;
    text-shadow: 0px 0px 24px #008080;
    opacity: 1;
    filter: blur(0);
    transform: translate(0px,0px) rotate(0deg);
}
.shown1:hover {
    scale: 1.2;
}
.shown1:nth-child(2) {
    transition-delay: 0ms;
    opacity: 1;
    filter: blur(0);
    transform: rotate(0deg);
}
.shown1:nth-child(4) {
    transition-delay: 0ms;
    opacity: 1;
    filter: blur(0);
    transform: rotate(0deg);
}
.shown1:nth-child(5) {
    transition-delay: 0ms;
    opacity: 1;
    filter: blur(0);
    transform: rotate(0deg);
}

::-webkit-scrollbar {
    display: none;
}
html {
    scroll-behavior: smooth;
}
@media only screen and (max-width: 600px) {
    #hello {
        scale: 0.3;
    }
    .grid {
        font-size: 4vw;
    }
    .navbar-el {
        width: 100vw;
        height: 7.5vh;
        position: fixed;
        background-color: #000000;
        z-index: 50;
        text-align: center;
    }
    .navbar {
        width: 100vw;
        list-style: none;
        padding: 0;
        margin: 0;
        align-items: center;
        display: grid;
        grid-template-columns: repeat(5, 20vw);
        place-items: center;
        justify-content: center;
        border: none;
    }
    .navbar-item {
        height: 7.5vh;
        min-width: 20vw;
        background-color: #000000;
        border: none;
    }
    a.navbar-item-link {
        font-size: 2.3vw;
        text-align: center;
        text-decoration: none;
        color: rgb(220, 220, 220);
    }
    .navbar-item:hover {
        text-shadow: 0px 3px 20px #ffffff;
        cursor: none;
    }
}