:root { font-size: 16px; font-family: 'Roboto', sans-serif; font-weight: 300; line-height: 1.5rem; color: #212529; background: white; } body { margin: 0; } header, .content { max-width: 720px; margin: auto; padding: 0 1rem; } main { min-height: calc(100vh - 17.5rem); } footer { margin: 3rem 0 2rem; padding: 0 1rem; font-size: 0.75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; } footer>nav>ul { list-style-type: none; padding: 0; margin: 0; } footer>nav>ul>li { display: inline-block; } footer>div, footer>nav>ul>li { margin: 0.5rem; } h1 { font-size: 2.5rem; font-weight: 400; line-height: 2.5rem; margin: 2rem 0 2rem; padding: 2rem 0 0; text-wrap: balance; } h2 { font-size: 1.5rem; font-weight: 400; line-height: 1.5rem; margin: 1rem 0 0; padding: 1rem 0 0; } h3 { font-size: 1.2rem; font-weight: 400; line-height: 1.2rem; margin: 0.5rem 0 0; padding: 0.5rem 0 0; } p { margin: 1rem 0; text-align: justify; } ul { margin: 1rem 0; padding-left: 2.5rem; } a { text-decoration: underline; color: #ff9100; } a:hover { text-decoration: none; color: #ff6d00; } .feature-graphic { width: 100%; max-width: 720px; display: block; margin: auto; } .game-title, .quick-access, .factsheet, .factsheet>div, .screenshots { display: flex; flex-wrap: wrap; } .game-title { align-items: center; gap: 1rem; margin: 1rem 0 2rem; } .game-title>h1 { margin: 0; padding: 0; flex-basis: calc(100% - 8rem - 1rem); } .icon { width: 8rem; border-radius: 2rem; } .quick-access, .factsheet>div, .screenshots { gap: 0.5rem; } .factsheet { gap: 2rem 4rem; justify-content: space-between; margin-top: 1rem; } .factsheet>div { flex: 1 1 0; min-width: 40%; flex-direction: column; } .factsheet span { font-weight: 400; } .screenshots { justify-content: center; align-items: flex-start; margin: 1rem 0; } .limit-screenshot-size-15>div { max-width: 15rem; } .limit-screenshot-size-20>div { max-width: 20rem; } .screenshot>img { width: 100%; min-width: 0; max-width: 100%; border-radius: 0.5rem; display: block; margin: auto; } .screenshot-square { flex: 2 1 10rem; } .screenshot-portrait { flex: 1 1 10rem; } .screenshot-landscape { flex: 4 1 20rem; } .youtube-video { width: 100%; aspect-ratio: 16/9; border-radius: 0.5rem; } .assets { margin: 1rem 0; } .small-button { padding: 0.5rem 1rem; } .large-button { padding: 1rem 2rem; text-transform: uppercase; } .button-scale-up { cursor: pointer; text-align: center; font-weight: 700; color: #ff9100; display: inline-block; border: 2px solid #ff9100; border-radius: 4rem; transition: all 0.3s; } .button-scale-up:hover { background-color: #ff9100; color: #ffffff; transform: scale(1.1) } .youtube-button { color: #FF0000; border-color: #FF0000; } .youtube-button:hover { background-color: #FF0000; color: #ffffff; } .discord-button { color: #5865F2; border-color: #5865F2; } .discord-button:hover { background-color: #5865F2; color: #ffffff; } .google-play-button { color: #000000; border-color: #000000; } .google-play-button:hover { background-color: #000000; color: #ffffff; } .app-store-button { color: #000000; border-color: #000000; } .app-store-button:hover { background-color: #000000; color: #ffffff; }