@import url("https://fonts.googleapis.com/css?family=Merriweather:900|Oswald:300");
html, body { height: 100%}

body { margin: 0; min-height: 100%; padding: 0; text-align: center}

.container { align-items: center; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; min-height: 100%}

@media screen and (max-height: 415px){
 .container { flex-direction: row}
 }

.logo-container { align-items: center; display: flex; flex-grow: 1; min-height: 200px; margin: auto}

@media screen and (max-height: 415px){
 .logo-container { margin-left: 75px}
 }

.logo { font-family: "Oswald", sans-serif; font-size: 2rem; height: 200px; position: relative}

.logo .r { left: -8px; position: absolute; top: 8px}

.logo .u { left: -8px; position: absolute; top: 140px}

.logo .x:after, .logo .x:before { content: ''; position: absolute; width: 2px; height: 200px; border-radius: 2px; }

.logo .x:after { transform: rotate(-22deg)}

.logo .x:before { transform: rotate(22deg)}

.logo .code { position: absolute; font-size: 3rem; left: 22px; top: 52px}

.fill { left: -56px; position: absolute; top: 76px; transform: rotate(59deg)}

.fill .can { width: 20px; height: 26px; border-style: solid; border-width: 3px; border-radius: 5px}

.fill .can:before { content: ''; border-radius: 50%; height: 7px; left: 0; position: absolute; top: -2px; width: 26px}

.fill .can:after { border-style: solid; border-width: 1px; border-radius: 50% 0 50% 50%; border-right: none; content: ''; height: 10px; position: absolute; left: -15px; top: 5px; transform: rotate(-10deg); width: 20px}

.fill .paint { position: absolute; width: 6px; height: 6px; right: -1px; top: -4px; z-index: 2; transform: rotate(30deg)}

.fill .paint:after, .fill .paint:before { content: ''; position: absolute; z-index: 2}

.fill .paint:after { width: 4px; height: 2px; left: 11px; top: -2px}

.fill .paint:before { width: 8px; height: 4px; left: 3px; top: -2px}

.fill .paint div { position: absolute; width: 6px; height: 6px; left: 7px; top: -4px}

.fill .paint div:after, .fill .paint div:before { content: ''; position: absolute; width: 2px; height: 2px}

.fill .paint div:after { left: 8px; top: 4px}

.fill .paint div:before { left: 2px}

.welcome { box-sizing: border-box; flex-grow: 2; margin: auto; max-width: 800px; text-align: left; width: 90%}

@media screen and (max-height: 415px){
 .welcome { padding-right: 10px; width: 50%}
 }

.welcome h1 { font-family: "Merriweather", serif; font-size: 2.2rem; line-height: 0}

.welcome h1 span { display: block; font-size: 7rem; line-height: 9rem; }

@media screen and (max-width: 415px), screen and (max-height: 415px){
 .welcome h1 { font-size: 1.5rem}

 .welcome h1 span { font-size: 5rem; line-height: 6rem}
 }

.welcome p { font-family: "Oswald", sans-serif; font-size: 1.4rem}

.welcome a { text-decoration: none}

.welcome a:hover { text-decoration: underline}

footer { margin: auto; max-width: 800px; text-align: left; width: 90%; flex-grow: 1}

@media screen and (max-width: 415px), screen and (max-height: 415px) { footer { text-align: center}
 }

footer img { height: 30px}

footer ul { padding: 0}

footer li { display: inline; list-style: none; margin-right: 20px}

footer li:first-child { margin-right: 13px}

footer li.no { position: relative}

footer li.no:before { content: ''; background: center/contain no-repeat url(images/no.png); height: 40px; left: -7px; pointer-events: none; position: absolute; top: -18px; width: 40px; z-index: 2}

footer li.no img { height: 25px; opacity: 0.5}

footer a { text-decoration: none}

footer a img { transition: all 2s; opacity: 0.8}

footer a:hover img { transform: scale(1.1); opacity: 1}

@media (prefers-color-scheme: light) {
 body { background: #f5f5f5; }
 .logo .x:after,
 .logo .x:before { background-color: #000000; }
 .fill .can,
 .fill .can:after { border-color: #000000; }

 .fill .paint,
 .fill .paint:before,
 .fill .paint:after { background-color: #000000; }

 .fill .can:before { background-image: linear-gradient(90deg, #000000, #151151); }

 .fill .paint div { background-color: #151151; opacity: 0.2; }
 .fill .paint div:after,
 .fill .paint div:before { background-color: #151151; }

 .code,
 .r,
 .u { color: #000000; }
 .welcome h1 span { background: linear-gradient(135deg, #1e5799 0%, #2989d8 42%, #7db9e8 54%, #7db9e8 54%, #7db9e8 57%, #207cca 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* text-shadow: none; */}
 .welcome a { color: #1498e4; }

 .welcome a:active,
 .welcome a:visited { color: #1498e4; }
 .welcome h1 { color: #7b8e9c; }
 .welcome p { color: #7b8e9c; }
 }
@media (prefers-color-scheme: dark) { body { background: #404258; }
 .logo .x:after,
 .logo .x:before { background-color: #6B728E; }
 .fill .can,
 .fill .can:after { border-color: #6B728E; }

 .fill .paint,
 .fill .paint:before,
 .fill .paint:after { background-color: #816797; }

 .fill .can:before { background-image: linear-gradient(90deg, #6B728E, #816797); }

 .fill .paint div { background-color: #B25068; opacity: 0.2; }
 .fill .paint div:after,
 .fill .paint div:before { background-color: #6B728E; }

 .code,
 .r,
 .u { color: #6B728E}

 .welcome h1 span { background: linear-gradient(135deg, #E7AB79 0%, #B25068 42%, #712B75 54%, #E7AB79 100%); background-clip: text; text-shadow: none; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
 .welcome a,
 .welcome a:active,
 .welcome a:visited { color: #B25068; }
 .welcome h1 { color: #E7AB79; text-shadow: rgba(0, 0, 0, 0.6) -1px 1px 2px; }
 .welcome p { color: #E7AB79; }
}