:root{
    --accent-construction: #ffc800;
    --color: light-dark(#000000, #ffffff);
    --background: light-dark(#ffffff, #222222);
    --background-1: light-dark(#cccccc, #555555);
    --background-2: light-dark(#aaaaaa, #777777);

    color-scheme: light dark;

    &[data-color-scheme="light"]{
        color-scheme: light;
     }

    &[data-color-scheme="dark"]{
         color-scheme: dark;
     }
}

html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    color: var(--color);
    background-color: var(--background);
}

.round-button{
    cursor: pointer;
    padding: 5px;
    background-color: var(--background-1);
    border-radius: 50%;
    border: 1px solid var(--color);
    filter: drop-shadow(0px 0px 4px var(--background-1));
}

.round-button:hover{
    background-color: var(--background-2);
}

#container{
    width: 100%;
    height: 100%;
}

#construction-image{
    position: absolute;
    /*top: 50%;
    margin: 0;
    left: 50%;
    transform: translate(-50%, -50%);*/
    inset: 0;
    margin: auto;
    width: 300px;
    aspect-ratio: 1;

    filter: drop-shadow(0px 0px 10px var(--accent-construction));
}