body {
    margin-top: min(1vw, 1vh);
    margin-bottom: min(1vw, 1vh);
    margin-left: min(1vw, 1vh);
    margin-right: min(1vw, 1vh);
    font-family: Monospace;
    text-align: center;
    color: black;
}
div.game {
    display: flex;
}
div.controlPanel {
    display: flex;
    flex-direction: column;
}
div.controls {
    display: grid;
}
button {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-inline: 0px;
    border-width: 1px;
    border-radius: 20%;
    color: black;
    background-color: platinum;
}
button:disabled {
    color: grey;
    background-color: platinum;
}
div.board {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
}
div.innerBoard {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    border-style: solid;
    border-width: 2px;
}
div.cell {
    display: grid;
    border-style: solid;
    border-width: 1px;
}
div.contents {
    grid-column: 1;
    grid-row: 1;
    background-color: white;
    padding-left: 2%;
    padding-top: 5%;
}
div.notes {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    border-style: hidden;
}
div.note {
    visibility: hidden;
    font-size: min(3vw, 3vh);
}
@media (orientation: landscape) {
    div.game {
        flex-direction: row;
    }
    div.board {
        height: min(98vh, 75vw);
        width: min(98vh, 75vw);
    }
    div.innerBoard {
        height: calc((min(98vh, 75vw) / 3) - 4px);
    }
    div.cell {
        height: calc((((min(98vh, 75vw) / 3) - 4px) / 3) - 2px);
    }
    div.contents {
        font-size: min(6vw, 8vh);
    }
    div.note {
        height: calc(((((min(98vh, 75vw) / 3) - 4px) / 3) - 2px) / 3);
    }
    div.controlPanel {
        width: min(calc(98vw - min(98vh, 75vw)), calc((98vh/5) * 3));
    }
    div.controls {
        grid-template-columns: auto auto;
    }
    div.keypad {
        display: grid;
        grid-template-columns: auto auto auto;
    }
    button {
        height: min(calc((98vw - min(98vh, 75vw)) / 3), calc((98vh - max(4vw, 4vh)) / 5));
        font-size: min(calc((98vw - min(98vh, 75vw))/4), calc((98vh - max(4vw, 4vh))/8));
    }
    button.controlEmoji {
        font-size: min(calc((98vw - min(98vh, 75vw))/6), calc((98vh - max(4vw, 4vh))/12));
    }
}
@media (orientation: portrait) {
    div.game {
        flex-direction: column;
    }
    div.board {
        height: min(98vw, 77vh);
        width: min(98vw, 77vh);
    }
    div.innerBoard {
        height: calc((min(98vw, 77vh) / 3) - 4px);
    }
    div.cell {
        height: calc((((min(98vw, 77vh) / 3) - 4px) / 3) - 2px);
    }
    div.contents {
        font-size: min(8vw, 6vh);
    }
    div.note {
        height: calc(((((min(98vw, 77vh) / 3) - 4px) / 3) - 2px) / 3);
    }
    div.controlPanel {
        display: flex;
        flex-direction: column;
        height: max(calc(98vh - min(98vw, 77vh)), 10vh);
        width: min(98vw, 77vh);
    }
    div.controls {
        width: 100%;
        height: calc(min(98vw, 77vh) / 9);
        grid-template-columns: auto auto auto auto;
    }
    div.keypad {
        width: 100%;
        height: calc(min(98vw, 77vh) / 10);
        display: grid;
        grid-template-columns: repeat(9, 1fr);
    }
    button {
        font-size: min(calc((98vh - min(98vw, 77vh))/2), calc((min(98vw, 77vh))/12));
    }
    button.control {
        font-size: min(calc((98vh - min(98vw, 77vh))/2), calc((min(98vw, 77vh))/15));
    }
    button.controlEmoji {
        font-size: min(calc((98vh - min(98vw, 77vh))/3), calc((min(98vw, 77vh))/18));
    }
}
@supports (text-size-adjust: auto) {
    button.control {
        text-size-adjust: auto;
    }
    button.controlEmoji {
        text-size-adjust: auto;
    }
    button.keypad {
        text-size-adjust: auto;
    }
    div.contents {
        text-size-adjust: auto;
    }
}
@supports (-webkit-text-size-adjust: auto) {
    button.control {
        -webkit-text-size-adjust: auto;
    }
    button.controlEmoji {
        -webkit-text-size-adjust: auto;
    }
    button.keypad {
        -webkit-text-size-adjust: auto;
    }
    div.contents {
        padding-left: 5%
		      padding-top: 15%;
        -webkit-text-size-adjust: auto;
    }
}