:root {
    --font-family:                      "Roboto", "Arial";
    --font-size:                        1.5rem;
    --padding-inside-border:            0.25rem;
    --bordered-height:                  2.5rem;
    --bordered-radius:                  1rem;
    --button-min-width:                 2rem;
}

:root {
    --bg-color:                         hsl(0deg 0% 94%);
    --selected-bg-color:                hsl(0deg 0% 94%);
    --color:                            hsl(0deg 0% 6%);
    --backdrop-color:                   hsl(0deg 0% 6% / 50%);
    --cite-color:                       hsl(0deg 0% 40%);
    --border-color:                     hsl(0deg 0% 6%);
    --disabled-color:                   #808080;
    --bg-disabled-color:                #C0C0C0;
    --focused-border-color:             #777777;
    --actived-bg-color:                 #D0D0D0;

    --checked-buttonset-bg-color:       hsl(0deg 0% 6%);
    --checked-buttonset-color:          hsl(0deg 0% 94%);

    --header-bg-color:                  hsl(0deg 0% 94%);
    --header-color:                     hsl(0deg 0% 6%);

    --link-color:                       hsl(0deg 0% 10%);
    --link-hover-color:                 hsl(0deg 0% 30%);
}

@media(prefers-color-scheme: dark) {
    :root {
        --bg-color:                     hsl(0deg 0% 6%);
        --selected-bg-color:            hsl(0deg 0% 6%);
        --color:                        hsl(0deg 0% 94%);
        /* --backdrop-color:               hsl(0deg 0% 94% / 50%); */
        --cite-color:                   hsl(0deg 0% 60%);
        --border-color:                 hsl(0deg 0% 94%);
        --actived-bg-color:             #313131;
        --focused-border-color:         #777777;

        --checked-buttonset-bg-color:   hsl(0deg 0% 94%);
        --checked-buttonset-color:      hsl(0deg 0% 6%);

        --header-bg-color:              hsl(0deg 0% 6%);
        --header-color:                 hsl(0deg 0% 94%);

        --link-color:                   hsl(0deg 0% 90%);
        --link-hover-color:             hsl(0deg 0% 70%);
    }
}

ul:empty {
    display: none;
}

.dark {
    --bg-color:                         hsl(0deg 0% 6%);
    --selected-bg-color:                hsl(0deg 0% 6%);
    --color:                            hsl(0deg 0% 94%);
    --border-color:                     hsl(0deg 0% 94%);
    --actived-bg-color:                 #313131;
    --focused-border-color:             #777777;

    --checked-buttonset-bg-color:       hsl(0deg 0% 94%);
    --checked-buttonset-color:          hsl(0deg 0% 6%);

    --header-bg-color:                  hsl(0deg 0% 94%);
    --header-color:                     hsl(0deg 0% 6%);

    --link-color:                       hsl(0deg 0% 90%);
    --link-hover-color:                 hsl(0deg 0% 70%);
}

.bordered {
    border: var(--border-color) 1px solid;
    border-radius: var(--bordered-radius);
    padding: var(--padding-inside-border) calc(var(--padding-inside-border) * 2);
    font-size: var(--font-size);
    line-height: var(--font-size);
}

.text-primary {
    --color: #3545DC;
    color: var(--color);
}
.primary {
    --bg-color: #3545DC;
    --color:    hsl(0deg 0% 94%);
    --border-color: #3545DC;
    --focused-border-color: #3428A5;
    --actived-bg-color: #372AB0;

    --checked-buttonset-bg-color: #372AB0;
    --checked-buttonset-color: hsl(0deg 0% 94%);

    --header-bg-color: #372AB0;
    --header-color: hsl(0deg 0% 94%);
}

.text-success {
    --color: #198754;
    color: var(--color);
}
.success {
    --bg-color: #198754;
    --color:    hsl(0deg 0% 94%);
    --border-color: #198754;
    --focused-border-color: #13653F;
    --actived-bg-color: #146C43;

    --checked-buttonset-bg-color: #146C43;
    --checked-buttonset-color: hsl(0deg 0% 94%);

    --header-bg-color: #146C43;
    --header-color: hsl(0deg 0% 94%);
}

