:root{--bg: hsl(238, 16%, 50%);--bg-light: hsl(from var(--bg) h s calc(l + 30) );--bg-ligher: hsl(from var(--bg) h s calc(l + 40) );--bg-dark: hsl(from var(--bg) h s calc(l - 30) );--bg-darker: hsl(from var(--bg) h s calc(l - 40) );--fg: hsl(225, 21%, 50%);--fg-light: hsl(from var(--fg) h s calc(l + 20) );--fg-lighter: hsl(from var(--fg) h s calc(l + 40) );--fg-dark: hsl(from var(--fg) h s calc(l - 20) );--fg-darker: hsl(from var(--fg) h s calc(l - 40) );--highlight: hsl(35, 50%, 50%);--highlight-light: hsl(from var(--highlight) h s calc(l + 20) );--highlight-lighter: hsl(from var(--highlight) h s calc(l + 30) );--highlight-dark: hsl(from var(--highlight) h s calc(l - 20) );--highlight-darker: hsl(from var(--highlight) h s calc(l - 30) );--text-color: hsl(270, 40%, 70%);--text-color-light: hsl(from var(--text-color) h calc(s - 20) calc(l + 5) );--text-color-lighter: hsl(from var(--text-color) h s calc(l + 50) );--text-color-dark: hsl(from var(--text-color) h s calc(l - 40) );--text-color-darker: hsl(from var(--text-color) h s calc(l - 50) );--border-radius: .25em;font-family:Roboto,sans-serif;font-size:large;line-height:1.5;font-optical-sizing:auto;font-weight:600;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;padding:0;margin:0}body{background-color:var(--bg-dark);color:var(--text-color-dark);margin:0;display:flex;flex-direction:column;min-width:320px;height:100vh}button{background-color:var(--highlight);padding:.25rem .5rem;color:var(--text-color-dark);font-weight:600;border:0px solid transparent;cursor:pointer}button:hover{background-color:var(--highlight-light)}input,select{background-color:var(--fg-lighter);color:var(--text-color-darker);font-weight:500;border:none}.alert{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;width:fit-content;opacity:0;width:100%;height:100%}.alert__text{font-weight:bolder;font-size:xx-large;text-align:center}.alert__image{width:512px;height:512px}body{background-color:transparent;color:#fff}main{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}