* {
    box-sizing: border-box;
}

:root {
    --main-foreground-colour: #4f0014;
    --main-background-colour: #fde1e8;
    --link-colour-default: #9c2744;
    --link-colour-hover: #ad267e;
}

*::selection {
    color: var(--main-background-colour);
    background-color: var(--main-foreground-colour);
}

html,
body {
    height: 100%;
}

html {
    font-size: 16px;

    background: var(--main-background-colour) url(background.svg) no-repeat center center fixed;
    background-size: cover;
}

body {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;

    font-family: 'Varela Round', sans-serif;
    color: var(--main-foreground-colour);
    font-size: 1.1em;
}

/* @TODO test on more screen sizes, switch to intrinsic sizing if possible */
@media only screen and (max-width: 370px) {
    html {
        font-size: 14px;
    }

    body {
        font-size: 1em;
    }
}

.heading-padding {
    padding-top: 2em;
}

.glass {
    background-image: linear-gradient(to top right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(0.2rem);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2), -1px -1px 1px white;
}

main {
    padding: calc(1em + 5%);
}

.panel {
    margin: 0 auto;
    max-width: 33em;

    padding: calc(0.1em + 5%) calc(0.3em + 5%) calc(0.3em + 5%);

    border-radius: 2em;

    /* for the double panel effect */
    position: relative;
    z-index: 100;
}

/* double panel */
.panel::before {
    content: '';
    width: 100%;
    height: calc(100% + 1em);

    top: calc(-0.7em + 4vw);
    left: calc(0.1em + 5%);

    position: absolute;

    z-index: -1;

    background-image: linear-gradient(to top right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(0.2rem);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2), -1px -1px 1px white;
    border-radius: 2em;
}

/* inner content for a panel, background is almost opaque because of the layers */
.panel-content {
    padding: 0.5em 1em;
    border-radius: 2em;
}

a {
    color: var(--link-colour-default);
    text-decoration: underline;
}

a:hover,
a:focus {
    color: var(--link-colour-hover);
    text-decoration: none;
}

a:focus,
a:focus-visible {
    outline: 2px dotted var(--main-foreground-colour);

    /* glass styles -- @TODO make this a mixin */
    background-image: linear-gradient(to top right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(0.5rem);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2), -1px -1px 1px white;
}

a.skip-navigation {
    position: absolute;
    z-index: 100;
    transform: translateY(-100%);
}

a.skip-navigation:focus {
    transform: translateY(0%);
}

nav ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style-type: none;
    justify-content: right;

    font-size: 0.8em;
}

/* @TODO can probably do this with some flex / grid magic, but hacking with a MQ for now */
@media only screen and (max-width: 500px) {
    nav ul {
        justify-content: center;
    }
}

nav ul,
nav li {
    margin: 0;
    padding: 0;
}

nav ul li {
    margin: 1em;
}

nav li a {
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 1em;

    font-weight: 500;
}

nav li a:hover,
nav li a:focus {
    /* Override glass styles so the button looks "pressed" */
    box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.2), -1px -1px 1px white;
    background-image: none;
}

footer {
    margin: auto 0 0 0;
    width: 100%;

    /* @TODO maybe make this a variable, share with nav? */
    font-size: 0.8em;
    text-align: center;
}

img {
    max-width: 100%;
    height: auto;

    border-radius: 2em;
}

footer ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
    margin: 1.5em 0;
    padding: 0;
}

footer ul li {
    max-width: 2.3em;
    margin: 0 0.5em;
}

footer ul li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0.5em;
    border-radius: 50%;
}

footer ul li a svg {
    border-radius: 0;
    min-width: 1em;
    fill: var(--link-colour-default);
}

footer ul a:hover,
footer ul a:focus {
    /* Override glass styles so the button looks "pressed" */
    box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.2), -1px -1px 1px white;
    background-color: transparent;
}

footer ul a:hover svg,
footer ul a:focus svg {
    fill: var(--link-colour-hover);
}

h2 {
    padding-top: calc(0.1em + 2vw);
}