@font-face {
    font-family: Alice;
    src: url('../fonts/alice/Alice-Regular.ttf') format('truetype');
}

@font-face {
    font-family: Satisfy;
    src: url('../fonts/satisfy/Satisfy-Regular.ttf') format('truetype');
}

html {
    --metric-box-spacing: 1em;
    font-size: clamp(1rem, 0.75rem + 1.5vw, 1.5rem);
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: Alice, sans-serif;
    line-height: 1.4;
}

body * {
    overflow: auto;
}

:is(h1, h2, h3, p) {
    max-inline-size: initial;
}

.p-0 {
    padding: 0;
}

.mt-0p5 {
    margin-top: 0.5em;
}

.mt-0 {
    margin-top: 0;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 1em;
}

.mb-1p5 {
    margin-bottom: 1.5em;
}

.pr-0p5 {
    padding-right: 0.5em;
}

header,
footer {
    text-align: center;
    padding: var(--metric-box-spacing);
}

header {
    position: relative;
    background: hsl(134deg 23% 15%) -webkit-linear-gradient(-90deg, hsl(134deg 23% 12%), hsl(134deg 23% 18%));
    color: white;
    overflow: hidden;
}

header::before {
    position: absolute;
    left: -10%;
    top: 0;
    width: 50%;
    height: 100%;
    background-image: url(../img/roses.png);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: -300px;
    content: "";
}

header::after {
    position: absolute;
    right: -10%;
    top: 0;
    width: 50%;
    height: 100%;
    background-image: url(../img/roses.png);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: -300px;
    content: "";
    transform: rotate(180deg);
}

