:root {
    --font-size : calc(1rem + (5vw / 12));
    --border    : url("img/border.png");
    --bg        : url("img/flowers.jpg");
    --accent    : #83B9FF;
}

html {
    background-color: var(--accent);
    background-image: var(--bg);
    background-size: 180px;
    scrollbar-gutter: stable;
    overflow: auto;
    scrollbar-color: var(--accent) black;
}

body {
    font-size: var(--font-size);
}

#page {
    display: block;
    width: 60%;
    margin: 1em auto;
    padding: 1em 2em;
    border-image: var(--border)  28 fill /  28px / 0 round;
}

.center {
    text-align: center;
}

details {
    display: block;
    margin: 5px auto;
    width: 80%;
    padding: 1em 2em;
    border-image: var(--border)  28 fill /  28px / 0 round;
}

summary {
    cursor: pointer;
}

hgroup {
    text-align: center;
}

hgroup h1 {
    font-size: 1.5em;
}

hgroup p,
hgroup h1 {
    margin: 0;
}

a {
    text-decoration:  underline wavy 1px;
    color: purple;
}
a:hover {
    color: darkgreen;
}

hr {
    display: block;
    margin: 5px auto;
    width: 70%;
    border: none;
    border-bottom: var(--accent) dotted 8px;
}

@media only screen and (max-width: 700px) {
    #page {
        width: calc(95% - 4em);
    }
}