body {
    font-family: sans-serif;
}

table {
    display: inline-block;
    border-spacing: 0px;
    margin: 8px;
    background-color: #f3c0bd;
}

td {
    border: 0px none;
    white-space: nowrap;
    color: #000000;
    font-weight: 600;
    text-align: center;
    padding: 4px 8px 4px 8px;
}

td:nth-child(1) {
    text-align: left;
}

td:nth-child(n+4) {
    transform: rotate(45deg);
    padding: 0px 2px 0px 2px;
}

button {display: inline-block; border: 0px solid #fff; padding: 10px 15px; font-size:16; font-weight: bold; margin: 2px; border-radius: 8px;}
button:hover {}
button.augie  {background-color:#00204E; color:#ffd100;}
button.augie:hover {box-shadow: 0 0 0 4px #00204E}
button.augie:active {box-shadow: 0 0 0 4px #00204E}
button.bsu  {background-color:#006a65; color:white;}
button.bsu:hover {box-shadow: 0 0 0 4px #006a65}
button.bsu:active {box-shadow: 0 0 0 4px #006a65}
button.csp  {background-color:#003057; color:#DAA900;}
button.csp:hover {box-shadow: 0 0 0 4px #003057}
button.csp:active {box-shadow: 0 0 0 4px #003057}
button.uj  {background-color:#FA4616; color:#000000;}
button.uj:hover {box-shadow: 0 0 0 4px #FA4616}
button.uj:active {box-shadow: 0 0 0 4px #FA4616}
button.mary  {background-color:#002E6D; color:#FF671D;}
button.mary:hover {box-shadow: 0 0 0 4px #002E6D}
button.mary:active {box-shadow: 0 0 0 4px #002E6D}
button.umc  {background-color:#FBA919; color:#910028;}
button.umc:hover {box-shadow: 0 0 0 4px #FBA919}
button.umc:active {box-shadow: 0 0 0 4px #FBA919}
button.umd  {background-color:#910028; color:#FFBF3C;}
button.umd:hover {box-shadow: 0 0 0 4px #910028}
button.umd:active {box-shadow: 0 0 0 4px #910028}
button.msu  {background-color:#46166B; color:#FFDD00;}
button.msu:hover {box-shadow: 0 0 0 4px #46166B}
button.msu:active {box-shadow: 0 0 0 4px #46166B}
button.minot  {background-color:#E31937; color:white;}
button.minot:hover {box-shadow: 0 0 0 4px #E31937}
button.minot:active {box-shadow: 0 0 0 4px #E31937}
button.nsu  {background-color:#98002E; color:#FFDE6C;}
button.nsu:hover {box-shadow: 0 0 0 4px #98002E}
button.nsu:active {box-shadow: 0 0 0 4px #98002E}
button.scsu  {background-color:#CE1141; color:white;}
button.scsu:hover {box-shadow: 0 0 0 4px #CE1141}
button.scsu:active {box-shadow: 0 0 0 4px #CE1141}
button.usf  {background-color:#492F92; color:white;}
button.usf:hover {box-shadow: 0 0 0 4px #492F92}
button.usf:active {box-shadow: 0 0 0 4px #492F92}
button.smsu  {background-color:#3A1807; color:#AD923D;}
button.smsu:hover {box-shadow: 0 0 0 4px #3A1807}
button.smsu:active {box-shadow: 0 0 0 4px #3A1807}
button.msum  {background-color:#CE152D; color:white;}
button.msum:hover {box-shadow: 0 0 0 4px #CE152D}
button.msum:active {box-shadow: 0 0 0 4px #CE152D}
button.wsc  {background-color:#FCCC51; color:#000000;}
button.wsc:hover {box-shadow: 0 0 0 4px #FCCC51}
button.wsc:active {box-shadow: 0 0 0 4px #FCCC51}
button.wsu  {background-color:#4B08A1; color:white;}
button.wsu:hover {box-shadow: 0 0 0 4px #4B08A1}
button.wsu:active {box-shadow: 0 0 0 4px #4B08A1}

@media only screen and (max-width: 1023px) {
    #container {
        text-align: left;
    }

    table {
        margin: 6px;
    }
    
    button {padding: 15px 20px; font-size:20; margin: 8px;}
}

@media only screen and (max-width: 320px) {   
    button {padding: 15px 20px; font-size:16; margin: 8px;}
}