.text-warning {
    --color: #DC7935;
    color: var(--color);
}
.warning {
    --bg-color: #DC7935;
    --color:                           hsl(0deg 0% 94%);
    --border-color: #DC7935;
    --focused-border-color: #A57328;
    --actived-bg-color: #B07A2A;

    --checked-buttonset-bg-color: #B07A2A;
    --checked-buttonset-color:         hsl(0deg 0% 94%);

    --header-bg-color: #B07A2A;
    --header-color: hsl(0deg 0% 94%);
}

.text-danger {
    --color: #DC3545;
    color: var(--color);
}
.danger {
    --bg-color: #DC3545;
    --color:                           hsl(0deg 0% 94%);
    --border-color: #DC3545;
    --focused-border-color: #A52834;
    --actived-bg-color: #B02A37;

    --checked-buttonset-bg-color: #B02A37;
    --checked-buttonset-color:         hsl(0deg 0% 94%);

    --header-bg-color: #B02A37;
    --header-color:                    hsl(0deg 0% 94%);
}

.bad-good-6 {
    & label:nth-child(1) {
        --checked-buttonset-bg-color:  hsl(0deg 90% 70%);
        --checked-buttonset-color:     hsl(0deg 0% 6%);
        --border-color:                hsl(0deg 90% 50%);
        --actived-bg-color:            hsl(0deg 90% 50%);
    }

    & label:nth-child(2) {
        --checked-buttonset-bg-color:  hsl(24deg 90% 70%);
        --checked-buttonset-color:     hsl(0deg 0% 6%);
        --border-color:                hsl(24deg 90% 50%);
        --actived-bg-color:            hsl(24deg 90% 50%);
    }

    & label:nth-child(3) {
        --checked-buttonset-bg-color:  hsl(48deg 90% 70%);
        --checked-buttonset-color:     hsl(0deg 0% 6%);
        --border-color:                hsl(48deg 90% 50%);
        --actived-bg-color:            hsl(48deg 90% 50%);
    }

    & label:nth-child(4) {
        --checked-buttonset-bg-color:  hsl(72deg 90% 70%);
        --checked-buttonset-color:     hsl(0deg 0% 6%);
        --border-color:                hsl(72deg 90% 50%);
        --actived-bg-color:            hsl(72deg 90% 50%);
    }

    & label:nth-child(5) {
        --checked-buttonset-bg-color:  hsl(96deg 90% 70%);
        --checked-buttonset-color:     hsl(0deg 0% 6%);
        --border-color:                hsl(96deg 90% 50%);
        --actived-bg-color:            hsl(96deg 90% 50%);
    }

    & label:nth-child(6) {
        --checked-buttonset-bg-color:  hsl(120deg 90% 70%);
        --checked-buttonset-color:     hsl(0deg 0% 6%);
        --border-color:                hsl(120deg 90% 50%);
        --actived-bg-color:            hsl(120deg 90% 50%);
    }
}

.fa, .fa-brands, .fa-classic, .fa-regular, .fa-sharp, .fa-solid, .fab, .far, .fas {
    font-size: calc(var(--font-size) - 1px);
}

* {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--color);
}

/*
*::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--color);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--bg-color);
}
*/

body {
    display: grid;
    place-content: center;

    background: var(--bg-color);
    color: var(--color);
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: var(--font-size);

    margin: 0;

/*  see to change that */
    /* overflow-y: scroll; */
    scrollbar-gutter: stable both-edges;
}

h1 {
    --font-size: 2rem;

    font-size: var(--font-size);
    line-height: var(--font-size);
    
    margin: 0;
    margin-bottom: 0.5rem;
}

h2 {
    --font-size: 1.5rem;

    font-size: var(--font-size);
    line-height: var(--font-size);
    
    margin: 0;
    margin-bottom: 0.25rem;
}

h3 {
    --font-size: 1.25rem;

    font-size: var(--font-size);
    line-height: var(--font-size);
    
    margin: 0;
    margin-bottom: 0.25rem;
}

