@font-face { font-family: Calistoga; src: url(/Calistoga-Regular.woff2); font-weight: normal; font-style: normal; } :root { --hex_side: 40px; font-size: 16px; } * { margin: 0; font-family: Georgia, 'Times New Roman', Times, serif; } body { touch-action: manipulation; } body.game-over { background-color: #9b59d0; } .theme-default { --background-1: #FFE9B3; --background-2: #F0DBB0; --background-3: #DFDCB9; --background-4: #F9F6D3; --line-color: #000000; --rail-line-color-1: #ff5349; --background-combine-possible: #BEE5BF; --background-combine-not-possible: #CC8B86; } .theme-sam-mode { --background-1: #f65b74; --background-2: #f72078; --background-3: #23b0bd; --background-4: #0df7db; --line-color: #000000; --rail-line-color-1: #6d49ff; --background-combine-possible: #4fc753; --background-combine-not-possible: #d82a1d; } .theme-enby-mode { --background-1: #ffffff; --background-2: #fff433; --background-3: #9b59d0; --background-4: #000000; --line-color: #c43939; --rail-line-color-1: #49fcff; --background-combine-possible: #4fc753; --background-combine-not-possible: #d8931d; } body { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 3rem 1fr auto 2fr; grid-template-areas: ". h ." ". c ." "a g ." ". e ."; } #switch-to-desktop { display: none; } #switch-to-mobile { display: none; } body.desktop #desktop-link { display: none; } body.mobile #mobile-link { display: none; } @media screen and (max-width: 727.29999993px) { body.desktop #switch-to-mobile { display: block; position: fixed; background-color: white; border-color: lightgray; border-style: solid; border-width: 2px; border-radius: 1rem; z-index: 10; height: 300px; width: 200px; left: calc(50vw - 100px); top: calc(50vh - 150px); padding: 2rem; box-sizing: border-box; } } @media screen and (min-width: 727.29999993px) { body { grid-template-columns: 1fr 727.29999993px 1fr; grid-template-rows: 3rem 2rem 620px 1fr; } body.mobile #switch-to-desktop { display: block; position: fixed; background-color: white; border-color: lightgray; border-style: solid; border-width: 2px; border-radius: 1rem; z-index: 10; height: 300px; width: 500px; left: calc(50vw - 250px); top: calc(50vh - 150px); padding: 2rem; box-sizing: border-box; } .adsbygoogle { display: block; } } #game-field { grid-area: g; } .spacer { flex-grow: 1; } .adsbygoogle { display: none; grid-area: a; } #counter { grid-area: c; font-size: 1rem; margin: auto; } #settings { grid-area: s; } #enter-button-div { grid-area: e } body.game-over header, body.game-over #counter { color: white; } header { grid-area: h; display: flex; flex-direction: row; } header>h1 { line-height: 2rem; margin: 0.5rem; } header>details { /* height: 2rem; */ line-height: 2rem; margin: 0.5rem; z-index: 1; } header>details>summary { background-color: lightblue; border-radius: 10px; cursor: pointer; font-size: 1rem; -webkit-tap-highlight-color: transparent; border-color: lightgray; border-width: 2px; border-style: solid; } header>details>summary:active { background-color: white; } header>details>div.details { position: absolute; right: 0.5rem; background-color: white; box-shadow: 2px 2px 20px 7px lightblue; border-color: lightgray; border-width: 2px; border-style: solid; border-radius: 10px; display: flex; flex-direction: column; } #settings_themes { display: flex; flex-direction: row; } #settings_platforms { display: flex; flex-direction: row; } #settings_themes>*, #settings_platforms>* { line-height: 2rem; margin: 0.5rem; color: black; font-size: 1rem; } #settings_themes>* { background-color: lightblue; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; border-color: lightgray; border-width: 2px; border-style: solid; } #settings_themes>*:active { background-color: white; } /* header>details>div.details>*:hover { background-color: #0df7db; } */ h1 { font-family: Calistoga; } #game-field.mobile { display: grid; grid-template-rows: repeat(8, calc(0.5 * var(--hex_side)) var(--hex_side)) calc(0.5 * var(--hex_side)); grid-template-columns: repeat(11, calc(0.8660254038 * var(--hex_side))); --hex_side: 35px; } #game-field.desktop { display: grid; grid-template-rows: repeat(10, calc(0.5 * var(--hex_side)) var(--hex_side)) calc(0.5 * var(--hex_side)); grid-template-columns: repeat(21, calc(0.8660254038 * var(--hex_side))); } #game-field div { font-size: 8px; text-align: center; line-height: calc(0.8660254038 * var(--hex_side) * 2); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); position: relative; } #game-field div svg { position: absolute; height: 100%; width: 100%; top: 0; left: 0; } #enter-button { padding: 5px; width: calc(100% - 10px); height: 5rem; -webkit-tap-highlight-color: transparent; font-size: 1rem; border-radius: 10px; background-color: lightblue; border-color: lightgray; border-width: 2px; border-style: solid; cursor: pointer; } #enter-button:active { background-color: white; } body.game-over #enter-button { background-color: #ffffff79; font-size: 2rem; font-family: Calistoga; cursor: not-allowed; } /* 1 0.8660254038 0.5 */