* {
    border-color: inherit;
    box-sizing: border-box;
    margin: 0;
    font: inherit;
}
html {
    font-family: system-ui, sans-serif;
    transition-property: background-color, border-color, color;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
}
html:has(input[id="off"]:checked) {
    --background-color: hsl(93.3, 10.3%, 10.5%);
    --color: hsl(168, 55.6%, 82.4%);
    background-color: var(--background-color);
    color: var(--color);
    border-color: var(--color);
}
html:has(input[id="lamp"]:checked) {
    --color: hsl(93.3, 10.3%, 10.5);
    --background-color: hsl(168, 55.6%, 82.4%);
    background-color: var(--background-color);
    color: var(--color);
    border-color: var(--color);
}
html:has(input[id="flash"]:checked) {
    --color: hsl(93.3, 30.3%, 17.5%);
    --background-color: hsl(168, 55.6%, 82.4%);
    background-color: var(--background-color);
    color: var(--color);
    border-color: var(--color);
}

a, a:visited {
    color: inherit;
}

header {
    display: flex;
    justify-content: center;
}

main {
    height: 95vh;
    position: relative;
}

#scene {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 7fr 3fr;
    grid-template-areas: 
    "wall"
    "floor";
}
#wall {
    background-repeat: repeat;
    background-size: 50%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    grid-area: wall;
    justify-content: center;
    align-items: center;
}
#window {
    height: 33%;
    width: 66%;
    border-collapse: collapse;
}
#window td {
    border: 2px solid #ccc;
    background-image: url('/images/rain.gif');
    background-repeat: repeat;
    background-size: 20%;
    background-position-y: 40%;
}

html:has(input[id=off]:checked) #wall {
    background-image: url("/images/Tileable1c.png");
}
html:has(input[id=lamp]:checked) #wall {
    background-image: url("/images/Tileable1b.png");
}
html:has(input#flash:checked) #wall {
    background-color: white;
}

#baseboard {
    align-self: flex-end;
    height: 1.5rem;
    width: 100%;
    background-color: #fafafa;
    border-top: 2px solid #cccccc;
}

#floor {
    grid-area: floor;
    background: repeating-linear-gradient(
  to right,
  hsl(38, 21%, 26%),
  hsl(38, 21%, 26%) 10px,
  hsl(38, 31%, 16%) 10px,
  hsl(38, 31%, 16%) 20px
);
}
html:has(input#lamp:checked, input#flash:checked) #floor {
    background: repeating-linear-gradient(
    to right,
    hsl(38, 11%, 86%),
    hsl(38, 11%, 86%) 10px,
    hsl(38, 21%, 76%) 10px,
    hsl(38, 21%, 76%) 20px
    );
    
}

fieldset {
    display: flex;
    flex-flow: row nowrap;
    inset-block-end: 0;
    inset-inline: 0;
    justify-content: space-around;
    position: absolute;
}
label {
    padding: 1rem
}
label:has(input:checked) {
    box-shadow: 0 0 4px 4px yellow;
}

button {
    appearance: none;
    background: none;
    border: none;
}

footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
}