* {
    box-sizing: border-box;
}

:root {
    --color-red:red;
    --color-orange: orange;
    --color-yellow: yellow;
    --color-green: green;
    --color-cyan: cyan;
    --color-blue: blue;
    --color-violet: violet;
    --color-magenta: magenta;

    --gap: 10px;
    --side: 3rem;

    scroll-behavior: smooth;
}

body {

    margin: 0;
    font-family: 'Atkinson Hyperlegible';

}

h2, p.question-text {
    text-align: center;
}

h1 {
    background-color: white;
    padding: 0.8rem 0.3rem;
    text-align: center;
    border: 3px solid black;
    box-shadow: 5px 5px black;
    border-radius: 3px;
    font-size: 3rem;
    max-width: 300px;
}

.arrow-start {

    text-align: center;
    color: black;
    font-weight: 100;
    letter-spacing: .01em;
    box-sizing: border-box;
    font-size: 2rem;
    transform: scale(1.5, 0.5);
    text-shadow: 0 -1rem currentColor;
    animation: bounce 2s infinite;
    transition: opacity 1s 2s;
    margin-top: 2rem;
    max-width: 20px;
    margin-right: auto;
    margin-left: auto;
}

.arrow-start a {
    text-decoration: none;
    color: inherit;
}

@keyframes bounce {

    0%, 20%, 50%, 80%, 100% {
        transform: scale(1.5, 0.5) translateY(0);
    }
    40% {
        transform: scale(1.5, 0.5) translateY(-30px);
    }
    60% {
        transform: scale(1.5, 0.5) translateY(-15px);
    }
}



audio {
    font-family: 'Atkinson Hyperlegible';
}

.page {
    width: 100%;
    height: 100vh;
}

.first-page {
    display: grid;
    place-content: center;
    position: relative;
}

.rainbow {

    /*animation: move 3s infinite;*/
    --angle: 90deg;

    background: linear-gradient(
        var(--angle),
        red 12.5%,
        orange 12.5% 25%,
        yellow 25% 37.5%,
        green 37.5% 50%,
        cyan 50% 62.5%,
        blue 62.5% 75%,
        violet 75% 87.5%,
        magenta 87.5%
    );

    /*animation: turn 2s infinite;*/
}

/*
@keyframes turn {
    0%, 100% {
        --angle: 0deg;
    }

    50% {
        --angle: 90deg;
    }
}
*/
/*

@keyframes move {

    0%, 100% {

        background: linear-gradient(
            to right,
            red 12.5%,
            orange 12.5% 25%,
            yellow 25% 37.5%,
            green 37.5% 50%,
            cyan 50% 62.5%,
            blue 62.5% 75%,
            violet 75% 87.5%,
            magenta 87.5%
        );

    }

    50% {

        background: linear-gradient(
            to bottom,
            red 12.5%,
            orange 12.5% 25%,
            yellow 25% 37.5%,
            green 37.5% 50%,
            cyan 50% 62.5%,
            blue 62.5% 75%,
            violet 75% 87.5%,
            magenta 87.5%
        );

        /*background: linear-gradient(
            to right,
            magenta 12.5%,
            red 12.5% 25%,
            orange 25% 37.5%,
            yellow 37.5% 50%,
            green 50% 62.5%,
            cyan 62.5% 75%,
            blue 75% 87.5%,
            violet 87.5%
        );*/
        /*

    }


}

*/

.halftone {

    --dotSize: 0.25rem;
    --bgSize: 1.35rem;
    --bgPosition: calc(var(--bgSize) / 2);

    --stop1: 0.06rem;
    --stop2: 0.65rem;

    background: white;
    filter: contrast(50);

    mix-blend-mode: multiply;

}

.halftone::after {

    /* Cover our element */
    content: '';
    position: absolute;
    inset: 0;
  
    background-image: radial-gradient(
        circle at center,
        black var(--stop1),
        transparent var(--stop2)
    ), radial-gradient(
        circle at center, 
        black var(--stop1),
        transparent var(--stop2)
    );
    background-size: var(--bgSize) var(--bgSize);
    background-position: 0 0, var(--bgPosition) var(--bgPosition);

    mask-image: linear-gradient(rgb(0 0 0), rgb(0 0 0 / 0.5));
    -webkit-mask-image: linear-gradient(rgb(0 0 0), rgb(0 0 0 / 0.5));

}

