html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

* {
    background-color: black;
}

#layers {
    height: 100%;
    position: relative;
}

canvas {
  position: absolute;
}

#background {
    height: 100%;
    width: 100%;
    z-index: 1;
    position: absolute;

    --0: 20%;
    --1: 40%;
    --2: 60%;
    --3: 80%;
    background-image: linear-gradient( 
        #5BCEFA, #5BCEFA var(--0),
        #F5A9B8 var(--0), #F5A9B8 var(--1),
        #FFF var(--1), #FFF var(--2),
        #F5A9B8 var(--2), #F5A9B8 var(--3),
        #5BCEFA var(--3), #5BCEFA
        );
}

#board {
    z-index: 2;
    height: 100%;
    width: 100%;
    background: none;
}

#ui {
    z-index: 3;
    height: 100%;
    width: 100%;
    background: none;
}

#pattern_search {
    z-index: 4;
    position: absolute;
    width: 50%;
    align-self: center;
    top: 25%;

    padding: 0;
    margin: 0;
    border-radius: 1vmin;

    color: white;
    font-size: 3vmin;
}

body:fullscreen > #layers > #ui[paused="false"] {
    cursor: none;
}