html {
    font-family: 'Roboto', sans-serif;
    font-size: 120%;
    text-align: center;
    overflow-x: auto;
}

main {
    max-width: 760px;
}

#feedback-label, #you, #opponent, #choice-label, #payoff-label, #score-label, #round, #instruction {
    font-weight: bold;
}

#feedback-label, #round, .button-label {
    font-size: 120%;
}

.button-label {
    margin-bottom: 1ex;
}

#feedback-label, #round, #instruction {
    margin: 3ex 0;
}

#feedback {
    display: grid;
    grid-template-columns: 6.5em 6em 8em 6em 9em;
    grid-template-rows: repeat(5, auto);
    row-gap: 1.5ex;
    column-gap: 1em;
}

#feedback img {
    height: 95%;
    width: 85%;
}

#outcome {
    grid-column: 3;
    grid-row: 2;
    font-size: 140%;
    font-weight: bold;
}

#choice-label, #payoff-label, #score-label {
    grid-column: 1;
    text-align: right;
}

.won {
    color: green;
}

.lost {
    color: red;
}

.tie {
    color: black;
}

#you, #player-move-image, #player-choice, #player-payoff, #player-score {
    grid-column: 2;
}

#opponent, #opponent-move-image, #opponent-choice, #opponent-payoff, #opponent-score {
    grid-column: 4;
}

#you, #opponent {
    grid-row: 1;
}

#player-move-image, #opponent-move-image {
    grid-row: 2;
}

#player-move-image {
    text-align: right;
}

#opponent-move-image {
    transform: scaleX(-1);
}

#choice-label, #player-choice, #opponent-choice {
    grid-row: 3;
}

#payoff-label, #player-payoff, #opponent-payoff {
    grid-row: 4;
}

#player-payoff, #opponent-payoff {
    font-size: 120%;
}

#score-label, #player-score, #opponent-score {
    grid-row: 5;
}

hr {
    color: gray;
    margin: 4ex 4em;
}

form {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    row-gap: 5ex;
}

form img {
    height: 50%;
    width: 50%;
}

#rock {
    grid-column: 1 / 3;
    grid-row: 1;
}

#paper {
    grid-column: 1;
    grid-row: 2;
}

#scissors {
    grid-column: 2;
    grid-row: 2;
}

#finish {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    font-size: 120%;
    font-weight: bold;
    margin-left: 10em;
    margin-right: 10em;
    margin-top: 4ex;
    padding: 14px;
}

#end {
    margin: 2ex 6em;
    color: red;
    font-size: 200%;
    font-weight: bold;
}