.halftone::before {

    --color1: magenta;
    --color2: yellow;

    content: '';
    position: absolute;
    inset: 0;

    background: linear-gradient(45deg, var(--color1), var(--color2));
    /*animation: turn 2s infinite;*/
}

/*

@keyframes turn {

    0%, 100% {

        --color1: magenta;
        --color2: cyan;

    }

    50% {
        --color1: cyan;
        --color2: magenta;
    }
    
}*/

.container-survey {

    border: 20px solid white;
    background-color: steelblue;
    height: 100vh;
    width: 100vw;

}

.container-song-question {
    position: relative;
    width: 100%;
    height: 100vh;
    border-top: 3px solid white;
    display: grid;
    place-content: center;
}

.container-song-question canvas,
.first-page canvas {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*border: 1px solid purple;*/
}

.container-inner-question {

    width: 350px;
    max-width: 100%;
    margin: 2rem auto 0;
    border: 3px solid black;
    box-shadow: 5px 5px black;
    border-radius: 3px;
    background-color: white;
    padding: 1rem;

}

audio {
    display: block;
}

.container-player > * {
    margin: 0 auto;
}

.container-player {
    margin: 0 auto;
    margin-top: 1em;
    /*display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;*/
}

.container-player figcaption {
    margin-bottom: 1em;
    text-align: center;
}

.container-palette {
    margin-top: 2em;
    text-align: center;
}

.palette {
    display: grid;
    grid-template-columns: repeat(4, var(--side));
    grid-template-rows: repeat(2, var(--side));
    gap: var(--gap);
    place-content: center;
    padding: var(--gap);

}

.swatch {
    --color: grey; /* will be set by JS */
    border: calc(var(--gap) / 3) solid var(--color); 
    width: 100%;
    height: 100%;
    background-color: var(--color);
    border-radius: 5px;
}

.swatch:hover {
    border-color: grey;    
}

.swatch.selected {

    border-color: black;

}

/* FORM */

.form-container {
    margin-top: 1rem;
    border-bottom: 5px dotted crimson;

}

form, .form-introduction {
    /* Center the form on the page */
    margin: 0 auto;
    width: 400px;
    max-width: 100%;
    padding: 1em;
    /*border: 1px solid #ccc;
    border-radius: 1em;*/
}

form ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

form li + li {
    margin-top: 1.5em;
}

form label {
    /* Uniform size & alignment */
    text-align: left;
}

input[type="radio"] {
    margin-top: -.1em;
    vertical-align: middle;
}

fieldset {
    border-color: #eee;
}

fieldset div {
    font-size: .8em;
}

fieldset div + div {
    margin-top: .5em;
}


input,
textarea {
    /* To make sure that all text fields have the same font settings
    By default, textareas have a monospace font */

    /* Uniform text field size */
    box-sizing: border-box;

    /* Match form field borders */
    border: 1px solid #999;
}

input[type="number"] {
    width: 3rem;
}

input:focus,
textarea:focus {
    /* Additional highlight for focused elements */
    border-color: #000;
}

textarea {

    height: 5em;
    display: block;
    margin-top: .5em;
    width: 100%;
}

p.errors-text {
    color: crimson;
}

p.errors-text[data-status='sending'] {
    color: black;
}

p.errors-text[data-status='sent'] {
    color: darkgreen;
    text-align: center;
}

button {

    display: block;
    margin: 2rem auto;
    padding: .5em;
    font-size: 1em;
    font-family: inherit;
    width: 100px;

}

p.back-link.hidden {
    display: none;
}

/* snap

.container-questions {
    overflow: scroll;
    height: 100vh;
    scroll-snap-type: block mandatory;
}

.container-song-question {
    scroll-snap-align: start;
}

*/