@import url(https://db.onlinewebfonts.com/c/4cae1490dfd73800b6663ff609f07556?family=Prater+Serif+Regular);
@font-face {
    font-family: "Prater Serif Regular";
    src: url("https://db.onlinewebfonts.com/t/4cae1490dfd73800b6663ff609f07556.eot");
    src: url("https://db.onlinewebfonts.com/t/4cae1490dfd73800b6663ff609f07556.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/4cae1490dfd73800b6663ff609f07556.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/4cae1490dfd73800b6663ff609f07556.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/4cae1490dfd73800b6663ff609f07556.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/4cae1490dfd73800b6663ff609f07556.svg#Prater Serif Regular")format("svg");
}
*{
    animation-fill-mode: forwards;
    animation-duration: 3s;
    animation-timing-function: ease;
    transition: background-color 3s ease, filter 3s ease, opacity 3s ease;
}
body {
    margin: 0px;
    background-color: rgb(0,0,0);
    font-family: 'Lato', sans-serif;
}
.stage{
    width: 100%;
    height: 18svh;
    display: grid;
    position: relative;
    grid-template-columns: 8svw auto 8svw;
    background-color: black;
}
.performers {
    width: 100%;
    height: 30svh;
    display: grid;
    position: absolute;
    grid-template-columns: 15svw auto auto auto auto auto auto auto auto auto 15svw;
    top: -28svh;
}
#program, #controls, #music{
    position: absolute;
    text-align: center;
    width: 90svw;
    left: 5svw;
}
#program{
    top: 1svh;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto;
    padding: 0 15px;
    z-index: 5;
}
.blokje .button {
    display: block;
    margin: 3px 0;
}
#music {
    top: 9svh;
}
#controls {
    top: 15svh;
    z-index: 5;
}
.performer {
    height: 29svh;
    width: 100%;
    z-index: -1;
    margin-top: 0.5svh;
}
.performer.background {
    height: 27svh;
    margin-top: 2.5svh;
}
.performer.singer {
    height: 28.5svh;
    margin-top: 1svh;
}
.performer.singer.background {
    height: 28svh;
    margin-top: 1.5svh;
}
#main-stage {
    border-left: 4px solid #745226;
    border-right: 4px solid #745226;
}
.stairs, #main-stage{
    background-color: #e8a44c;
    display: inline-grid;
}
.stage .stairs .step {
    border-bottom: 1px solid #745226;
    box-shadow: inset 1px -2px 6px 0px
}
.lights{
    z-index: -10;
    width:100%;
    height: 82svh;
    position: relative;
    display: grid;
    background-color: black;
}
.light:has(.odd){
    background: linear-gradient(90deg, rgba(204,204,204,1) 0%, rgba(255,255,255,1) 12.5%, rgba(204,204,204,1) 25%, rgba(255,255,255,1) 37.5%, rgba(204,204,204,1) 50%, rgba(255,255,255,1) 62.5%, rgba(204,204,204,1) 75%, rgba(255,255,255,1) 87.5%, rgba(204,204,204,1) 100%);
}
.light:has(.even){
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(51,51,51,1) 12.5%, rgba(0,0,0,1) 25%, rgba(51,51,51,1) 37.5%, rgba(0,0,0,1) 50%, rgba(51,51,51,1) 62.5%, rgba(0,0,0,1) 75%, rgba(51,51,51,1) 87.5%, rgba(0,0,0,1) 100%);   
}
.patts{
    grid-template-columns: 0fr 1fr 3fr 1fr 24svw 1fr 3fr 1fr 0fr;
    height: 38vh;
}
.spiiders {
    grid-template-columns: 4svw auto auto auto auto 4svw;
    height: 20vh;
    top: 40svh;
}
.patts, .spiiders {
    display: grid;
    position: absolute;
    width: 100%;
    text-align: center;
}
#back {
    display: grid;
    position: relative;
    grid-template-columns: 0.8fr 1fr 1.2fr 1fr 1.2fr 1fr 1.2fr 1fr 1.2fr 1fr 0.8fr;
    background-color: black;
}
.light {
    height: 100%;
    text-align: center;
    display: inline-grid;
}
#back .light .bulb {
    /* filter: blur(1svw); */
}
#back .bulb{
    background-color: rgb(255, 228, 140);
    opacity: 0.6;
}
.patts .light {
    z-index: 2;
    width: 6svw;
    height: 6svw;
    margin: auto auto 0 auto;
}
.patts .light.inside {
    width: 5svw;
    height: 5svw;
}
.spiiders .light:not(.heads) {
    z-index: 2;
    width: 4svw;
    height: 4svw;
    margin: auto;
    border-radius: 50%;
}
.light.heads .bulb {
    z-index: 2;
    width: 2.5svw;
    height: 2.5svw;
    margin: auto;
}
.patts .light .bulb { 
    background: rgb(189, 107, 0);
    background: radial-gradient(circle, rgba(189,107,0,1) 0%, rgba(189,107,0,1) 50%, rgba(255,175,70,1) 100%);
    border-radius: 50%;
    border: 4px solid black;
}
.patts .light .bulb .bulb{
    width: 2.2svw;
    height: 2.2svw;
    margin: 1.7svw auto;
    border: 0px solid rgb(36, 20, 0);
    background:  rgb(255, 175, 70);
    filter: blur(0.25svw);
}
.patts .light.inside .bulb .bulb{
    width: 2svw;
    height: 2svw;
    margin: 1.25svw auto;
}
.spiiders .light .bulb { 
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255, 242, 200) 0%, rgba(255, 228, 140, 1) 60%, rgba(255, 236, 172, 1) 100%);
    border: black solid 3px;
}
#screen {
    background-color: rgba(72,72,72, 1);
    color: white;
    height: 10svw;
    z-index: 2;
    width: calc(100% - 20px);
    font-family: 'Prater Serif Regular';
    font-size: xx-large;
    border: 10px solid rgb(36, 20, 0);
}
#screen p {
    margin: 3svw auto;
}
button, .button{
    border: 1px solid rgb(36, 20, 0);
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-size: small;
    border-radius: 2px;
    background-color: white;
    padding: 2px 5px;
}
.button-stop{
    background-color: red;
    color: white;
}
.button-switch{
    background-color: rgb(255, 228, 140);
}
.button, button *{
    cursor: pointer;
}
@keyframes off {
    100% {opacity: 0;}
}
@keyframes dim {
    100% {opacity: 0.4;}
}
@keyframes on {
    100% {opacity: 0.6;}
}