html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
}

*::before,
*::after {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: #00518B;
}

body {
    font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: clamp(1rem, 0.9357rem + 0.2857vw, 1.15rem);
}

button {
    color: #ffffff;
    background-color: #58acef;
    display: inline-block;
    font-style: normal;
    font-weight: 600;
    font-size: 1.5rem;
    height: 3rem;
    letter-spacing: 0.6px;
    line-height: 1;
    margin-bottom: 1rem;
    padding: .75rem 2rem;
    text-transform: uppercase;
    transition: all 150ms ease;
    user-select: none;
    vertical-align: middle;
}

caption {
    font-size: 1.3rem;
    text-align: left;
}

footer ul {
    text-decoration: none;
    list-style: none;
}

footer ul li {
    margin-bottom: 1rem;
}

footer ul li a {
    color: #686868;
    font-weight: 300;
}

footer ul li:first-of-type {
    color: #002E6D;
    ;
    font-weight: bold;
}

h1 {
    font-size: 3rem;
    margin-bottom: 0;
}

h2 {
    font-size: 2rem;
    margin: 0;
    padding-left: 1rem;
    padding-top: 1rem;
    padding-bottom: .5rem;
}

h3 {
    color: gray;
    margin-bottom: 0;
    text-align: center;
}

header {
    width: 100%;
}

input[type='submit'] {
    color: #ffffff;
    background-color: #58acef;
    display: inline-block;
    font-style: normal;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.6px;
    line-height: 1;
    padding: 1rem 1.5rem;
    text-transform: uppercase;
    transition: all 150ms ease;
    user-select: none;
    vertical-align: middle;
}

nav {
    display: grid;
    grid-template-columns: 1fr auto;
    margin: 0 auto;
    max-width: 1720px;
}

nav a {
    color: #002E6D;
    text-decoration: none;
    transition: .3s all ease-in-out;
}

nav a:hover {
    opacity: .7;
}

li {
    display: block;
    margin-right: .8rem;
}

.logo {
    grid-column: 1;
    height: auto;
    padding: 1rem;
    width: 193px;
}

label {
    font-style: normal;
    font-size: 1.1rem;
    vertical-align: middle;
}

main {
    margin: 0 auto;
    max-width: 130ch;
}

main>* {
    margin-top: 1rem;
}

pre {
    line-height: 1.4;
}

section {
    margin: 2rem 0;
}

select {
    display: inline-block;
    font-style: normal;
    font-size: 1rem;
    line-height: 1;
    padding: 1rem;
    vertical-align: middle;
}

