body {
    margin: 0;
}

.header {
    font-family: "Kanit", arial;
    place-items: center;
    background: #111;
    font-weight: 600;
    font-size: 1.5em;
    position: fixed;
    color: white;
    padding: 1em 0;
    display: grid;
    width: 100vw;
}

.header > h1 {
    font-size: 1em;
    margin: 0;
}

.header > h1 > span {
    color: #62d1dd;
}

.hero {
    background: url('/public/assets/logo.jpg') black no-repeat;
    background-position: center;
    height: 100vh;
    width: 100vw;
}

article {
    background: #111;
    padding: 5em 0;
}

.comingSoon {
    transition: opacity 2s, transform 1s ease-out;
    font-family: "Kanit", arial;
    transform: translateX(-5%);
    text-align-last: center;
    transition-delay: 0;
    color: transparent;
    position: relative;
    text-align: center;
    font-size: 5em;
    opacity: 0;

    animation: glitch 2s linear infinite;
}

.comingSoon::before {
    clip-path: polygon(0% 100%, 100% 100%, 100% 50%, 0% 50%);
    transform: translateX(-50%);
    content: "COMING SOON!";
    position: absolute;
    color: white;
    left: 50%;
    
    animation: twitch2 2s linear infinite;
}

.comingSoon::after {
    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
    content: "COMING SOON!";
    position: relative;
    color: white;
    
    animation: twitch 2s linear infinite;
}

@keyframes glitch {
    0%{ text-shadow: 0 -.05em red, 0 .05em blue; }
    5% { text-shadow: 0 .05em red, 0 .05em blue; }
    6%{ text-shadow: 0 .05em blue; }
    19%{ text-shadow: 0 .05em blue; }
    20%{ text-shadow: 0 -.05em red; }
    25%{ text-shadow: 0 -.05em red; }
    26%{ text-shadow: initial }
    50%{ text-shadow: initial }
    51%{ text-shadow: 0 -.05em red; }
    56%{ text-shadow: 0 -.05em red; }
    57%{ text-shadow: initial }
    80%{ text-shadow: initial }
    81%{ text-shadow: 0 -.05em red, 0 .05em blue; }
    86%{ text-shadow: 0 -.05em red, 0 .05em blue; }
    87%{ text-shadow: initial }
    100%{ text-shadow: initial }
}

@keyframes twitch {
    5.9% { margin-left: 0; }
    6%{ margin-left: .1em; }
    15%{ margin-left: .1em; }
    15.9%{ margin-left: 0; }

    42.9% { margin-left: 0; }
    43%{ margin-left: -.1em; }
    51%{ margin-left: -.1em; }
    51.9%{ margin-left: 0; }
}

@keyframes twitch2 {
    40.9% { margin-left: 0; }
    41%{ margin-left: -.1em; }
    49%{ margin-left: -.1em; }
    49.9%{ margin-left: 0; }
}


@media only screen and (max-width: 1100px) {
    .comingSoon { font-size: 7vw }
    .hero { background-size: 100% }
}

@media only screen and (max-width: 855px) {
    
}