:root{
    --bg0:white;
    --main: black;
    --bg1: rgb(230,230,230);
    --bg1-hov:rgb(210,210,210);
}
body{
    background:var(--bg0);
    color:var(--main);
}
#prefers{
    width:120px;
    height:50px;
    background:gray;
    cursor:pointer;
}
#prefers p{
    line-height: 50px;
}
#control-container{
    width:90%;
    margin:0 auto;
    max-width: 500px;
    background:var(--bg1);
    display:flex;
    /* flex-wrap: wrap; */
    justify-content: center;
}
.control-flex{
    width:calc(100% / 3);
    display:flex;
    flex-wrap: wrap;
    flex-flow:column;
    justify-content: center;
    align-items: center;
}
.control{
    height:70px;
    display:flex;
    justify-content: center;
    align-items: center;
    width:100%;
}
.control:hover{
    background:var(--bg1-hov);
}
.control img{
    filter: invert(var(--img-gray));
    width:50px;
}
#sample1{
    /* width:1000px;
    height:600px; */
    border:1px solid var(--main);
}
#clear{
    position:fixed;
    width:100vw;
    height:100vh;
    top:0;
    left:0;
    background: linear-gradient(70deg, rgb(72, 239, 239), rgb(255, 200, 209));
    /* display:flex; */
    display:none;
    justify-content: center;
    align-items: center;
}
#clear h1{
    font-size: 40px;
}