dialog {
     max-width: 50%;
     text-align: center;
}

body {
     background-color: black;
}

#app-container {
     display: flex;
     width: 100%;
     height: 100%;
}

#app {
     background-color: black;
     display: flex;
     justify-content: center;
     flex-direction: column;
     max-width: 95vh;
     width: 100%;
     height: 100%;
}

#top {
     height: 5%;
     width: 100%;
     align-self: center;
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     border-width: 2;
     border-color: white;
     border-style: solid;
}

.controller {
     height: 100%;
     font-size: 1em;
}

.controller:hover {
     cursor: pointer;
}

#last-turn {
     field-sizing: content;
}

#turn-time {
     field-sizing: content;
}

#menu-popover {
     width: 20%;
}

#menu-list {
     display: flex;
     flex-direction: column;
}

.menu-item-button {
     font-size: 1.25em;
     text-align: center;
     align-self: center;
     margin-top: 2%;
}

.menu-item-button:hover {
     cursor: pointer;
}

#menu-button {
     anchor-name: menu-button-anchor;
     font-size: 1.5em;
}

#undo-button {
     font-size: 1.75em;
}

#menu-button:hover {
     cursor: arrow;
}

#menu-popover:popover-open {
     position-anchor: menu-button-anchor;
     top: anchor(bottom);
     left: anchor(right);
     transform: translate(-100%, 0%);
     margin: 0;
}

.close-modal {
     align-self: flex-end;
}

#bottom {
     height: 5%;
}

#board-row-container {
     background-color: gray;
     border-color: white;
     border-style: solid;
     border-width: 2;
     width: 100%;
     display: flex;
     align-self: center;
}

#board-container {
     background-color: gray;
     width: 100%;
     height: 100%;
     align-self: center;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
}

#row-ids-container {
     height: 100%;
}

#row-ids-top {
     height: 4%;
     width: 100%;
}

#row-ids {
     height: 96%;
     display: flex;
     flex-direction: column;
     width: nil;
}

.row-id {
     color: black;
     font-size: 1.5em;
     flex: 1;
     align-content: center;
     padding-left: 6px;
}

#column-ids {
     width: 95%;
     height: 4%;
     display: flex;
     flex-direction: row;
}

.column-id {
     color: black;
     text-align: center;
     font-size: 1.5em;
     flex: 1;
}

#board {
     width: 95%;
     height: 95%;
     display: flex;
     flex-direction: column;
}

.board-row {
     width: 100%;
     flex: 1;
     display: flex;
     flex-direction: row;
}

.cell-container {
     container-type: size;
     flex: 1;
     height: 100%;
}

.board-cell {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
}

.cell-container .board-cell {
     font-size: 95cqmin;
     white-space: nowrap;
     overflow: hidden;
}

.modal-top {
     display: flex;
     width: 100%;
     justify-content: flex-end;
}


@media (width < 70vh) {
.app-margin {
     flex: 0;
}

#app {
     flex: 1;
}

#board-row-container {
     aspect-ratio: 1 / 1;
}

}
@media (width >= 70vh) {
.app-margin {
     flex: 10vh;
}

#board-row-container {
     width: 70vh;
     height: 70vh;
}

#top {
     width: 70vh;
}

}
@media (width >= 75vh) {
.app-margin {
     flex: 10vh;
}

#board-row-container {
     width: 75vh;
     height: 75vh;
}

#top {
     width: 75vh;
}

}
@media (width >= 80vh) {
.app-margin {
     flex: 10vh;
}

#board-row-container {
     width: 80vh;
     height: 80vh;
}

#top {
     width: 80vh;
}

}
@media (width >= 85vh) {
.app-margin {
     flex: 10vh;
}

#board-row-container {
     width: 85vh;
     height: 85vh;
}

#top {
     width: 85vh;
}

}
@media ((width < 700px) or (height < 700px)) {
#menu-button {
     font-size: 1.25em;
}

#undo-button {
     font-size: 1.25em;
}

.row-id {
     font-size: 1.25em;
}

.column-id {
     font-size: 1.25em;
}

}
@media ((width < 600px) or (height < 600px)) {
#menu-button {
     font-size: 1em;
}

#undo-button {
     font-size: 1em;
}

.controller {
     font-size: 1em;
}

.row-id {
     font-size: 1em;
}

.column-id {
     font-size: 1em;
}

}