* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-size: 1rem;
    font-family: 'Nunito Sans', sans-serif;
    letter-spacing: 0.01em;
}

:root {
    --dark: #441700;
    --medium: #b88b71;
    --light: #f9d5bb;
}

::selection { background-color: var(--dark); color: var(--light); }

/* layout */
body {
    color: var(--dark);
    background-color: #764127;
    height: 100%;

    background-image: url("assets/ddd_bg.png");
    background-repeat: repeat;
}

.wrapper {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

section {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 2rem 0 2rem 0;
}

.container {
    width: 90vmin;
    height: 55vmin;

    background-color: var(--medium);
    border: 2px solid var(--dark);
    border-radius: 0.5rem;
    padding: 2rem 4rem;

    overflow: scroll;
}

.buttons { display: flex; flex-flow: row nowrap; column-gap: 3rem; }

#copyarea {
    position: absolute;
    left: -10000px;
    top: -10000px;
}

/* style */
button {
    color: var(--dark);
    background-color: var(--light);

    border: 2px solid var(--dark);
    border-radius: 0.5rem;

    min-width: 7rem;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    transition: 0.4s ease-in-out;
}

button:hover, button:active { background-color: var(--medium); }

ol { columns: 3; column-gap: 4rem; }

ol > li::marker { font-weight: bolder; }

/* responsive */
@media (max-width: 700px) {
    * { font-size: 0.9rem; }
    .container { height: 100vmin; }
    img { width: 90%; }
    ol { columns: 2; }
  }