::root {
    --font-mono: 0.5;
    --font-casl: 0.49;
    --font-wght: 400;
    --font-slnt: 0;
    --font-rep-roman: 1;
}

body {
    font-family: 'Recursive', monospace;
    font-variation-settings: var(--font-mono), var(--font-casl), var(--font-wght), var(--font-slnt), var(--font-rep-roman);
    background: lightgrey;
    margin: 0;
    transition: all 200ms;
}

nav {
    padding: 1ch;
    background-color: white;
    display: flex;
    border: 1px #666 solid;
    border-radius: 0 0 1ch 1ch;
    box-shadow: 0.5ch 0.5ch 1ch #bbb;
}
nav > * {
    position: relative;
    transform: translateX(50%);
}

main {
    display: flex;
    flex-direction: column;
    position: absolute;
    margin-top: 4ch;
    left: 50%;
    margin-right: -50%;
    max-width: 1000px;
    transform: translateX(-50%);
}

th, td {
    padding: 0 0.5ch;
}
tr:nth-child(even) {
    background-color: #dddddd;
  }

.section {
    border: 1px #666 solid;
    border-radius: 1ch;
    background: white;
    box-shadow: 0.5ch 0.5ch 1ch #bbb;
    padding: 2ch;
    margin-bottom: 2ch;
}

h4 {
    margin: 0 0 1ch 0;
}

.cl-form {
    display: flex;
    flex-direction: column;
}
.cl-from {
    display: flex;
    margin-bottom: 1ch;
}
.cl-to {
    display: flex;
    margin-bottom: 1ch;
}
.cl-submit {
    width: 100%;
}
.cl-form-deco {
    margin: 0 1ch;

}
#id_domain { flex-grow: 1;}
#id_location { flex-grow: 5;}
#id_to { flex-grow: 1;}

.ov-domains {
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
}

input, select {
    border-radius: 0.5ch;
    border-width: 1px;
    padding: 0.5ch 1ch;
}

@media (prefers-color-scheme: dark) {
    body {
        background: black;
        color: white;
    }

    nav {
        background-color: #111;
        border: 1px #333 solid;
        box-shadow: 0.5ch 0.5ch 1ch #222;
    }
    .section {
        border: 1px #333 solid;
        background: #111;
        box-shadow: 0.5ch 0.5ch 1ch #222;
    }

    a {
        color: #8fb0ff;
        font-weight: bold;
    }
    input, select {
        color: white;
        border-radius: 0.5ch;
        border-width: 1px;
        padding: 0.5ch 1ch;
        border-color: #666;
        background: #111;
    }
    input[type="submit"] {
        background: #444;
    }
    tr:nth-child(even) {
        background-color: #000;
      }
}