@font-face {
    font-family: 'basic title font';
    src: url('../resources/fonts/basictitlefont.woff2') format('woff2'),
    url('../resources/fonts/basictitlefont.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'basic title font';
    font-weight: 100;
    font-style: normal;
}

body,html {
    margin:0px;
    padding:0px;
}
#wrapper {
    position:relative;
    overflow: hidden;
}
#questions {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-25%);
    left:50%;
    width:75%;
}

#prompts {
    position:absolute;
    bottom: 10%;
    left: 50%;
    width:50%;
    display:none;
    z-index: 2;
}

#prompts .prompts-wrapper {
    position: relative; left: -50%;
    height:200px;
}

#questions .questions-wrapper {
    position: relative; left: -50%;
    height:200px;
}
.choice {
    color: white;
    background-color: black;
    font-size: 20px;
    font-weight: bold;
    float:left;
    text-align: center;
    cursor: pointer;
    margin-right:6%;
    padding-top: 15px;
    padding-bottom: 15px;
    -webkit-box-shadow:inset 0px 0px 0px 1px white;
    -moz-box-shadow:inset 0px 0px 0px 1px white;
    box-shadow:inset 0px 0px 0px 1px white;
}
#questions .choice {
    width: 20%;
}

#prompts .choice {
    width:45%;
}

#questions .choice:first-of-type {
    margin-left:0;
}

#questions .choice:last-of-type {
    margin-right:0;
}

#prompts .choice:first-of-type {
    margin-left:0;
    margin-right:10%;
}

#prompts .choice:last-of-type {
    margin-right:0;
}

#questions .choice .artist {
    font-size:12px;
}

.choice#prompt-option-1 {
    color:black;
    background-color: white;
}
.choice.start {
    opacity: 0;
}

#prompts .choice {
    opacity: 0;
}

#prompts .choice:hover, #questions .choice:hover {
    cursor:pointer;
    background-color:white;
    color:black;
}

.choice#prompt-option-1:hover {
    background-color: black;
    color:white;
}
video {
    z-index: 1;
    /* object-fit:scale-down; */
}

#back-to-beginning {
    position: absolute;
    left:20px;
    bottom:20px;
    cursor: pointer;
}

#back-to-beginning img {
    width:250px;
}

/**
 MEDIA QUERIES
 FUCK I HATE CSS.
 */

@media (max-width: 576px) {



}

@media (max-width: 767.98px) {

    #prompts {
        width:90%;
        bottom:0;
    }

    #questions {
        top:50%;
        left:0;
        width:100%;
        transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        margin-left:10%;
    }

    #questions .choice {
        width: 80%;
        display: block;
        margin: 0 0 10px;
    }

    #questions .questions-wrapper {
        left: 0;
    }

}

@media (max-width: 991.98px) {  }

@media (max-width: 1199.98px) {



}