@font-face {
    font-family: "Amarante";
    src: local("Amarante"),
        url("Amarante-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Averia Libre";
    src: local("Averia Libre Regular"),
        url("AveriaLibre-Regular.tff") format("truetype");
}

:root {
    --font-size     : calc(1rem + (1.2vw / 5));
    --font-header   : "Amarante", serif;
    --font-main     : "Averia Libre", sans-serif;

    --header-color  : linear-gradient(180deg, #AD5DFF 0%, #E76FFF 35%, #FFD066 100%);
    --main-color    : white;
    --accent-color  : #D19200;
    --accent-color2 : #5A139E;
    --fg-color      : #00000044;
    --roof-color    : #CE825C;
    --wall-color    : mediumpurple;
    --floor-color   : #771E62;

    --img-cats      : url("trickortreat.png");
    --img-bg        : url("background.png");
    --img-border    : url("borderimage.png");

}

body, html {
    overflow-y: hidden;
}

html {
    width: 100%;
    height: 100%;

    background-image: var(--img-cats), var(--img-bg);
    background-size: 25%, auto;
    background-repeat: no-repeat, repeat;
    background-position: bottom left;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: var(--font-size);
    font-family: var(--font-main);

    display: grid;
    grid-template-columns: 29% auto 9%;
    grid-template-rows: 5% auto 5%;
    grid-template-areas: "x roof y"
                         "x main y"
                         "x floor y";
}

#roof {
    grid-area: roof;
    border-bottom: 5vh solid var(--roof-color);
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    padding: 0em 1em;
}

#floor {
    grid-area: floor;
    background: var(--floor-color);
    height: 5vh;
}

#page {
    grid-area: main;
    display: block;
    width: calc(88% - 3em);
    height: calc(95% - 3em);
    /* height: calc(100% - 1em); */
    margin: auto;
    text-align: center;
    color: var(--main-color);

    border-image-source: var(--img-border);
    border-image-slice: 290 266 293 269;
    border-image-width: 1.2em;
    border-image-outset: 1.5em;
    border-image-repeat: repeat repeat;
    border-radius: 15px;

    padding: .5em;
    background: var(--fg-color);

    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    scrollbar-color: var(--floor-color) var(--roof-color);
}

header div {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr;
    justify-content: space-around;
    grid-gap: 2em;
}

header h1:before {
    content: "\1F383";
    color: white;
    background: none;
}

header h1:after {
    content: "\1F383";
    color: white;
    background: none;
}

header p { width: 100%; }

header div p:nth-child(1) {
    text-align: right;
}
header div p:nth-child(2) {
    text-align: left;
}

time { font-style: oblique; }

summary, a { cursor: pointer; }
a { color: var(--accent-color); }
a:hover { color: var(--main-color); }

h1, h2, h3, h4, h5, h6, summary {
    font-family: var(--font-header);
    color: transparent;
    background: var(--accent-color);
    background: var(--header-color);
    -webkit-background-clip: text;
    background-clip: text;
}

h2 { margin-top: 0px; }

h2.prompt:before {
    content: "\1F36B  ";
    color: white;
    background: none;
}

h2.prompt:after {
    content: " \1F36B";
    color: white;
    background: none;
}

h2.entry:before {
    content: "\1F36C  ";
    color: white;
    background: none;
}

h2.entry:after {
    content: " \1F36C";
    color: white;
    background: none;
}

details {
    display: block;
    margin: auto;
    margin-top: 1em;
    width: 80%;

    border: solid 2px var(--accent-color);
    border-image: var(--header-color) 1 100%;
}

summary {
    font-size: 1.5em;
    list-style: none;
}

summary:before {
    content: "\1F36D \2192";
    color: white;
    background: none;
    float: left;
}

summary:after {
    content: "\1F36D \2192";
    color: white;
    background: none;
    float: right;
    transform: scaleX(-1);
}

details[open] summary:before {
    content: "\2193 \1F36D";
    color: white;
    background: none;
    float: left;
    transform: scaleX(-1);
}

details[open] summary:after {
    content: "\2193 \1F36D";
    color: white;
    background: none;
    float: right;
    transform: scaleX(1);
}

ul {
    text-align: left;
    list-style-type: '🍭 ';
}

header h1 {
    font-size: 3em;
    margin: 0;
}

/* Forms */

form {
    display: grid;
    grid-auto-flow: row;
    grid-gap: .5em;
}

form input[type=text] {
    border: solid 2px var(--accent-color);
    padding: 5px;
    font-family: var(--main-font);
    font-size: var(--font-size);
}

form input[type=text]:focus {
    border: solid 2px var(--accent-color2);
    outline: solid 2px var(--accent-color);
}

/* -- */

@media only screen and (max-width: 800px) {
    body {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "main";
    }

    #roof, #floor { display: none; }

    html {
        background-position: bottom;
        background-size: 100px, auto;
    }

    body, html {
        overflow-y: auto;
    }
}

@media (prefers-color-scheme: light) {
  :root {
      --fg-color: #CCB6D7ff;
      --main-color: #140526;
      --header-color: linear-gradient(180deg, #5A139E 0%, #8C32E7 35%, #D19200 100%);
  }

  a { color: var(--accent-color2); }
}