:root {
    --rootTeamDivSize: 10%;
}

main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.standing-section-container {
    display: flex;
    flex-wrap:  wrap;
    justify-content: center;
}

@media (orientation: landscape) {
    .standing-section-container {
        height: 100%;
        width: 50%;
    }
}

@media (orientation: portrait) {
    .standing-section-container {
        height: 50%;
        width: 100%;
    }
}

.table-headers {
    width: 100%;
    height: 5%;
    display: flex;
}

.table-headers>.standing-section>.standing-row {
    height: 100%;
}

.standing-header-section {
    width: 10%;
    height: 95%;
}

.standing-header-section > * {
    display: flex;
    justify-content: center;
    align-items: center;
}

.standing-header {
    writing-mode: vertical-rl;
    rotate: 180deg;
    max-height: 80%;
    max-width: 100%;
}

.standing-section {
    width: 90%;
    height: 95%;
}

.teams {
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    flex-wrap: wrap;
}

.top-division,
.bot-division {
    height: calc(3 / 8 * 100%);
}

.wildcards {
    height: calc(2 / 8 * 100%);
}

#top-division>.standing-row,
#bot-division>.standing-row {
    height: calc(var(--rootTeamDivSize) * 8 / 3);
}

#wildcards>.standing-row {
    height: calc(var(--rootTeamDivSize) * 8 / 2);
}

#outside-teams>.teams>.standing-row {
    height: var(--rootTeamDivSize);
}

/* .standing-row { */
    /* outline: 0.2vw solid darkblue; CSS help */
    /* border-radius: .5vw; CSS help */
/* } */

.standing-row {
    width: 90%;
    display: flex;
}

.standing-number {
    width: 10%;
    max-height: 100%;
    text-align: right;
    align-content: center;
}

.team-div {
    width: 90%;
    display: flex;
    align-items: center;
}

.team-info {
    height: 100%;
    width: 70%;
    display: flex;
    align-items: center;
}

.team-div>*,
.team-info>* {
    margin: 0px;

}

.logo {
    max-height: 96%;
    max-width: 25%;
    object-fit: contain;
}

.clinch-indicator {
    width: 6%;
    max-height: 60%;
    text-align: left;
}

.name {
    max-width: 69%;
    max-height: 100%;
    align-content: center;
}

.games-played,
.points {
    width: 15%;
    max-height: 60%;
    align-content: center;
    text-align: center;
}