/* Layout */

:root {
    --light: #eee8d5;
    --dark: #a0a196e0;
    --pink: #deaa8cda;
    --blue: #9396a1bb;
    --sage: #999b85;
    --yellow: #f5b32e;
    --header-font: RecoletaSemiBold, 'Averia Serif Libre', Cambria, Georgia, serif;
    --body-font: RecoletaRegular, Recoleta, 'Averia Serif Libre', Cambria, Georgia, serif;
}

body {
    background-color: var(--light);
    color: var(--dark);
    font-family: var(--body-font);
    font-size: 1.25rem;
    font-kerning: normal;
    margin: 0;
}

.pink {
    background-color: var(--pink);
    color: var(--light);
}

.blue {
    background-color: var(--blue);
    color: var(--light);
}

.sage {
    background-color: var(--sage);
    color: var(--light);
}

.smcp {
    font-variant-caps: all-small-caps;
}

.all-caps {
    text-transform: uppercase;
}

.black {
    font-family: RecoletaBlack;
}

.semibold {
    font-family: RecoletaSemiBold;
}

section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

gmp-map,
gmp-map-3d,
#gmp,
#tumadóireacht {
    height: 100vh;
}

.column {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: first baseline;
    width: 27rem;
    max-width: 80vw;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.roomy {
    margin-top: 10rem;
    margin-bottom: 10rem;
}

section>h1,
section>div#links {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

/* Typography */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--header-font);
}

a {
    color: unset;
}

aside {
    font-variant-caps: all-small-caps;
    font-weight: 300;
}

.light {
    font-family: RecoletaLight, 'Averia Serif Libre', Cambria, Georgia, serif;
    font-weight: 300;
}

.thin {
    font-family: RecoletaThin, 'Averia Serif Libre', Cambria, Georgia, serif;
    font-weight: 100;
}

section h1 {
    font-size: 5rem;
}

/* Backgrounds */

#beach {
    background-image: url('../images/beach.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: 70%;
}

#beach2 {
    background-image: url('../images/beach2.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: 70%;
}

#lovey-dovey {
    background-image: url('../images/lovey_dovey.jpg');
    background-size: cover;
    background-position-x: center;
}

#dunes {
    background-image: url('../images/dunes.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: 60%;
}

#póg {
    background-image: url('../images/póg.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: 25%;
}

/* Login screen... */

.login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

#nod-don-eolach {
    text-align: center;
    line-height: 2rem;
}

#nod-don-eolach::after {
    content: ' (…it’s Walloon)';
}

form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    max-width: 80vw;
}

button {
    font-family: var(--body-font);
    color: var(--dark);
    background-color: var(--light);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1rem;
    border: unset;
    border-radius: 4px;
    box-shadow: 0px 1px 4px #9a9a9a;
    padding: 1rem;
}

button.subtle {
    background-color: unset;
    color: var(--light);
    border-color: var(--light);
    border-style: dotted;
    border-radius: 4px;
    border-width: 1px;
}

fieldset {
    border-color: var(--light);
    border-style: dotted;
    border-radius: 4px;
    border-width: 1px;

    display: flex;
    flex-direction: column;
    gap: 1rem;

    & legend {
        font-family: var(--header-font);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        gap: .25rem;
    }

    &+fieldset {
        margin-top: 1rem;
    }
}

fieldset legend {
    font-size: 2rem;
}

fieldset>fieldset legend {
    font-size: unset;
}

input[type="password"],
input[type="text"],
input[type="email"] {
    font-size: 1.25rem;
    font-family: var(--body-font);
    font-weight: 500;
    color: var(--dark);
    background-color: var(--light);
    border: unset;
    border-radius: 4px;
    box-shadow: 0px 1px 4px #9a9a9a;
    padding: .75rem;
    max-width: 50vw;
}

select {
    font-size: 1.25rem;
    font-family: var(--body-font);
    font-weight: 500;
    padding: .75rem;

    background-color: var(--light);
    color: var(--dark);

    border-color: var(--light);
    border-style: dotted;
    border-radius: 4px;
    border-width: 1px;

    & option {
        background-color: var(--light);
    }
}

legend {
    /* Safari doesn't like this nesting otherwise . */
    z-index: 0;

    & input {
        /* Safari doesn't like this nesting otherwise . */
        z-index: 100;
    }
}

input::placeholder {
    color: var(--dark);
}

.error {
    color: var(--pink);
    font-family: RecoletaBlack;
}

#rsvp-heading {
    margin-bottom: 2.3rem;
}

.attendee-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10vh;
}

#take-me-to-rsvp {
    color: var(--light);
}

#links {
    display: flex;
    flex-flow: column;
    gap: 0.5rem;

    @media (max-width: 40rem) {
        align-self: baseline;
    }
}