html, body { overflow-x: hidden; } body { margin: 0; background: rgb(30, 36, 119) ; outline: 0; position: relative; } :root{ --tictactoe_n: 3; --button-margin: 0.5vh; --tile-size: calc((100vh / (var(--tictactoe_n) * var(--tictactoe_n))) - 2 * var(--button-margin)); --opacity: 1; --border-radius: 1vh; --sidebar-width: 25vh; --ground-color: rgb(30, 36, 119) ; --board-size: calc(var(--tictactoe_n) * var(--tictactoe_n) * var(--tile-size) + (var(--tictactoe_n) * var(--tictactoe_n) + var(--tictactoe_n)) * var(--button-margin) ); --sidebar-height: calc(var(--board-size) - 2 * var(--border-radius)); } /* override settings on portrait mode: */ @media (orientation: portrait) { :root{ --button-margin: 0.5vw; --tile-size: calc((100vw / (var(--tictactoe_n) * var(--tictactoe_n))) - 2 * var(--button-margin)); --border-radius: 1vw; --sidebar-width: calc(var(--board-size) - 2 * var(--border-radius)); --sidebar-height: 15vw; } } /* unvisited link */ a:link { color: white; } /* visited link */ a:visited { color: white; } .main-container { text-align: center; white-space: nowrap; padding-top: calc(50vh - 0.5 * (var(--board-size))); } /* override settings on portrait mode: */ @media (orientation: portrait) { .main-container { white-space: normal; padding-top: calc(50vh - 0.5 * var(--board-size)); } } .grid-tile { position: absolute; width: var(--tile-size); height: var(--tile-size); float: center; background: none; } .grid-button { border-radius: var(--button-margin); margin: var(--button-margin); width: calc(var(--tile-size) - (var(--button-margin) * 2)); height: calc(var(--tile-size) - (var(--button-margin) * 2)); display: inline-block; outline: 0; font-size: calc(3 * var(--border-radius)); transition-duration: 0.1s; } .grid-button:focus { outline: 0!important; } .grid-container { border-radius: var(--border-radius); width: calc(var(--board-size)); height: calc(var(--board-size)); background: none; display: inline-block; transition-duration: 0.5s; } .subgrid-container { border-radius: var(--button-margin); padding: var(--button-margin); margin: var(--button-margin); width: calc(var(--tictactoe_n) * var(--tile-size)); height: calc(var(--tictactoe_n) * var(--tile-size)); background: rgba(255, 255, 255,0.05); display: inline-block; transition-duration: 0.5s; } .subgrid-container-activated { border-radius: var(--button-margin); padding: var(--button-margin); margin: var(--button-margin); width: calc(var(--tictactoe_n) * var(--tile-size)); height: calc(var(--tictactoe_n) * var(--tile-size)); background: rgba(255, 255, 255, 0.2); display: inline-block; transition-duration: 0.5s; } .sidebar-container { border-radius: var(--border-radius); padding: var(--border-radius); vertical-align: top; background: rgba(255, 255, 255, 0.05); display: inline-flex; justify-content: space-between; flex-direction:column; height: var(--sidebar-height); width: var(--sidebar-width); position: relative; transition-duration: 0.5s; } /* override settings on portrait mode: */ @media (orientation: portrait) { .sidebar-container { flex-direction:row; padding: none; } } .create-game-container { border-radius: var(--border-radius); padding: var(--border-radius); top: 0; background: none; display: inline-block; vertical-align: middle; } .control-container { border-radius: var(--border-radius); padding: var(--border-radius); top: 0; background: none; display: inline-block; vertical-align: middle; } .setting-container { border-radius: var(--border-radius); padding: var(--border-radius); top: 0; background: none; display: inline-block; vertical-align: middle; } .info-container { border-radius: var(--border-radius); padding: var(--border-radius); bottom: 0; display: inline-block; vertical-align: middle; text-align: center; background: none; white-space: normal; } .sidebar-label { color: white; display: flex; flex-direction: column; font-size: calc(2 * var(--border-radius)); width: calc(var(--sidebar-width) - 4 * var(--border-radius)); text-align: left; } @media (orientation: portrait) { .sidebar-label { width: calc(var(--sidebar-width) * 0.3); } } .sidebar-button { border-radius: var(--border-radius); margin: var(--border-radius); border: none; outline: 0; transition-duration: 0.3s; background: rgba(0, 0, 0, 0.5); color: rgb(255, 255, 255); font-size: calc(3 * var(--border-radius)); height: calc(4 * var(--border-radius)); width: calc(var(--sidebar-width) - 4 * var(--border-radius)); vertical-align: middle; display: flex; flex-direction: column; } @media (orientation: portrait) { .sidebar-button{ width: calc(0.25 * var(--sidebar-width)); height: calc(0.3 * var(--sidebar-height)); } } .sidebar-button:hover { background: rgba(255, 255, 255, 0.2); } .sidebar-button:active { background: rgba(255, 255, 255, 0.4); } .sidebar-input { border-radius: var(--border-radius); margin: var(--border-radius); border: none; outline: 0; transition-duration: 0.3s; background: rgba(0, 0, 0, 0.5); color: rgb(255, 255, 255); font-size: calc(3 * var(--border-radius)); height: calc(4 * var(--border-radius)); width: calc(var(--sidebar-width) - 4 * var(--border-radius)); vertical-align: middle; display: flex; flex-direction: column; text-align: center; } @media (orientation: portrait) { .sidebar-input{ height: calc(0.3 * var(--sidebar-height)); width: calc(0.25 * var(--sidebar-width)); } }