@font-face {
    font-family: Montserrat;
    src: url('/public/fonts/Montserrat-VariableFont_wght.ttf');
    font-style: normal;
  }
@font-face {
    font-family: Montserrat;
    src: url('/public/fonts/Montserrat-Italic-VariableFont_wght.ttf');
    font-style: italic;
  }

:root {
    box-sizing: border-box;
    --text: #140701;
    --background: #acbfe6;
    --primary: #04567c;
    --secondary: #a1b2fc;
    --accent: #047c1a;
    --border-width: 0;

    --text: #070906;
    --background: #eef3ed;
    --primary: hsl(229,20%,33%);
    --secondary: hsl(30, 75%, 70%);
    --accent: hsl(351,20%,40%);

    /*--text: hsl(136,22%,10%);
    --background: hsl(138,22%,91%);
    --primary: hsl(258,21%,62%);
    --secondary: hsl(137,21%,83%);
    --accent: hsl(17,21%,43%);

    --text: hsl(25, 76%, 10%);
    --background: hsl(0, 0%, 100%);
    --primary: hsl(24, 78%, 71%);
    --secondary: hsl(25, 79%, 89%);
    --accent: hsl(24, 78%, 49%);

    --text: hsl(166, 81%, 6%);
    --background: hsl(168, 81%, 94%);
    --primary: hsl(257, 82%, 80%);
    --secondary: hsl(347, 83%, 84%);
    --accent: hsl(77, 82%, 44%);*/
    --text: hsl(300, 20%, 2%);
    --background: hsl(300, 20%, 98%);
    --primary: hsl(330, 14%, 80%);
    --secondary: hsl(120, 14%, 80%);
    --accent: hsl(150, 14%, 40%);
    --error-color: hsl(0, 50%, 45%);
    --error-accent: hsl(0, 50%, 55%);
    --table-background-odd: var(--primary); /*hsl(120, 29%, 80%);*/
    --table-background-even: var(--secondary); /*hsl(120, 50%, 90%);*/
}

input {
    background-color: var(--background);
}
input[type=submit], button {
    background-color: var(--secondary);
    border-style: solid;
    border-color: var(--accent);
    border-width: 0.125rem;
    border-radius: 0.25rem;
    margin: 0.125rem;
}
input[type=submit]:hover, button:hover{
    box-shadow: 0.125rem 0.125rem 0.1rem var(--accent);
}
input[disabled=""] {
    background-color: inherit;
    opacity: 0.8;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.hidden {
    display:none
}
#error {
    background-color: var(--error-color);
    width: 30rem;
    margin: 1rem auto 3rem auto;
    min-height: 5rem;
    border-radius: 2rem 0.5rem 0 0.5rem;
    border-color: var(--error-accent);
    border-style: solid;
    text-align: center;
    position: fixed;
    top: 4rem;
    left: 50%;
    transform: translateX(-50%);
}
#error > div{
    display:block;
}
#error > i{
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
}
form{
    border-color: var(--secondary);
    border-style: solid;
    border-radius: 2rem 0.5rem 0 0.5rem;
    margin: auto;
    margin-top: 5rem;
    padding: 1rem;
    background-color: var(--background);
    max-width: 30rem;
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 1rem;
    border-width: 0.125rem;
}

body{
    max-width: 80%;
    margin: auto;
    overflow:auto;
    font-family: Montserrat;
}
.container > .row:nth-child(even) {
    background-color: var(--table-background-even);
}
.container > .row:nth-child(odd) {
    background-color: var(--table-background-odd);
}

.container{
    padding: 10px;
    display: grid;
    grid-auto-flow: row;
    --column-count: 9;
    /*width: 100%;
    grid-row-gap: 10px;
    border-color: var(--primary);
    border-width: 1px;
    border-style: solid;*/
}
.row > .container{
    grid-column:1/-1;
    grid-row:2;
    width: 95%;
}
.row{
    display: inline-grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(var(--column-count), calc(80%/var(--column-count))) auto;
    grid-gap: 10px;
    /*border-radius: 10px;*/
    padding: 10px;
}
.row > div {
    min-width: 120px;
}
.row > div > input, .row > div > select {
    width: 100%;
    margin: 0;
    padding:0;
    border: 2px;
}

/*.orderby::after {
    content: '\2191';
}
.orderby.DESC::after {
    content: '\2193';
}*/
.header {
    font-weight: 700;
    text-transform: capitalize;
}

.tags {
    overflow: auto;
}

.tags > *:not(span) {
    border-radius: 2rem;
    margin: 0.125rem;
    padding: 0.125rem;
    overflow:hidden;
    cursor: default;
    filter: saturate(50%);
}
.tags > *:not(span)>* {
    background-color: inherit;
    margin: 0.25rem;
    border-radius: 2rem;
}
.tags > *:not(span)>*:hover {
    filter: invert(100%);
}
.dropdown {
    display: block;
    position: absolute;
    z-index: 1;
}

@media (max-width: 1200px) {
    .row {
        grid-auto-flow: row;
        grid-template-columns: initial;
        overflow: visible;
    }
    .header {
        display: none;
    }
    .row > div[name]::before {
        content: attr(name) ": ";
        font-weight: 700;
        text-transform: capitalize;
    }
    .row > div[name] {
        display:grid;
        grid-template-columns: 17ch auto;
    }
    .row > div > input, .row > div > select {
        width: 80%;
    }
    .row > .container {
        grid-row: initial;
    }
    .body {
        width: 100%;
    }
}