:focus {
    outline: none;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box !important;
}

* {
    box-sizing: border-box;
    scrollbar-color: transparent transparent; /* thumb and track color */
    scrollbar-width: 0px;
}

*::-webkit-scrollbar {
    width: 0;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: transparent;
    border: none;
}

* {
    -ms-overflow-style: none;
}
html {
    font-size: calc(1em + 1vw);
}

html, body {
    height: 100%;
    bottom: 3%;
}

body {
    background: linear-gradient(-45deg, #49faf5, #31846C, #198FC2, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 21s ease infinite;
    display: table;
    width: 100%;
    height: 100%;
    color: #000;
    line-height: 1.6;
    position: relative;
    font-family: sans-serif;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 {
    font-family: 'Noto Serif', serif;
    font-size: 2em;
    font-weight: 500;
    font-style: oblique;
    line-height: 58px;
    margin: 0 0 58px;
    position: absolute;
    top: 15vh;
}

.thickness {
    color: #f4f1db;
    text-shadow: 0px 1px 0 #858279, 0px 2px 0 #59564e, 0px 3px 0 #322f28, 0px 0px 0px hsla(0,0%,0%,0), -4px 4px 6px black;
    padding-left: 1rem;
    padding-right: 1rem;
}

.spinner {
    background: url("../../static/icons/spinning-hex-logo.webp");
}

.lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    margin: auto;
    width: 90vw;
}

.lines .line {
    position: absolute;
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.lines .line::after {
    content: "";
    display: block;
    position: absolute;
    height: 15vh;
    width: 100%;
    top: -50%;
    left: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(75%, #ffffff), to(#ffffff));
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
    -webkit-animation: run 7s 0s infinite;
    animation: run 7s 0s infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
    animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}

.lines .line:nth-child(1) {
    margin-left: -25%;
}

.lines .line:nth-child(1)::after {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.lines .line:nth-child(3) {
    margin-left: 25%;
}

.lines .line:nth-child(3)::after {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}

@-webkit-keyframes run {
    0% {
        top: -50%;
    }
    100% {
        top: 110%;
    }
}

@keyframes run {
    0% {
        top: -50%;
    }
    100% {
        top: 110%;
    }
}


@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}