/* Scaleable font sizes for small viewport widths */
* { font-size: 1.75vw; }
.title { font-size: 8.7vw; }
.cell { font-size: 8.7vw; }
label, input, .sm-cell, .arrow, #error_msg { font-size: 4.8vw; }
.sm-cell-very-wide, .sm-cell-wide, .sm-title { font-size: 3.5vw; }
button, #caret, #best { font-size: 4.8vw; }

/* When viewport width is greater than or equal to 460px, use fixed sizes */
@media screen and (min-width: 460px) {
    * { font-size: 8px; }
    .title{ font-size: 40px; }
    .cell { font-size: 40px; }
    label, input, .sm-cell, .arrow, #error_msg { font-size: 22px; }
    .sm-cell-very-wide, .sm-cell-wide, .sm-title { font-size: 16px; }
    button, #caret, #best { font-size: 22px; }
}

#header_container {
    position: absolute;
    top: 3em;
    left: 1em;
}

#main_container    { position: absolute; top: 17em; left: 1em; }

.header {
    display: grid;
    grid-template-columns: 6em 30em 8em;
    column-gap: 1em;
    margin: 1em;
    padding: 1em 2em 2em 2em;
}

.drop-a-little {
    padding-top: 1em;
}

#best {
    position: relative;
    font-family: sans-serif;
    color: red;
    left: 5em;
    top: -6em;
    transform: rotate(-15deg);
}

#caret {
    position: relative;
    font-family: sans-serif;
    color: red;
    left: 6em;
    top: -4em;
    width: 2em;
}

.sm-title, .arrow, #error_msg {
    font-family: sans-serif;
    text-align: center;
}

a {
    text-decoration: none;
    color: black;
}

.title {
    display: inline-block;
}

.rotate {
    transform: rotate(-30deg);
    color: gray;
    font-family: sans-serif;
}

div.row {
}

.wheel_img {
    font-size: 8px;
    padding: 0;
    width: 8em;
    height: 8em;
    border-radius: 50%;
    display: inline-block;
}

.position_on_wheel {
    font-size: 24px;
    position: relative;
    top: -2.75em;
    font-family: monospace;
    margin: 0.333em;
    text-align: center;
    vertical-align: middle;
    line-height: 2em;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background-color: #e0e0e0;
}

.matrix {
    display: grid;
    grid-template-columns: repeat(6, 8em);
    grid-template-rows: repeat(4, 8em);
    column-gap: 1em;
    row-gap: 1em;
    margin: 1em;
    padding: 0 2em;
}

.instructions {
    width: 90vw;
    font-size: 4vw;
    padding: 1em;

}

/* When viewport width is greater than or equal to 500px, limit width */
@media screen and (min-width: 500px) {
    .instructions {
        width: 450px;
        font-size: 20px;
    }
}