#drawing {
    display: inline-grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(4, 1fr);

    color: black;

    padding: 50px;

    position: absolute;
    top: 100%;
    left: 100%;
    transform: translate(-100%, -100%);
}

.drawingFace {
    display: inline-grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    margin: 2px;
}

.grid {
    width: 20px;
    height: 20px;
    border: solid 1px;
}

.placeholder {
    width: 60px;
    height: 60px;
}

#timer {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%); 
    font-size: xx-large;
}


#scrambleContainer {
    display: flex;
    margin: 5px;
    padding: 15px;
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#solves {
    padding: 25px;

    display: block;
    width: 20%;
    height: 40%;
    overflow-y: scroll;

    position: absolute;
    top: 100%;
    transform: translate(-1%, -100%);
}

.fakeButton {
    cursor: pointer;
    user-select: none;
}

#scramble {
    cursor: pointer;
}

#timeDifference {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#dim {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
}

#help, #settings {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: 75%;
    padding: 10px;
    overflow-y: scroll;
}

#closeHelp, #closeSettings {
    cursor: pointer;
    color: red;
    position: absolute;
    top: 0%;
    left: 97%;
    transform: translate(-50%, -50%);
}

#openHelp, #openSettings {
    cursor: pointer;
}

#menus {
    padding: 20px;
    width: 75px;
    position: absolute;
    top: 0%;
    left: 100%;
    transform: translate(-105%, 0%);
    display: block;
}

.unselectable {
    user-select: none;
}

#touchTrigger {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: 75%;
}