:root {
    --border-letter: 1px;
    --neg-border-letter: -1px;
}

@font-face {
    font-family: Akzidenz;
    src: url(/font/AkzidenzGroteskBQ-BoldExt.otf);
}

html,body,main {
    overflow: hidden;
}

main {
    height: 100vh;
    width: 100vw;
    position: relative;
}

html {
    font-size: 24px;
}

@media only screen and (min-width: 600px) {
    html {
        font-size: 26px;
    }
}

@media only screen and (min-width: 900px) {
    html {
        font-size: 28px;
    }
}

@media only screen and (min-width: 1200px) {
    html {
        font-size: 28px;
    }
}

body,
html {
    font-family: "Akzidenz";
    background-color: black;
    color: #31F850;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

@keyframes line1 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-59rem);
    }
}

@keyframes line2 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(47.5rem);
    }
}

a {
    text-decoration: none;
    color: #31F850;
}

.main {
    height: 100vh;
    width: 100vw;
}
.container {
    width: 100%;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    transform: translateY(-100%);
}

.empty {
    color: black;
    /*text-shadow: var(--neg-border-letter) 0 #31F850, 0 var(--border-letter) #31F850, var(--border-letter) 0 #31F850, 0 var(--neg-border-letter) #31F850;*/
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #31F850;
}

.line1,
.line2 {
    overflow: hidden;
    white-space: nowrap;
    font-size: 2.4rem;
    line-height: 2.6rem;
}

.line1 {
    -webkit-animation: line1 20s linear infinite forwards;
    animation: line1 20s linear infinite forwards;
    left: 0;
    position: absolute;
}

.line2 {
    -webkit-animation: line2 20s linear infinite backwards;
    animation: line2 21s linear infinite backwards;
    right: 0;
    position: absolute;
    top: 2.2rem;
}

@media only screen and (min-width: 600px) {
    .line2 {
        right: -2rem;
    }
}

@media only screen and (min-width: 900px) {
    .line2 {}
}

@media only screen and (min-width: 1200px) {
    .line2 {}
}

.content {
    text-align: center;
    position: relative;
    top: 220px;
    font-size: 0.7rem;
}

.footer {
    text-align: center;
    font-size: 0.8rem;
    position: fixed;
    bottom: 33px;
    width: 100%;
    letter-spacing: 0.05rem;
    line-height: 1rem;
    height: 30px;
}

.privacy {
    font-size: 0.4rem;
    color: #31F850;
}

.mailingList a,
.privacy a {
    text-decoration: none;
    color: #31F850;
}

.mailingList .empty {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #31F850;
}

.date {
    font-size: 0.4rem;
    position: relative;
    top: -8px;
}

.comma {
    position: relative;
    top: -35px;
}

@media (max-height: 800px) {
    .content {
        top: 200px;
    }
}

@media (max-height: 600px) {
    .content {
        top: 160px;
    }
}

@media (max-height: 500px) {
    .content {
        top: 150px;
    }
}