summary {
    background-color: #00518B;
    color: white;
    font-size: 1.2rem;
    padding-left: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

table {
    border-collapse: collapse;
    border: 1px solid #C5C5C5;
    border-top: none;
    font-size: 1rem;
    font-style: normal;
    margin: 1rem 0;
    text-align: left;
    width: 100%;
}

td,
th {
    border-bottom: 1px solid #C5C5C5;
    padding: .5rem;
}

td[data-peer_review_k0='1'],
td[data-peer_review_k1='1'],
td[data-peer_review_k2='1'],
td[data-peer_review_k3='1'],
td[data-peer_review_k4='1'],
td[data-peer_review_k5='1'],
td[data-peer_review_k6='1'],
td[data-peer_review_k7='1'],
td[data-peer_review_k8='1'],
td[data-peer_review_k9='1'],
td[data-peer_review_k10='1'],
td[data-peer_review_k11='1'],
td[data-peer_review_k12='1'],
td[data-peer_review_k13='1'],
td[data-peer_review_k14='1'],
td[data-peer_review_k15='1'],
td[data-peer_review_k16='1'],
td[data-peer_review_k17='1'],
td[data-peer_review_k18='1'],
td[data-peer_review_k19='1'],
td[data-peer_review_k20='1'],
td[data-peer_review_k21='1'] {
    background-color: #C4E9B3;
}


/* If the office ever wants to code partial (0 to 1 or any figure containing a decimal point) in yellow */


/* td[data-peer_review_k0*='.'],
td[data-peer_review_k1*='.'],
td[data-peer_review_k2*='.'],
td[data-peer_review_k3*='.'],
td[data-peer_review_k4*='.'],
td[data-peer_review_k5*='.'],
td[data-peer_review_k6*='.'],
td[data-peer_review_k7*='.'],
td[data-peer_review_k8*='.'],
td[data-peer_review_k9*='.'],
td[data-peer_review_k10*='.'],
td[data-peer_review_k11*='.'],
td[data-peer_review_k12*='.'],
td[data-peer_review_k13*='.'],
td[data-peer_review_k14*='.'],
td[data-peer_review_k15*='.'],
td[data-peer_review_k16*='.'],
td[data-peer_review_k17*='.'],
td[data-peer_review_k18*='.'],
td[data-peer_review_k19*='.'],
td[data-peer_review_k20*='.'],
td[data-peer_review_k21*='.'] {
    background-color: #FFFFB3;
} */

td[data-peer_review_k0='0'],
td[data-peer_review_k1='0'],
td[data-peer_review_k2='0'],
td[data-peer_review_k3='0'],
td[data-peer_review_k4='0'],
td[data-peer_review_k5='0'],
td[data-peer_review_k6='0'],
td[data-peer_review_k7='0'],
td[data-peer_review_k8='0'],
td[data-peer_review_k9='0'],
td[data-peer_review_k10='0'],
td[data-peer_review_k11='0'],
td[data-peer_review_k12='0'],
td[data-peer_review_k13='0'],
td[data-peer_review_k14='0'],
td[data-peer_review_k15='0'],
td[data-peer_review_k16='0'],
td[data-peer_review_k17='0'],
td[data-peer_review_k18='0'],
td[data-peer_review_k19='0'],
td[data-peer_review_k20='0'],
td[data-peer_review_k21='0'] {
    background-color: #F1A9A9;
}

tr td:first-child {
    color: #007DBC;
}

thead {
    background-color: #002e6d;
    border-left: 1px solid #002e6d;
    border-right: 1px solid #002e6d;
    color: #ffffff;
}

tfoot {
    color: black;
    font-weight: bold;
}


/* Classes */

.section-charts {
    /* align-content: space-between; */
    display: flex;
    margin: 3rem 0;
    flex-wrap: wrap;
}

.section-charts>div {
    /* background-color: red; */
    min-width: 50%;
}

.margin-left-auto {
    margin-left: auto;
}

.grade {
    border: 4px solid #000000;
    box-sizing: border-box;
    color: black;
    display: flex;
    flex-direction: column;
    font-weight: bold;
    font-size: 1.8rem;
    justify-content: center;
    margin-left: auto;
    text-align: center;
    height: 10rem;
    width: 10rem;
}

.grade span:first-of-type {
    font-size: 2.5rem;
}

.grade span:nth-of-type(2) {
    font-size: 1.5rem;
}

.overview {
    display: flex;
    position: relative;
}

.text-align-right {
    text-align: right;
}

.section-title {
    background-color: #002e6d;
    color: white;
    display: flex;
}

.section-explanation {
    display: flex;
    margin: 1rem 0;
}

.section-explanation h3 {
    color: black;
    padding-right: 1rem;
}

.section-comments {
    border: 1px solid #C5C5C5;
    margin: 2rem 0;
    padding: .5rem 1rem;
}

.osdbu-cards-score {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 1rem 0;
}

.osdbu-cards-score>span {
    margin-right: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: .25rem;
    padding-top: .5rem;
}

.osdbu-total-score {
    font-size: 1.5rem;
    font-weight: bold;
    margin-left: auto;
    padding: 1rem;
    padding-bottom: 0;
}

.section-title>span {
    font-size: 2rem;
    font-weight: bold;
    margin-left: auto;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: .5rem;
}

.subtitle {
    font-size: 2rem;
}

.main-menu {
    align-self: center;
    grid-column: 2;
    padding: 10px 0;
    margin-right: 1rem;
    font-weight: 300;
}


/* Use clamp() to scale font size linearly
From: https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ 
*/

.main-menu a {
    font-size: clamp(0.6rem, 0.4093rem + 0.8477vw, 1rem);
    font-weight: bold;
    padding-right: 1rem;
}


/* Identifiers */

#footer-menu {
    border-top: 1px solid lightgray;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    letter-spacing: -0.4px;
    padding-top: 1rem;
}

#footer-mobile ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

#footer-mobile a {
    align-self: center;
    padding: .5rem;
}

#nav-toggle,
.hamburger-menu {
    display: none;
}


/* Media Queries */

@media only screen and (max-width: 769px) {
    #footer-menu {
        display: none;
    }
    #footer-mobile {
        display: grid;
    }
    #national-fundings-link {
        padding-left: 0px;
        padding-top: 8px;
    }
    #nav-toggle:checked~.main-menu {
        display: grid;
        grid-column: 1;
        grid-row: 2;
        margin-left: 1rem;
    }
    .hamburger-menu {
        display: inline-block;
    }
    .main-menu {
        display: none;
    }
    .show {
        display: block;
    }
}

@media only screen and (min-width: 769px) {
    #footer-menu {
        display: grid;
    }
    #footer-mobile {
        display: none;
    }
}