select {
    border: var(--border-color) 1px solid;
    border-radius: var(--bordered-radius);

    padding: var(--padding-inside-border) calc(var(--padding-inside-border) * 2);
    font-size: var(--font-size);
    line-height: var(--font-size);

    height: calc(var(--bordered-height) + 1px);
    min-width: var(--button-min-width);

    color: var(--border-color);
    background-color: var(--selected-bg-color);

    &:hover,
    &:focus-visible {
        border-color: var(--focused-border-color);
        outline: 0;
    }

    /* &:active {
        background-color: var(--actived-bg-color);
    } */
}

button {
    border: var(--border-color) 1px solid;
    border-radius: var(--bordered-radius);

    color: var(--color);
    background-color: var(--bg-color);

    padding: var(--padding-inside-border) calc(var(--padding-inside-border) * 2);
    font-size: var(--font-size);
    line-height: var(--font-size);

    height: var(--bordered-height);
    min-width: var(--button-min-width);

    cursor: pointer;
    user-select: none;

    &:hover,
    &:focus-visible {
        border-color: var(--focused-border-color);
        outline: 0;
    }

    &:active {
        background-color: var(--actived-bg-color);
    }

    &[disabled] {
        color: var(--disabled-color);
        background-color: var(--bg-disabled-color);
    }
}

.row {
    line-height: var(--font-size);
    height: var(--bordered-height);
}

label {
    color: var(--border-color);

    > input[type=radio],
    > input[type=checkbox] {
        display: none;
    }

    > input[type=radio] + span:before,
    > input[type=checkbox] + span:before {
        display: inline-block;
        width: var(--font-size);
        text-align: center;
        font-family: "Font Awesome 6 Free";
        margin-right: var(--padding-inside-border);
        cursor: pointer;
    }

    > input[type=radio]:not(:checked) + span:before {
        content: "\f111";
    }

    > input[type=radio]:checked + span:before {
        content: "\f192";
    }

    > input[type=checkbox]:not(:checked) + span:before {
        content: "\f0c8";
    }

    > input[type=checkbox]:checked + span:before {
        content: "\f14a";
    }
}

buttonset {
    font-style: normal;

    > label {
        > buttonlabel {
            display: inline-block;

            line-height: var(--font-size);
            text-align: center;

            height: var(--bordered-height);
            min-width: var(--button-min-width);

            padding: var(--padding-inside-border) calc(var(--padding-inside-border) * 2);
            padding-top: calc(var(--padding-inside-border) + 0.2rem);

            cursor: pointer;

            transition: background 200ms;

            &:hover,
            &:focus-visible {
                border-color: var(--focused-border-color);
                outline: 0;
            }
        }

        &:first-child {
            > buttonlabel {
                border: var(--border-color) 1px solid;
                border-top-left-radius: var(--bordered-radius);
                border-bottom-left-radius: var(--bordered-radius);
            }
        }

        &:last-child {
            > buttonlabel {
                border: var(--border-color) 1px solid;
                border-top-right-radius: var(--bordered-radius);
                border-bottom-right-radius: var(--bordered-radius);
            }
        }

        &:nth-child(2) {
            > buttonlabel {
                border: var(--border-color) 1px solid;
                border-left: 0;
            }

            &:not(:last-child) {
                > buttonlabel {
                    border-right: 0;
                }
            }
        }
    
        &:not(:first-child):not(:last-child):not(:nth-child(2)) {
            > buttonlabel {
                border: var(--border-color) 1px solid;
                border-right: 0;
            }
        }

        > input:checked + buttonlabel {
            background-color: var(--checked-buttonset-bg-color);
            color: var(--checked-buttonset-color);
        }

        > input:active + buttonlabel {
            background-color: var(--actived-bg-color);
            color: var(--color);
        }

        > input:input {
            display: none;
        }
    }
}

