:root { --color-bg: #fff; --color-text: #000; --color-text-faded: rgba(0, 0, 0, 0.5); --color-border: #000; --color-border-faded: rgba(0, 0, 0, 0.5); --color-dark-bg-rgba: 0, 0, 0; --color-dark-bg: rgb(var(--color-dark-bg-rgba)); --color-dark-bg-faded: rgba(0, 0, 0, 0.7); --color-dark-bg-text: #fff; --color-dark-bg-border: #efefef; --color-alt-bg: #eee; --color-alt-bg-text: #000; --color-alt-bg-border: #969696; --color-highlight: #ff99cb; --color-highlight-text: #000; --color-error: #ad1919; --color-error-text: #fff; --color-success: #02a64c; --font-size-tiny: 10px; --font-size-small: 13px; --font-size-normal: 15px; --font-size-large: 17px; --font-size-xlarge: 20px; --font-size-xxl: 23px; --font-family-main: 'Mulish', sans-serif; --font-family-title: 'Fifties', arial, sans-serif; --max-width-content: 1600px; } @font-face { font-family: 'Mulish'; font-style: normal; font-weight: normal; src: url(/fonts/mulish-regular.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fifties'; src: url(/fonts/fifties-med-regular.woff2) format('woff2'); font-weight: normal; font-style: normal; } html { margin: 0; width: 100%; height: 100%; background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-family-main); } body, #__next { margin: 0; width: 100%; height: 100%; } h1, h2, h3, p, ul, li { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; } .padded { padding: 0 45px; box-sizing: border-box; } @media screen and (max-width: 1224px) { .padded { padding: 0 20px; } } a:hover { text-decoration: underline; } h1, h1.padded { padding-top: 20px; text-transform: uppercase; font-family: var(--font-family-title); font-size: var(--font-size-xlarge); } .mw { max-width: var(--max-width-content); margin-left: auto; margin-right: auto; } h2 { text-transform: uppercase; font-family: var(--font-family-title); font-size: var(--font-size-xlarge); } @keyframes panel-0 { 0% { width: 0; right: -100%; } 40% { width: 20%; right: 100%; } 70% { width: 0; right: 100%; } } @keyframes panel-1 { 0% { width: 0; right: -100%; } 40% { width: 0; right: 0; } 50% { right: 0; } 70% { width: 50%; } 100% { width: 80%; right: 200%; } } @keyframes background { 0% { width: 0; right: -100%; } 40%, 50% { width: 100%; right: 0; } 100% { width: 0; right: 200%; } } .transition:after { content: ''; display: block; position: fixed; right: -100%; top: 0; width: 0; height: 100%; animation-duration: 1.5s; background-color: var(--color-highlight); background-image: url(images/logo-black.png); background-size: 149px 63px; background-position: center center; background-repeat: no-repeat; z-index: 19; animation-name: background; } .transition #__next:before { content: ''; display: block; position: fixed; right: -100%; top: 0; width: 0; height: 100%; animation-duration: 1.5s; background-color: var(--color-alt-bg); z-index: 20; animation-name: panel-0; } .transition #__next:after { content: ''; display: block; position: fixed; right: -100%; top: 0; width: 0; height: 100%; animation-duration: 1.5s; background-color: var(--color-alt-bg); z-index: 20; animation-name: panel-1; } @keyframes mainTransition { 0% { opacity: 0; } 40% { opacity: 0; } 50% { opacity: 0.5; } 60% { opacity: 1; } } .transition #__next > main { animation: mainTransition 1.5s; }