html {
    background-color: #101c43;
}

body {
    color: var(--clr-white);
    font-family: 'Foco', sans-serif;
    background-color: var(--clr-dark-blue);
}


/* ----------------- Sections ----------------- */

#frame {
    padding: 1.4rem;
    height: 100%;
    background-color: var(--clr-white);
}

#content {
    height: 100%;
    width: 100%;
    background-color: var(--clr-dark-blue);
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
}


.page {
    padding: 6rem 4.6rem;
}

.fullscreen {
    min-height: 62rem;
    height: 100%;
    max-height: 96rem;
}

.fullscreen .content {
    padding: 3.2rem 3.2rem;
    height: 100%;
    background-color: var(--clr-dark-blue);
}

.topPage .content {
    padding-top: 10rem;
}

.fullscreen .content.spaced {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}


/* ----------------- Text ----------------- */

a, a:hover, a:visited {
    color: var(--clr-white);
}

.h1 {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    margin-bottom: 2.0rem;
    font-size: 4.0rem;
    line-height: 5.0rem;
    font-weight: 900;
    text-transform: uppercase;
}

.h2 {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    margin-bottom: 2.0rem;
    font-size: 3.0rem;
    line-height: 3.8rem;
    font-weight: 900;
    text-transform: uppercase;
}

.h1 .decoration, .h2 .decoration {
    position: absolute;
    top: -2.2rem;
    left: -4.0rem;
    height: 4.0rem;
    width: 4.0rem;
    background-image: url('/public/images/assets/splash.svg');
} 

.text {
    margin-bottom: 1.0rem;
    font-size: 1.8rem;
    line-height: 2.3rem;
    font-weight: 400;
}

.text.big {
    margin-bottom: 1.0rem;
    font-size: 2.2rem;
    line-height: 2.7rem;
    font-weight: 400;
}

.text.small {
    margin-bottom: 1.0rem;
    font-size: 1.6rem;
    line-height: 2.0rem;
    font-weight: 400;
}


/* ----------------- UI ----------------- */

.button,
.answer {
    padding: 1.9rem;
    width: 100%;
    max-height: 5.8rem;
    color: var(--clr-black);
    font-size: 1.6rem;
    line-height: 2.0rem;
    font-weight: 400;
    background-image: linear-gradient(180deg, #FFFFFF 0%, #E8E8E8 100%);
    border-radius: 0.2rem;
    transition: 1s;
}

.button:after,
.answer:after {
    content: '';
    position: absolute;
    left: 0.2rem;
    right: 0.2rem;
    top: 0.2rem;
    bottom: 0.2rem;
    border: solid 0.1rem #213B9288;
    border-radius: 0.1rem;
    transition: 1s;
}


/* ----------------- Decorations ----------------- */

.bgTop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20rem;
    background-image: url('/public/images/assets/bg-top.svg');
    background-position: top center;
}

.bgTop.sheer {
    background-image: url('/public/images/assets/bg-top-sheer.svg');
}

.bgBottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20rem;
    background-image: url('/public/images/assets/bg-bottom.svg');
    background-position: bottom center;
}

.bgBottom.continuing {
    bottom: -7rem;
    height: 26rem;
    background-image: url('/public/images/assets/bg-bottom-continuing.svg');
    background-position: center center;
}