:root {
    /* Colors */
    --accent-light: #ffd505;
    --accent: #ff8000;
    --accent-dark: #321e50;
    --white: #fff;
    --bg-light: #868686;
    --bg: #545454;
    --bg-dark: #222222;
}

/*
sizing: margin(border(padding(widthxheight)))

margin: to position element relative to others
padding: to position elements within
*/

body {
    height: 100vh;
    width: 100vw;
    size: portrait;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;

    /* coloring */
    accent-color: var(--accent);
    background-color: var(--bg);
}

input, select, label, div {
    font-size: 7.5vmin;
}

.frame {
    display: flex;
    flex-direction: column;
    row-gap: 2.5vmin;

    margin: 5vmin;
    border-radius: 5vmin;
    padding: 5vmin;

    text-align: left;
    background-color: var(--bg-light);
}

select:focus {
    outline: var(--accent) solid 1vmin;
}

/* NOTE:
I used focus-visible so range and checkbox are not outlined while interacting
with a mouse, but are outlined if selected via the TAB-key. */
input:focus-visible {
    outline: var(--accent) solid 1vmin;
}

.round {
    border-radius: 2.5vmin;
}

.output {
    font-family: Consolas, monospace;
    text-align: center;
    color: var(--accent);
    background-color: var(--bg);
}

/* prevent outline for output */
.output:focus-visible {
    outline: none;
}

/* ================ Toast =================================================== */

#toast {
    text-align: center;
    opacity: 0;  /* hidden by default */

    position: absolute;
    z-index: 1;  /* show above other content */
    bottom: -5vmin;  /* at the bottom by default */

    margin: 5vmin;
    border-radius: 5vmin;
    padding: 5vmin;
    width: calc(100vw - 20vmin);

    color: var(--accent);
    background-color: var(--bg-dark);

    transition: all 1s;
}

/* NOTE:
This class is added and removed by js to show and hide the toast. The animation
(fade in, movement) is handled by the transition above. */
#toast.show {
    opacity: 1;
    bottom: 15vmin;
}