#frontPage { align-items: center; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; display: flex; justify-content: center; height: calc(100vh + 1rem); padding-bottom: 1rem; pointer-events: none; width: 100%; body.about & { background-color: $achernarColour; } body.ax & { background-color: #422984; } body.backspace & { background-color: $backgroundColour; } body.benoit & { background-image: url("/svg/benoit-background.svg"); background-size: cover; } body.bowshock & { background-color: #B61833; } body.bzipper & { background-color: #FFFFFF; } body.deltaWorld & { background-color: $backgroundColour; } body.eas & { background-color: #01CD93; } body.luma & { background-color: #6051B2; } body.pollex & { background-color: #4D4084; } body.u8c & { background-color: #444747; } #glyph { display: block; font-size: 4rem; font-weight: bold; height: fit-content; width: calc(100vmin / 2); text-align: center; } }