body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
.banner {
    position: relative;
    margin: 0;
    padding: 0;
    color: var(--light-text-color);
    padding: 7% 0 7% 0;
    transition: all 0.5s ease;
    box-shadow: 0 0 0.2em 0 var(--dark-banner-color);
    background-color: rgba(var(--light-banner-color-rgb), 0.87);
}
.banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url("../assets/images/static/banner_background_doodles.svg");
    background-size: contain;
}
.dark > .banner {
    background-color: rgba(var(--dark-banner-color-rgb), 0.8);
    color: var(--dark-text-color);
    box-shadow: 0 0 0.2em 0 var(--light-banner-color);
}
.banner > .text {
    text-align: center;
    margin-top: 30px;
}
.text > .motto {
    font-size: 45px;
    font-weight: 800;
    margin-bottom: 50px;
    font-family: "NK57 Monospace", 'Courier New', Courier, monospace;
    padding: 0 10px 0 10px;
}
.text > .motto > .highlight {
    color: var(--dark-pink);
    animation: text-highlight 1.2s linear infinite;
    font-size: 48px;
    font-weight: 500;
}
@keyframes text-highlight {
    0% {opacity: 0}
    24% {opacity: 0}
    26% {opacity: 1}
    74% {opacity: 1}
    76% {opacity: 0}
    100% {opacity: 0}
}
.text > .motto span.colored {
    color: var(--pink);
    transition: all 0.5s ease-in;
    font-weight: 1000;
}
.text > .motto span.colored.static {
    color: var(--light-text-color);
    font-weight: 800;
}
.dark .text > .motto span.colored.static {
    color: var(--dark-text-color);
}
.text > p {
    font-size: 17px;
    font-family: 'Roboto';
}
.text > p.description {
    font-size: 16px;
    font-weight: 500;
    line-height: 25px;
    padding: 0 calc(50% - 300px) 0 calc(50% - 300px);
    margin-bottom: 10px;
}
.text > p a {
    color: var(--light-text-color);
    -webkit-text-decoration-line: underline;
    -webkit-text-decoration-thickness: 2px;
    -webkit-text-decoration-color: var(--pink);
    -webkit-text-decoration-style: solid;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--pink);
    text-decoration-style: solid;
    font-weight: 500;
    text-underline-offset: 5px;
    transition: all 0.25s ease, color 0.5s ease;
    position: relative;
    top: 0;
}
.dark .text > p a {
    color: var(--dark-text-color);
    -webkit-text-decoration-color: var(--dark-pink);
    text-decoration-color: var(--dark-pink);
}
.text > p a:hover {
    -webkit-text-decoration-thickness: 3px;
    -webkit-text-decoration-color: var(--dark-pink);
    text-decoration-color: var(--dark-pink);
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
    top: -3px;
}
.start-btn {
    left: 50%;
    transform: translateX(-50%);
    margin: 20px 0 50px 0;
}

@media screen and (min-width:351px) and (max-width: 650px) {
    .text {
        padding: 30px 20px 25px 20px;
    }
    .text > .motto {
        font-size: 40px;
    }
    .text > .motto > .highlight {
        font-size: 43px;
    }
}
@media screen and (max-width:350px) {
    .text {
        padding: 30px 15px 25px 15px;
    }
    .text > .motto {
        font-size: 32px;
    }
    .text > .motto > .highlight {
        font-size: 35px;
    }
    .text > p.description {
        font-size: 15px;
        line-height: 22px;
    }
}