/* #######
TYPOGRAPHY 
####### */

:root {
    font-family: "Bebas Neue", Helvetica, Arial, sans-serif;
    font-size: 18px
}
table {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
}
span.footer__logo { font-family: "Righteous";}

/* ###
LAYOUT
### */

body { grid-template-rows: 5rem 1fr 5rem }
header { 
    margin: 0 auto; 
    place-content: center 
}
header > div > h1 { text-align: center }
header > div > nav > ul {
    display: flex;
    gap: 1rem
}
main > h2,
main > h3 { text-align: center }
main > div> table { margin: 0 auto }
table { max-width: 60rem;}
table > thead > tr > th,
table > tbody > tr > td { padding: 0 1rem }
footer { 
    margin: 0 auto;
    place-content: center;
}

/* ###
COLOUR
### */

:root { color-scheme: light dark;}
* {
    background-color: light-dark(whitesmoke, #131313);
    color: light-dark(#131313, whitesmoke)
}
table > thead > tr > th {
    background-color: light-dark(#131313, whitesmoke);
    color: light-dark(whitesmoke, #131313)
}
table > tbody > tr { outline: 2px solid light-dark(#131313, whitesmoke) }
table > tbody > tr > td > a { color: rebeccapurple }
*.clickable { color: rebeccapurple }
*.clickable:hover {
    color: light-dark(#131313, whitesmoke);
    outline: 1px solid rebeccapurple
}