* {
    box-sizing: border-box
}

:root {
    --green-highlight: lightgreen;
    --red-highlight: #ff00008c;
    --backdrop-filter: blur(10px);
    --darken-10: rgb(0 0 0 / 10%);
    --darken-20: rgb(0 0 0 / 20%);
    --darken-30: rgb(0 0 0 / 30%);
    --darken-40: rgb(0 0 0 / 40%);
    --darken-50: rgb(0 0 0 / 50%);
    --darken-60: rgb(0 0 0 / 50%);
    --darken-70: rgb(0 0 0 / 70%);
    --darken-80: rgb(0 0 0 / 80%);
    --lighten-5: rgb(255 255 255 / 5%);
    --lighten-10: rgb(255 255 255 / 10%);
    --lighten-20: rgb(255 255 255 / 20%);
    --lighten-30: rgb(255 255 255 / 30%);
    --lighten-40: rgb(255 255 255 / 40%);
    --lighten-50: rgb(255 255 255 / 50%);
    --lighten-60: rgb(255 255 255 / 60%);
    --lighten-70: rgb(255 255 255 / 70%);
    --lighten-80: rgb(255 255 255 / 80%);
    --bw-0: black;
    --bw-5: hsl(0, 0%, 5%);
    --bw-10: hsl(0, 0%, 10%);
    --bw-20: hsl(0, 0%, 20%);
    --bw-30: hsl(0, 0%, 30%);
    --bw-40: hsl(0, 0%, 40%);
    --bw-50: hsl(0, 0%, 50%);
    --bw-60: hsl(0, 0%, 60%);
    --bw-70: hsl(0, 0%, 70%);
    --bw-80: hsl(0, 0%, 80%);
    --bw-90: hsl(0, 0%, 90%);
    --bw-100: white
}

html {
    display: flex;
    justify-content: center
}

body {
    display: flex;
    flex-grow: 1;
    margin: 20px 15px 50px;
    max-width: 1200px;
    flex-direction: column;
    font-family: 'Share Tech Mono','Microsoft YaHei', monospace;
    background-color: #eaeaea;
    color: #000
}

body.dark {
    background-color: #202428;
    color: #fff
}

#root {
    display: flex;
    flex-grow: 1
}

p {
    line-height: 1.5
}

a {
    color: #1e90ff;
    text-decoration: none;
    border-bottom: 1.8px solid;
    border-color: #1e8fff66;
    transition: all .1s
}

a:hover {
    border-color: #1e90ff
}