header .title {
    color: hsl(38deg 52% 51%);
    background-clip: initial;
    background: -webkit-linear-gradient(45deg, hsl(38deg 55% 35%), hsl(38deg 90% 70%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    overflow: visible;
    margin-bottom: 0;
}

header .date {
    margin-bottom: 0;
    margin-top: 0;
}

header .remaining {
    margin-top: 0;
}

main>section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1em;
}

main>section>article {
    max-inline-size: 66ch;
    box-sizing: border-box;
    padding: 1em;
}

.title {
    font-family: Satisfy, serif;
}


.navbar ul {
    list-style-type: none;
    background-color: hsl(0deg 0% 9%);
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.navbar ul li a {
    display: block;
    color: hsl(0, 0%, 98%);
    padding: 0.65em 1.2em;
    text-decoration: none;
    transition: all 200ms;
}

.navbar ul li a.active {
    color: hsl(38deg 40% 90%);
    text-shadow: rgba(0, 0, 0, 0.5) 0 -1px 0;
    background: hsl(38deg 52% 51%) -webkit-linear-gradient(45deg, hsl(38deg 55% 35%), hsl(38deg 90% 70%));
}

.navbar ul li a.active:hover {
    background: hsl(38deg 32% 61%) -webkit-linear-gradient(45deg, hsl(38deg 45% 50%), hsl(38deg 80% 80%));
}

.navbar ul li a:hover {
    background-color: hsl(0, 0%, 2%);
}

.message {
    padding: 1em 1.5em;
    border-radius: 12px;
    text-align: center;
}

.error {
    color: hsl(0, 61%, 36%);
    background-color: hsl(0, 49%, 87%);
}

.success {
    color: hsl(133, 61%, 36%);
    background-color: hsl(133, 49%, 87%);
}

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

.text-size-1p2 {
    font-size: 1.2em;
}

input[type="text"].code {
    font-family: monospace;
    font-size: 2em;
    border-radius: 12px;
    padding: 0.2em 0.4em;
    border: none;
    background: rgba(0,0,0,0.3);
    color: rgba(0,0,0,0.6);
    outline: 0;
    text-align: center;
    border-width: 3px;
    border-color: transparent;
    border-style: solid;
}

input[type="text"].code:hover {
    background: rgba(0,0,0,0.42);
}

input[type="text"].code:active {
    background: rgba(0,0,0,0.5);
}

input[type="text"].code:focus {
    border-color: rgba(0,0,0,0.3);
}

input[type="submit"].code-confirm {
    font-size: 2em;
    padding: 0.2em 0.4em;
    border-radius: 12px;
    border-width: 3px;
    border-color: transparent;
    border-style: none;
}

table.itemlist {
    border-collapse: collapse;
}

table.itemlist td {
    padding: 0.2em 0.5em;
    font-size: 0.9rem;
    vertical-align: middle;
}

table.itemlist tr.heading td {
    padding: 0.5em 0.7em;
    font-size: 1rem;

    border-radius: 10px 10px 0 0;
    background: hsl(134deg 23% 30%);
    color: white;
    font-weight: bold;
}

table.itemlist tr:nth-child(even) {
    background: hsl(38deg 40% 90%);
}

table.itemlist tr:nth-child(odd) {
    background: hsl(38deg 40% 95%);
}

table.itemlist tr.spacing {
    display: block;
    height: 1em;
    background: transparent;
}

table.itemlist td.input {
    padding: 0px;
}

table.itemlist td.input input[type="text"] {
    font-size: 1em;
    padding: 0.1em 0.25em;
    margin: 0.1em 0.25em;
    box-sizing: border-box;
    font-family: Alice, sans-serif;
    border: 2px rgba(0,0,0,0.3) solid;
    background: transparent;
    color: hsl(134deg 23% 30%);
    border-radius: 4px;
}

table.itemlist td.input input[type="text"]:focus {
    outline: 0;
    border-color: hsl(134deg 23% 30%);
}

table.itemlist td.controls {
    padding: 0;
}

input[type="submit"] {
    box-sizing: border-box;
    text-shadow: rgba(0, 0, 0, 0.5) 0 -1px 0;
    background: hsl(134deg 23% 30%) -webkit-linear-gradient(45deg, hsl(134deg 23% 30%), hsl(134, 42%, 38%));
    color: white;
    border: 0;
    padding: 0.3em 0.6em;
    font-family: Alice, sans-serif;
    cursor: pointer;
    border-radius: 4px;
    font-size: 1em;
}

input.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

input[type="submit"]:hover {
    background: hsl(134deg 23% 40%) -webkit-linear-gradient(45deg, hsl(134deg 23% 40%), hsl(134, 42%, 48%));
}

input[type="submit"]:active {
    background: hsl(134deg 23% 20%) -webkit-linear-gradient(45deg, hsl(134deg 23% 20%), hsl(134, 42%, 28%));
    color: rgba(255, 255, 255, 0.8);
}

input[type="submit"].red {
    background: hsl(0, 61%, 26%) -webkit-linear-gradient(45deg, hsl(0, 61%, 26%), hsl(0, 61%, 36%));
}

input[type="submit"].red:hover {
    background: hsl(0, 61%, 36%) -webkit-linear-gradient(45deg, hsl(0, 61%, 36%), hsl(0, 61%, 46%));
}

input[type="submit"].red:active {
    background: hsl(0, 61%, 16%) -webkit-linear-gradient(45deg, hsl(0, 61%, 16%), hsl(0, 61%, 26%));
}

input[type="submit"]:focus {
    outline: 0;
}

table.itemlist td.controls input[type="submit"] {
    position: block;
    height: 100%;
    width: 100%;
    font-size: 0.8em;
}

.faint {
    color: rgba(0, 0, 0, 0.5);
}

span.bringer {
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.7rem;
}

select {
    font-family: Alice, sans-serif;
    font-size: 1em;
}

.confirm-status.yes {
    color: white;
    background: hsl(134deg 23% 40%) -webkit-linear-gradient(45deg, hsl(134deg 23% 40%), hsl(134, 42%, 48%));
}

.confirm-status.no {
    color: white;
    background: hsl(0, 61%, 26%) -webkit-linear-gradient(45deg, hsl(0, 61%, 26%), hsl(0, 61%, 36%));
}

.confirm-status.undecided {
    color: black;
    background: hsl(49, 65%, 43%) -webkit-linear-gradient(45deg, hsl(44, 70%, 49%), hsl(49, 69%, 53%));
}