*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;
  }

html {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #f2f0e6;
    font-size: 47px;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

body, #container {
    height: 100%;
    width: 100%;
}

#container {
    display: grid;
    grid-template-areas: 
        'top top top top top'
        'left center center center right'
        'left center center center right'
        'bot bot bot bot bot';
    grid-template-rows:  1fr 3.5fr 3.5fr 2fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 0;
    text-align: center;
}

/* Sections */
.top {
    grid-area: top;
    font-weight: bold;
}

.center-left, .center-right {
    font-size: 0.75rem;
    box-shadow: 0 5px 10px darkslategray;
}

.center-left {
    grid-area: left;
    border: 5px solid red;
}

.center-right {
    grid-area: right;
    border: 5px solid blue;
}

    .stats {
        font-size: 0.5rem;
        text-align: left;
        padding-left: 0.5vw;
        padding-top: 2vh;
        padding-right: 0.5vw;
        display: table;
    }

    .score {
        float: right;
        padding-left: 1vw;
    }

.center {
    grid-area: center;
}

    .win-condition {
        height: 10%;
        font-size: 0.8rem;
    }

    .simulation {
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .simulation-icon {
        font-size: 1.5rem;
        padding: 10px;
        margin: 0 2vw 0 2vw;
        border-radius: 100%;
        background-color: lightgrey;
    }

    .outcome {
        font-size: 1.5rem;
        height: 40%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    /* On 5 wins/losses */
    .champion {
        font-size: 2rem;
    }

    .outcome-desc {
        font-size: 0.75rem;
        height: 20%;
    }

.bottom {
    grid-area: bot;
}

    .choice {
        font-size: 1.4rem;
        margin: 10px 15px 10px 15px;
        padding: 10px;
        border-radius: 25%;
        border: 1px solid black;
    }

    .choice:hover {
        transform: scale(1.2);
        border: 3px solid red;
    }

    .choice:focus {
        transform: scale(1.2);
        border: 3px solid red;
        outline: none;
    }

.hide {
    visibility: hidden;
    height: 0;
}

@media only screen and (max-width:1000px) {
    html {
        font-size: 40px;
    }
}

@media only screen and (max-width:850px) {
    html {
        font-size: 35px;
    }
    
    #container {
        grid-template-areas: 
        'top top top top top'
        'left left center center center'
        'right right center center center'
        '. . bot bot bot';
        grid-template-rows:  1fr 3.5fr 3.5fr 2fr;
        grid-template-columns: 0.5fr 0.5fr 1fr 1fr 1fr;
    }
}

@media only screen and (max-width:650px) {
    #container {
        grid-template-areas: 
        'top top'
        'center center'
        'bot bot'
        'left right';
        grid-template-rows:  0.5fr 3.5fr 1fr 0.5fr;
        grid-template-columns: 0.5fr 0.5fr
    }
}