table {
    border-spacing: 0;
/*
    border-collapse: collapse;
*/

    margin: auto;
    
    > thead {
        > tr {
            > th,
            > td {
                border: var(--border-color) 1px solid;
                border-bottom: 0;

                color: var(--header-color);
                background-color: var(--header-bg-color);

                padding: var(--padding-inside-border);
            }

            &:first-child {
                > th,
                > td {
                    &:first-child {
                        border-top-left-radius: var(--bordered-radius);
                    }

                    &:last-child {
                        border-top-right-radius: var(--bordered-radius);
                    }
                }
            }

            > *:not(:first-child) {
                border-left: 0;
            }
        }
    }

    > tbody {
        > tr {
            > td {
                border: var(--border-color) 1px solid;

                padding: var(--padding-inside-border);
            }

            > *:not(:first-child) {
                border-left: 0;
            }
            
            &:not(:first-child) {
                > td {
                    border-top: 0;
                }
            }
        }

        &:first-child {
            > tr:first-child td {
                &:first-child {
                    border-top-left-radius: var(--bordered-radius);
                }

                &:last-child {
                    border-top-right-radius: var(--bordered-radius);
                }
            }
        }

        &:last-child {
            > tr:last-child td {
                &:first-child {
                    border-bottom-left-radius: var(--bordered-radius);
                }

                &:last-child {
                    border-bottom-right-radius: var(--bordered-radius);
                }
            }
        }
    }
}

section {
    margin: auto;

    > shead,
    > sfoot {
        display: block;
        border: var(--border-color) 1px solid;
        padding: var(--padding-inside-border);
        color: var(--header-color);
        background-color: var(--header-bg-color);
    }

    > div,
    > ul,
    > p {
        display: block;
        border: var(--border-color) 1px solid;
        border-top: 0;
        background-color: var(--bg-color);
        color: var(--header-color);
        margin: 0;
        padding: var(--padding-inside-border);
    }

    > div:first-child,
    > ul:first-child,
    > p:first-child {
        border-top-left-radius: var(--bordered-radius);
        border-top-right-radius: var(--bordered-radius);
        border-top: var(--border-color) 1px solid;
    }

    > shead {
        border-top-left-radius: var(--bordered-radius);
        border-top-right-radius: var(--bordered-radius);
    }

    > sfoot,
    > div:last-child,
    > ul:last-child,
    > p:last-child {
        border-bottom-left-radius: var(--bordered-radius);
        border-bottom-right-radius: var(--bordered-radius);
        border-top: 0;
    }
}

nav > ul {
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;

    & li > a > i.fa,
    & li > i.fa {
        margin-right: 0.5rem;
    }

    > li {
        flex: 1;
        position: relative;
        text-align: center;

        & ul {
            display: none;
        }

        &:hover ul {
            display: initial;
        }
    }

    & ul {
        background-color: var(--bg-color);
        position: absolute;
        padding: 0;
        list-style: none;
        text-align: left;

        -webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
        box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);

        margin-left: calc(0rem - var(--padding-inside-border));
        margin-top: calc(0rem - var(--padding-inside-border));

        > li {
            padding: var(--padding-inside-border);
        }
    }
}

dialog {
    border: 0;
    border-radius: var(--bordered-radius);
    padding: 0;
    -webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
    box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
    background: var(--bg-color);

    > * {
        display: block;
        border: var(--border-color) 1px solid;
        padding: var(--padding-inside-border);
        font-size: var(--font-size);
        line-height: var(--font-size);
    }

    > header,
    > footer {
        color: var(--header-color);
        background-color: var(--header-bg-color);
    }

    > content {
        display: block;
        background-color: var(--bg-color);
        color: var(--header-color);
    }

    > *:first-child {
        border-top-left-radius: var(--bordered-radius);
        border-top-right-radius: var(--bordered-radius);
        border-top: var(--border-color) 1px solid;
    }

    > *:last-child {
        border-bottom-left-radius: var(--bordered-radius);
        border-bottom-right-radius: var(--bordered-radius);
    }

    > *:not(:first-child) {
        border-top: 0;
    }

    > header .close-button {
        max-height: 1rem;
        max-width: 1rem;
        min-width: 1rem;
        padding: 0;
        background: transparent;
        border: 0;

/*
        position: absolute;
        top: 0.25rem;
        right: 0.25rem;
*/

        &:before {
            display: inline-block;
            width: var(--font-size);
            text-align: center;
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            content: "\f00d";
        }
    }
}

textarea {
        border: var(--border-color) 1px solid;
        border-radius: var(--bordered-radius);

        background: var(--bg-color);
        color: var(--color);
        font-family: var(--font-family);
        font-size: var(--font-size);

        line-height: var(--font-size);

        padding: var(--padding-inside-border) calc(var(--padding-inside-border) * 2);
}

