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

:root {
    font-family: "Bebas Neue", Helvetica, Arial, sans-serif;
    font-size: 18px
}
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 { padding: 0 1rem }
header > div > nav > ul {
    display: flex;
    gap: 1rem
}
main {
    display: grid;
    grid-template-columns: 33vw 34vw 33vw;
    grid-template-columns: 33dvw 34dvw 33dvw;
}
main > h2 {
    place-content: center;
    text-align: center;
}
main > div {
    place-content: center;
    text-align: center;
}
main > p {
    place-content: center;
    text-align: center;
}
footer { 
    margin: 0 auto;
    place-content: center;
}

/* ###
COLOUR
### */

:root { color-scheme: light dark;}
* {
    background-color: light-dark(whitesmoke, #131313);
    color: light-dark(#131313, whitesmoke)
}
main > div {
    background-image: url("../images/background/2025.png");
    background-size: auto;
    border: 2px solid goldenrod;
    border-style: outset
}
*.clickable { color: rebeccapurple }
*.clickable:hover {
    color: light-dark(#131313, whitesmoke);
    outline: 1px solid rebeccapurple
}