/* ###
TYPOGRAPHY
### */

:root {
    font-family: "Cinzel", "Times New Roman", Times, serif;
    font-weight: 500;
    font-size: 18px
}
main > h2 {font-size: 5.75rem }
main > p {font-size: 3.375rem }
@media screen and (orientation: portrait) {
    main > h2 {font-size: 2.75rem }
    main > p {font-size: 1.5rem }
}
main > div > p > span { font-size: 0.75rem }
legend { font-size: 1.875rem }
span.footer__logo { 
    font-family: "Righteous", Helvetica, sans-serif;
    font-size: 1.25rem
}
span.footer__credit {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: 400;
    font-size: 0.875rem
}

/* ###
LAYOUT
### */

body {
    grid-template-rows: 5rem 1fr 3lh
}
header {
    display: flex;
    justify-content: space-evenly;
    place-items: center
}
header > div > nav > ul {
    display: flex;
    gap: 2rem;
    padding: 0.125rem
}
main {
    margin: 0 0.25rem;
    text-align: center;
    place-content: center
}
@media screen and (orientation:portrait) {
    main { place-content: baseline }
}
form { 
    margin: 0 auto;
    max-width: min(99vw, 24rem);
    max-width: min(99dvw, 24rem);
}
legend { padding: 0.375rem 1rem }
form.new,
fieldset {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1rem
}
form.new > label { 
    display: flex;
    gap: 0.375rem
}
form.new > label > input { 
    max-width: 55dvw;
    max-width: 55vw
}
form > button,
fieldset > button {
    padding: 0.375rem 1rem;
    margin: 0.375rem auto;
    border-radius: 0.125rem
}
footer {
    text-align: center
}

/* ###
COLOUR
### */

* { color: goldenrod }
*.engraved {
    color: transparent;
    background: goldenrod;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: -4px 2px 2px rgba(15, 15, 15, 0.4)
}
body {
    background-image: url("../images/background/2025.png");
    background-size: cover;
    background-position: center;
}
form > fieldset {
    border: 2px solid goldenrod;
    border-style: outset
}
form > label > input,
form > fieldset > label > input { color: #131313 }
form > button,
form > fieldset > button {
    background-color: goldenrod;
    color: #131313;
    border: 2px solid gold;
    border-style: outset
}
form > button:hover,
form > fieldset > button:hover { background-color: gold }
a.clickable:hover { outline: 1px solid goldenrod }