input {
    &[type=text],
    &[type=password],
    &[type=number],
    &[type=search],
    &[type=url],
    &[type=file],
    &[type=datetime-local],
    &[type=date],
    &[type=time],
    &::file-selector-button {
        border: var(--border-color) 1px solid;
        border-radius: var(--bordered-radius);

        background: var(--bg-color);
        color: var(--color);
        font-family: var(--font-family);
        font-size: var(--font-size);

        line-height: var(--font-size);

        height: var(--bordered-height);

        padding: var(--padding-inside-border) calc(var(--padding-inside-border) * 2);
    }

    &[type=file] {
        border: 0;
        padding-top: 0;
        padding-left: 0;
    }

    &[type=text],
    &[type=password] {
        text-align: left;
        position: relative;
        top: 0.125rem;

        &.text-code {
            --w: 2ch;   /* control the width for each letter */
            --g: .15em; /* the gap between letters */
            --b: 1px;   /* the border thickness */

            --c: var(--border-color);
            --_n: attr(maxlength type(<integer>));

            border-radius: 0;
            border: 0;
            font-size: var(--font-size);
            line-height: 1.5; /* control the height */
            letter-spacing: var(--w);
            font-family: monospace;
            width: calc(var(--_n)*(1ch + 2px + var(--w)));
            padding-left: calc((var(--w) - var(--g))/2);
            clip-path: inset(0 calc(var(--w)/2) 0 0);
            background:
              repeating-linear-gradient(90deg,
                var(--c) 0 var(--b),#0000 0 calc(1ch + var(--w) - var(--g) - var(--b)),
                var(--c) 0 calc(1ch + var(--w) - var(--g)),#0000 0 calc(1ch + var(--w))),
              conic-gradient(at calc(100% - var(--g) - 1px) var(--b),#0000 75%,var(--c) 0)
               0 0/calc(1ch + var(--w)) calc(100% - var(--b));

/*
            --letter-spacing: 1rem;
            letter-spacing: var(--letter-spacing);
            text-align: center;
            padding-left: calc(var(--padding-inside-border) * 2 + var(--letter-spacing));
*/
            &:focus-visible {
                outline: 0;
            }
        }
    }

    &[type=number] {
        text-align: right;
        position: relative;
        top: 0.125rem;
    }

    &[type=date] {
        width: 8rem;
        position: relative;
        top: 0.0625rem;
    }

    &[type=time] {
        width: 8rem;
        position: relative;
        top: 0.0625rem;
    }

    &:invalid {
        border-color: #DC3545;
    }
/*
    &[icon]:before {
        display: inline-block;

        border-right: 1px solid;

        width: 1.5rem;
        height: 100%;

        font-family: "Font Awesome 6 Free";
        font-weight: 900;

        text-align: center;
    }

    &[icon=key]:before {
        content: '\f084';
    }

    &[icon=user]:before {
        content: '\f007';
    }
*/
}

/*
label {
    > i {
        display: inline-block;
        border: var(--border-color) 1px solid;
        border-top-left-radius: var(--bordered-radius);
        border-bottom-left-radius: var(--bordered-radius);
        border-right: 0;

        line-height: var(--font-size);
        height: var(--bordered-height);

        padding-top: 0.4rem;
        width: 1.5rem;
        text-align: center;
    }
    
    & i + input[type] {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}
*/

p {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size);

    line-height: var(--font-size);
/*
    padding-top: var(--padding-inside-border);
*/
}

blockquote {
    margin: 0;
    border-left: var(--border-color) calc(var(--padding-inside-border)) solid;
    padding-top: calc(var(--padding-inside-border) * 2);
    padding-bottom: calc(var(--padding-inside-border) * 2);
    padding-left: calc(var(--padding-inside-border) * 2);
    
    & cite {
        color: var(--cite-color);
    }
}

a {
    color: var(--link-color);
    text-decoration: none;

    &:hover,
    &:active {
        color: var(--link-hover-color);
        text-decoration: underline;
    }
}

.flex {
    display: flex;
    
    > * {
        flex: 1;
    }
    
    > label > buttonlabel {
        width: 100%;
    }

    > .flex-grow-2 {
        flex-grow: 2;
    }
}

.full-width {
    width: 100%;
}

.sticky {
    position: sticky;
    top: 0rem;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.margin-left {
    margin-left: 0.5rem;
}

.margin-right {
    margin-right: 0.5rem;
}

.margin-top {
    margin-top: 0.5rem;
}

.margin-bottom {
    margin-bottom: 0.5rem;
}

.bold {
    font-weight: bolder;
}

.small {
    --bordered-height: 1.5rem;
    --button-min-width: 1.5rem;
    --font-size: 0.875rem;
    --padding-inside-border: 0.125rem
}

.xsmall {
    --bordered-height: 1rem;
    --button-min-width: 1rem;
    --font-size: 0.75rem;
    --padding-inside-border: 0rem
}

.no-border {
    border-width: 0;
}

.hidden {
    display: none;
}

span {
    font-size: var(--font-size);
}

details {
    > summary {
        list-style: none;
    }

    > summary {
        &:before {
            content: '\f0da';
            display: inline-block;
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            margin-right: var(--padding-inside-border);
            transition: rotate 200ms;

            rotate: 0deg;
        }            
    }

    &[open] {
        > summary {
            &:before {
                rotate: 90deg;
           }
        }
    }

    > ul {
        margin: 0;
        list-style: none;
        padding-left: 1rem;
    }
}

.avatar-16,
.avatar-24,
.avatar-32,
.avatar-50 {
    display: inline-block;

    border-radius: 100%;
    border: var(--border-color) 1px solid;

    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.avatar-16 {
    width: 1rem;
    height: 1rem;
}

.avatar-24 {
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    top: 0.375rem;
}

.avatar-32 {
    width: 2rem;
    height: 2rem;
}

.avatar-50 {
    width: 3.25rem;
    height: 3.25rem;
}

.splash-screen {
    display: none;
}

@property --deg1 {
  syntax: "<angle>";
  inherits: false;
  initial-value: 217deg;
}

@property --deg2 {
  syntax: "<angle>";
  inherits: false;
  initial-value: 127deg;
}

@property --deg3 {
  syntax: "<angle>";
  inherits: false;
  initial-value: 336deg;
}

@property --x1 {
  syntax: "<length> | <percentage>";
  inherits: false;
  initial-value: 25%;
}

@property --y1 {
  syntax: "<length> | <percentage>";
  inherits: false;
  initial-value: 25%;
}

@property --x2 {
  syntax: "<length> | <percentage>";
  inherits: false;
  initial-value: 75%;
}

@property --y2 {
  syntax: "<length> | <percentage>";
  inherits: false;
  initial-value: 75%;
}

:root {
    --x1: 25%;
    --color1: rgba(255, 0, 0, .8);
    --deg1: 217deg;
    --deg2: 127deg;
    --deg3: 336deg;
}

.splash-screen.open {
    display: block;
    z-index: 1;
    position: fixed;
    inset: 0;

    text-align: center;
    padding-top: calc((100vh - 21px) / 2);

    animation: 3s linear move-linears infinite;
    background: 
                radial-gradient(circle at var(--x1) var(--y1), rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.7)),
                radial-gradient(circle at var(--x2) var(--y2), rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5)),
/*
                linear-gradient(var(--deg1), var(--color1), rgba(255,0,0,0) 70.71%),
                linear-gradient(var(--deg2), rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
                linear-gradient(var(--deg3), rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%),
*/
                linear-gradient(0deg, rgba(255,255,255,1), rgba(255,255,255,1) 100%);
}

@keyframes move-linears {
  0% { 
      --x1: 25%;
      --x2: 75%;
      --y1: 25%;
      --y2: 75%;
  }
  25%   { 
      --x1: 75%;
      --x2: 25%;
      --y1: 25%;
      --y2: 75%;
  }
  50%   { 
      --x1: 75%;
      --x2: 25%;
      --y1: 75%;
      --y2: 25%;
  }
  75% { 
      --x1: 25%;
      --x2: 75%;
      --y1: 75%;
      --y2: 25%;
  }
  100% { 
      --x1: 25%;
      --x2: 75%;
      --y1: 25%;
      --y2: 75%;
  }
}

main {
    min-height: calc(100vh - 4rem);
}

templates {
    display: none;
}