/* === COLORS ===

Spartans Black:     #1D1D1B
Spartans Gold:      #E7B66C
Spartans Red:       #CC1518
Spartans Burgundy:  #9D1A15

 */
 
 body {
    font-family: Tahoma, Verdana, sans-serif;
    background-color: #1D1D1B;
    color: white;
    margin: 0;
    padding: 1rem;
}

h1 {
    color: #E7B66C;
    font-size: 2rem;
    text-align: center;
    margin: 0 auto;
}

h2 {
    color: #CC1518;
    font-size: 1.1rem;
    text-align: center;
    margin: 0 auto;
}

p {
    margin: 0;
}

img {
    max-height: 70px;
    width: auto;
    margin: 0.5rem auto;
}

#periodInfo {
    background-color: #E7B66C;
    color: #1D1D1B;
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 8px;
    text-align: center;
}

#periodInfo .col-2 {
    padding: 0.2rem 0;
}

#periodInfo .col-2:first-of-type {
    padding-bottom: 0;
}

#playInfo {
    background: #EEE;
    color: #1D1D1B;
    border-radius: 8px;
}

div.playInfo p {
    text-align: center;
}

#playInfo .row > .col-1:nth-child(odd) {
    text-align: right;
}

#playInfo .row > .col-1:nth-child(even) {
    text-align: left;
    color: #9D1A15;
}

#playInfo .col-2 {
    text-align: center;
}

button {
    padding: 10px 20px;
    margin: 10px;
    min-width: 130px;
    font-size: 16px;
    background: #E7B66C;
    color: #1D1D1B;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
}

 /* === GRID-SYSTEM === */

 .container {
    width: 95%;
    margin: 0 auto 1rem auto;
}

.row::after {
    content: "";
    clear: both;
    display: block;
}

[class*='col-'] {
    float: left;
    min-height: 1px;
    padding: .8rem;
}

.col-1 { width: 42%; }
.col-2 { width: 100%; }