footer { color: var(--moss); background-color: var(--sand); } #back-to-top-button { width: 140px; height: 140px; margin: 0; border-radius: 50%; z-index: 2; font-size: 56px; } #back-to-top-button:active { transform: translate(2px, 2px) !important; box-shadow: 0 0 0 0 var(--moss-shadow); } #back-to-top-button svg { margin-right: unset; } .container { position: relative; width: 100%; max-width: 1240px; margin: auto; } .outro { position: relative; max-width: 666px; margin: 0 8% 0; padding-top: 72px; } .outro p { font-size: 28px; line-height: 40px; margin: 0 0 32px; } footer .links { margin: 56px 0 48px; } .fine-print { position: relative; margin: 72px 0 0; padding-bottom: 32px; overflow: hidden; } .fine-print p { font-size: 16px; line-height: 24px; } .illustrations-footer { position: fixed; margin: auto; display: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; pointer-events: none; } @media screen and (max-width: 719px) { #back-to-top-button { position: fixed; bottom: 20px; right: 20px; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; font-size: 28px; } footer .links { margin: 0 0 64px; } #command { display: none; } #marker-green { display: none; } .illustrations-footer { height: 440px; display: initial; overflow-y: hidden; } } @media screen and (min-width: 720px) { .outro { margin: 0 auto; } .fine-print { margin-top: 96px; padding-bottom: 96px; } #back-to-top-button { position: absolute; left: 70px; top: -56px; } #marker-green { position: absolute; left: 678px; top: -218px; } #command { position: absolute; right: -18px; top: 144px; } .ruler { position: absolute; transform: rotate(-5deg); } } @media screen and (min-width: 1239px) { .outro { margin-left: 462px; } #back-to-top-button { position: absolute; left: 190px; top: 276px; } .illustrations-footer { display: initial; position: absolute; bottom: 0; height: 500px !important; } }