@font-face { font-family: "Dosis"; src: url("/font/static/Dosis-Bold.ttf"); font-display: swap; } button, html, a { font-family: "Dosis"; color: #def; text-align: center; } p, a.button, h1 { display: block; width: fit-content; margin: 0 auto; } body { background-image: linear-gradient(30deg, #012, #567 60%); background-color: #456; background-attachment: fixed; } h1 { margin: 3cm auto 0; font-size: 72px; } a.button { background-color: #d71; padding: 1.2em 2em; border-radius: 1em; border: 2px solid black; font-size: 32px; margin: 1cm auto; } p { font-size: 24px; margin-top: 0.6em; } @media screen and (max-width: 600px) { h1 { font-size: 48px; } p { margin-top: 2.4em; } } #module-list { margin: 1.2cm auto 1.2cm; display: flex; flex-direction: column; width: min(calc(100% - 2.4cm), 20cm); background-color: #fff; padding: 0.6cm 0; border-radius: 1.2cm; transform-origin: top; } #module-list > .module { background-color: #012; border-radius: 0.6cm; width: calc(100% - 1.2cm); margin: 0 auto; position: relative; min-height: 3cm; } #module-list > .module + .module { margin-top: 0.3cm; } #module-list > .module > a { border-radius: inherit; display: flex; flex-direction: row; text-decoration: none; } #module-list > .module > a > .module-name { font-size: 36px; margin: 0.1cm auto; text-decoration: underline; } #module-list > .module > a > .module-name > span + span { margin-left: 0.5cm; } #module-list > .module > a > .module-name > span + span::before, #module-list > .module > a > .module-name > br + span::before { content: "&"; margin-right: 0.5cm; text-decoration: none; display: inline-block; } #module-list > .module > .module-body { padding: 0 3cm; } #module-list > .module > .module-body > .module-description { text-align: left; text-indent: 1cm; inline-size: 90%; overflow-wrap: normal; padding: 0.4cm 0; } #module-list > .module > .module-body > .module-tidbit::before { content: "Did you know?"; font-size: large; font-weight: bold; text-indent: 0; display: block; } #module-list > .module > .module-body > .module-tidbit { text-align: left; text-indent: 1cm; inline-size: 90%; overflow-wrap: normal; padding: 0.4cm 0; } #module-list > .module > .module-body > .module-tidbit > span { height: 1px; width: 1cm; display: inline-block; } #module-list > .module > a > img { position: absolute; top: 0; right: 0; height: 3cm; width: 3cm; border-radius: inherit; } #module-list > .module > a > img.module-image-left { right: unset; left: 0; } .unavailable { color: red; text-decoration: none; display: inline-block; } #tier-list-button { margin: 1.2cm auto 0; font-size: large; background-color: #012; padding: 0.3cm; border-radius: 0.3cm; border: 2px solid #fff; } #tier-list-button:hover { background-color: #123; } #tier-list-button:active { background-color: #234; } #module-list > .tier-list-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 0.6cm; padding-left: 0; margin: 0 0.6cm; border-radius: 0.6cm; } #module-list > .tier-list-row + .tier-list-row { margin-top: 0.6cm; } #module-list > .tier-list-row > .tier-label { color: #012; font-size: 64pt; margin: 0 1cm; } #module-list > .tier-list-row > .tier-list-inner-row { display: flex; flex-direction: row; flex-wrap: wrap; } #module-list > .tier-list-row > .tier-list-inner-row > * { width: 2cm; height: 2cm; border-radius: 0.2cm; background-color: #012; } .stay-text { display: none; } .tier-list-row .stay-text { display: flex; align-items: center; } .stay-text > span { margin: 0 auto; font-size: 12pt; } @media (max-width: 800px) { #module-list > .module > a { position: relative; display: block; } #module-list > .module > a > img { position: static; float: right; } #module-list > .module > .module-body { padding: 0 0.5cm; } #module-list > .tier-list-row > .tier-label { font-size: 32pt; margin: 0 0.3cm; } #module-list > .tier-list-row > .tier-list-inner-row > * { width: 1.5cm; height: 1.5cm; } .stay-text > span { font-size: 8pt; } } @media (max-width: 500px) { body { margin: 0; } #module-list { width: 100%; } .module-name { clear: both; } } #listing-header { margin-top: 1cm; } #module-listing { margin: 0 auto; text-align: right; font-size: 36px; width: 100%; } #module-listing td { width: 50%; } .module-id:before { content: "ID:"; margin-right: 0.7em; } .module-id { font-size: 70%; color: #aaa; text-align: left; padding-left: 1cm; } #puzzles-listing { font-size: 36px; margin: 0 auto; } #puzzles-listing td { padding-top: 1cm; } #puzzles-listing td:first-child:not(:last-child) { padding-right: 1cm; } #puzzles-listing td:nth-child(2) { display: flex; } @media (max-width: 800px) { #listing-header { font-size: 36px; } #module-listing { font-size: 18px; } #module-listing tr { height: 1cm; } #puzzles-listing { font-size: 18px; } } #button-collection { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px; } #button-collection img, #button-collection source { width: 176px; image-rendering: pixelated; } iframe { border-top: 4px solid #234; border-right: 4px solid #123; border-left: none; border-bottom: none; border-top-right-radius: 8px; } #main-nav { display: flex; flex-direction: row; justify-content: space-around; width: 72%; margin: 2cm auto 0; font-size: larger; border-radius: 1cm; border: 3px solid #456; } #main-nav > a { padding: 1ex 2ex; border-radius: 1cm; transition: background-color 0.1s ease; } #main-nav > a:hover { background-color: #456; } @media (max-width: 800px) { #main-nav { width: 100%; border-radius: 0; border-width: 3px 0; } #main-nav > a { padding: 1ex 1ex; border-radius: 1ex; } } body { margin: 0 0 70vh; }