main {
    background-color: #f8fbef;
}

.stats {
    position: relative;
    height: 100%;
    width: calc(100% - calc(var(--var-content-space)*2));
    margin: 10px var(--var-content-space);
    background: #f8fbef;
    display: grid;
    grid-template-areas: 'Anime AnimeCake'
        'Manga MangaCake';
    grid-template-rows: 1fr 1fr;
    grid-template-columns: max-content 1fr;
    overflow: auto;
    box-shadow: inset 0 0 13px rgba(0,0,0,0.5);
    border-left-color: 5px;
}

    .stats.flipped {
        grid-template-areas: 'Anime Manga'
            'AnimeStats MangaStats'
            'AnimeCake MangaCake';
        grid-template-rows: 50px max-content 1fr;
        grid-template-columns: 1fr 1fr;
    }

.stats-anime-bar {
    grid-area: Anime;
    text-align: left;
    margin: 20px 15px;
}

    .stats-anime-bar input {
        background: none;
        border: none;
        font-family: Helvetica;
        font-size: 18px;
        font-weight: bold;
        text-decoration: underline;
        color: MediumSeaGreen;
    }

.stats-text-container {
    grid-area: Anime;
    text-align: left;
    font-weight: normal;
    color: MediumSeaGreen;
    font-size: 16px;
    padding: 80px 15px;
    border-bottom: 2px solid;
   
}

    .stats-text-container label {
        font-size: 16px;
        font-weight: bold;
    }

.stats.flipped .stats-text-container {
    border-bottom: none;
    border-right: 2px solid;
}

.stats-cake-container {
    grid-area: AnimeCake;
    color: MediumSeaGreen;
    text-align: left;
    padding: 15px 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 2px solid;
}

.stats.flipped .stats-cake-container {
    display: block;
    border-bottom: none;
    border-right: 2px solid;
}




.stats-cake-container h1 {
    font-size: 16px;
    font-weight: bold;
}


.stats-manga-bar {
    grid-area: Manga;
    text-align: left;
    margin: 20px 15px;
}

    .stats-manga-bar input {
        background: none;
        border: none;
        font-family: Helvetica;
        font-size: 18px;
        font-weight: bold;
        text-decoration: underline;
        color: MediumSeaGreen;
    }

.stats-manga-text-container {
    grid-area: Manga;
    text-align: left;
    font-weight: normal;
    color: MediumSeaGreen;
    font-size: 16px;
    margin: 80px 15px;
}

    .stats-manga-text-container label {
        font-size: 16px;
        font-weight: bold;
    }

.stats-manga-cake-container {
    grid-area: MangaCake;
    color: MediumSeaGreen;
    text-align: left;
    margin: 15px 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

    .stats-manga-cake-container h1 {
        font-size: 16px;
        font-weight: bold;
    }