#fullscreen-container,
#main-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

#fullscreen-container.active {
    min-height: 100vh;
}

@media (min-height: 68em) {
    #fullscreen-container.active {
        min-height: unset;
        height: 68rem;
    }
}

#fullscreen-container-content {
    flex-grow: 1;
}

.banner,
#fullscreen-container-content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.8rem 2.5rem;
    background: var(--bg-semi-transparent);
    backdrop-filter: blur(var(--blur));
    box-shadow: var(--box-shadow-small);
    border-radius: var(--default-border-radius);
    max-width: 100vw;
}

.dark .banner-content>:not(a), .dark .banner-container>:not(a){
    text-shadow: var(--text-shadow);
}

.banner-content.full {
    border-radius: 0;
    width: 100%;
    height: 100%;
}

.banner-content.no-bg {
    background: none;
}

.banner-border-bottom {
    margin: 1.8rem 0;
    background: var(--bg-primary);
    box-shadow: var(--box-shadow);
    height: 0.2rem;
    width: 100%;
}

.banner-border-bottom.extend {
    width: 120%;
}

.banner-white-gradient {
    width: 100%;
    height: 110%;
    background: linear-gradient(to top, var(--bg-primary) 15%, transparent 95%);
}

.banner-white-gradient.invert {
    background: linear-gradient(to bottom, var(--bg-primary) 15%, transparent 95%);
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: var(--bg-primary);
}

.container.grow {
    justify-content: flex-start;
}

@media (max-width: 50em) {
    .text-content {
        padding-left: 0;
        padding-right: 0;
        min-width: 85vw;
    }
}

.text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100vw - 5rem);
    max-width: 65rem;
}

.text-content p {
    width: 100%;
}

.text-content h2 {
    margin-bottom: 1.5rem;
}

.text-content p:not(:last-child) {
    margin-bottom: 1rem;
}

.text-content ul {
    margin-right: auto;
    margin-left: 1.25rem;
    overflow: visible;
}

.text-content ul li {
    width: auto;
    overflow: visible;
}

.img-btn-menu {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    overflow: visible;
}

.img-btn-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 22rem;
    max-width: 90vw;
    height: auto;
    border: 0.2rem solid var(--text-secondary);
    border-radius: var(--default-border-radius);
    background: var(--bg-primary);
    padding: 0;
    margin: 0.2rem 0.65rem 0.65rem;
    padding-bottom: 1.25rem;
}

.img-btn-menu a:hover {
    border-color: var(--primary);
    background: var(--bg-secondary);
}

.img-btn-menu a h1 {
    transition: color .2s;
}

.img-btn-menu a:hover h1 {
    color: var(--primary);
}

@media (max-width: 50em) {
    .img-btn-menu {
        grid-auto-flow: row !important;
    }
}