@font-face {
    font-family: 'Satoshi-Variable';
    src: url('../fonts/Satoshi-Variable.woff2') format('woff2'),
    url('../fonts/Satoshi-Variable.woff') format('woff'),
    url('../fonts/Satoshi-Variable.ttf') format('truetype');
    font-weight: 300 900;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'NewTitle-Variable';
    src: url('../fonts/NewTitle-Variable.woff2') format('woff2'),
    url('../fonts/NewTitle-Variable.woff') format('woff'),
    url('../fonts/NewTitle-Variable.ttf') format('truetype');
    font-weight: 200 700;
    font-display: swap;
    font-style: normal;
}

:root {
    --gap: 5px;
    --border-radius: 7px;
    --padding: 10px;
    --padding-inline: 5px 10px;
    --font-size: 18px;
    --breakpoint-small: 600px;
    --breakpoint-medium: 900px;
    --secondary-25: #FEEAD1;
    --secondary-50: #FED39E;
    --secondary-60: #FDCB7F;
    --secondary-75: #FDA335;
    --primary-25: #274630;
    --primary-40: #3A5D42;
    --primary-50: #499F68;
    --primary-75: #77B28C;
    --tertiary-50: #e08129;
    --red: #f0492d;
    --red-hover: #d43d1a;
    --green: #27AE60;
}

::selection {
    color: var(--secondary-50);
    background: var(--primary-25);
}

* {
    font-family: 'Satoshi-Variable', sans-serif;
}

h1, h2, h3 {
    font-family: 'NewTitle-Variable', sans-serif;
    max-width: 100%;
}

h1 {
    font-size: 4rem;
    background: var(--primary-25);
    border-radius: calc(var(--border-radius) * 2);
    color: var(--secondary-75);
    padding: 0 20px;
    border-bottom: 4px solid var(--secondary-75);
    text-align: center;
}

h2 {
    font-size: 2.5em;
    width: max-content;
    line-height: 1.2;
}

h3 {
    font-weight: 900;
    font-size: 2em;
}

body, html {
    height: 100%;
    margin: 0;
    color: var(--primary-25);
    background: var(--secondary-50);
    font-size: var(--font-size);
    line-height: 1.5;
    cursor: url('../cursors/bubbly-orange-drink/bubbly-orange-drink-1.png'), auto;
    animation: bubbly-orange-drink 1s infinite;
}

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

#app {
    padding: var(--padding);
    width: var(--breakpoint-medium);
    margin: 0 auto;
    max-width: calc(100% - var(--padding) * 2);
}

.flex {
    align-items: center;
}

.flex, .flex-v {
    display: flex;
    gap: var(--gap);
}

.flex-v {
    flex-direction: column;
}

.space-between {
    justify-content: space-between;
}

.rounded {
    border-radius: var(--border-radius);
}

.padded-inline {
    padding: var(--padding-inline);
}

.hoverable:hover {
    background: var(--secondary-60);
}

a {
    color: var(--primary-25);
    text-decoration: none;
    font-weight: 600;
}

a:hover {
    text-decoration: underline;
    font-weight: 900;
}

button {
    align-items: center;
    cursor: var(--cursor-pointer);
    min-width: max-content;
}

button, input, select, textarea {
    color: var(--secondary-50);
    padding: var(--padding-inline);
    background: var(--primary-25);
    border: none;
    border-radius: var(--border-radius);
    width: max-content;
    font-size: var(--font-size);
    max-width: calc(100% - var(--padding) * 2);
}

button.disabled, input.disabled, select.disabled, textarea.disabled {
    cursor: not-allowed;
    background: var(--primary-40);
}

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--secondary-75);
    background: var(--primary-40);
}

button:hover .material-symbols-outlined, button:hover img, .nav-link:hover img {
    transform: translateY(-2px);
}

input, textarea {
    cursor: var(--cursor-input);
}

textarea {
    width: min(var(--breakpoint-medium), calc(100% - 20px));
}

.big, .big .material-symbols-outlined {
    font-size: 1.5em;
}

.small, .small .material-symbols-outlined {
    font-size: 0.8em;
}

.big-gap {
    gap: calc(var(--gap) * 3);
}

.full-width {
    width: 100%;
}

button:hover, input:hover, select:hover, textarea:hover {
    background: var(--primary-40);
}

button.negative {
    background: var(--red);
}

button.negative:hover {
    background: var(--red-hover);
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

.step-number {
    align-self: baseline;
}

section, .dialog-content {
    border: 1px solid var(--primary-25);
    padding: calc(var(--padding) * 2);
    border-radius: var(--border-radius);
}

.dialog-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
}

.dialog-content {
    margin: auto;
    width: max-content;
    background: var(--secondary-60);
    box-shadow: 4px 4px 0 0 var(--primary-25);
}

@media (max-width: var(--breakpoint-medium)) {
    #app {
        width: 100%;
    }
}

#notifications, #timers {
    position: fixed;
    top: 0;
    right: 4px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: var(--padding);
}

#timers {
    left: 4px;
    right: auto;
}

.notification {
    padding: var(--padding);
    background: var(--secondary-60);
    border-radius: var(--border-radius);
    box-shadow: 4px 4px 0 0 var(--primary-25);
}

.notification.error {
    background: var(--red);
    color: var(--secondary-50);
}

.notification.warning {
    background: var(--secondary-75);
    color: var(--primary-25);
}

.notification.success {
    background: var(--primary-25);
    color: var(--secondary-50);
    box-shadow: 4px 4px 0 0 var(--secondary-75);
}

.popout-search {
    position: relative;
    width: max-content;
}

.popout-search .search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 300px;
    background: var(--secondary-60);
    border-radius: var(--border-radius);
    box-shadow: 4px 4px 0 0 var(--primary-25);
    z-index: 100;
    overflow: auto;
}

.search-result {
    padding: var(--padding-inline);
    cursor: var(--cursor-pointer);
}

.search-result:hover, .search-result.active {
    background: var(--secondary-75);
}

a {
    cursor: var(--cursor-pointer);
}

.nav-link {
    color: var(--primary-25);
    text-decoration: none;
    padding: var(--padding-inline);
    border-radius: var(--border-radius);
    font-weight: 900;
    border: 1px solid transparent;
}

.nav-link.active {
    background: var(--secondary-75);
    color: var(--primary-25);
    font-weight: 900;
}

.nav-link:hover {
    border: 1px solid var(--primary-25);
}

.spinner {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 2px solid var(--primary-25);
    border-top-color: var(--secondary-75);
    animation: spinner 1s infinite linear;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

.icon {
    width: 1em;
    height: 1em;
}

.flag {
    transition: transform 0.05s ease;
}

.flag:hover {
    transform: translateY(-3px);
}

.slot-display {
    animation: slot-display .5s infinite linear;
    width: 100%;
    height: 200%;
    background: linear-gradient(0deg, var(--primary-25) 0%, var(--primary-50) 25%, var(--primary-25), var(--primary-50) 75%, var(--primary-25));
    position: absolute;
    top: 0;
    left: 0;
}

.generator-recipes {
    display: flex;
    flex-wrap: wrap;
}

.recipe-with-slot {
    overflow: hidden;
}

.generator-recipe {
    padding: var(--padding);
    border: 1px solid;
    width: calc(33% - (var(--padding) * 2) - 2px);
    position: relative;
    min-height: 50px;
}

@keyframes slot-display {
    0% {
        top: -100%;
    }
    100% {
        top: 0;
    }
}

.recipe-type-indicator {
    display: flex;
    gap: var(--gap);
    align-items: center;
}

.recipe-type-indicator-bubble {
    --bubble-size: 5px;
    width: var(--bubble-size);
    height: var(--bubble-size);
    border-radius: 50%;
    border: 1px solid var(--primary-25);
}

.dice-area canvas {
    max-width: 100px;
    max-height: 100px;
    filter: contrast(1.6);
}

.recipe-type-indicator-bubble.active {
    background: var(--primary-25);
}

.recipe-type-indicator-bubble:nth-child(2) {
    --bubble-size: 8px;
}

.collapseable-header {
    cursor: var(--cursor-pointer);
}

.collapseable-container.collapsed .collapseable-content {
    display: none;
}

.draggable {
    cursor: grab;
}

.warning {
    color: var(--tertiary-50);
}

.step-icon * {
    font-size: 0.8em;
}

.step-icon:hover {
    transform: scale(1.3);
}

.step-actions {
    padding: 2px 8px;
    border: 1px solid var(--primary-25);
    border-radius: var(--border-radius);
    width: max-content;
}

.step-actions:empty {
    display: none;
}

.two-thirds-column {
    width: calc(66.66666666666667% - var(--padding) * 2);
}

.one-third-column {
    width: calc(33.33333333333333% - var(--padding) * 2);
}

.align-top {
    align-items: baseline;
}

.generator-recipe h2 {
    min-height: 2.5em;
}

.ingredient-image {
    width: 1em;
    height: 1em;
}

img {
    image-rendering: pixelated;
}

.meal-plan-popup-button {
    position: absolute;
    top: 0;
    right: var(--gap);
    z-index: 100;
    background: var(--primary-25);
    border-radius: var(--border-radius);
    transform: translateY(-30%);
}

.meal-plan-recipe-menu {
    position: absolute;
    top: var(--gap);
    right: var(--gap);
    transform: translateX(100%);
    z-index: 100;
    border: 1px solid var(--primary-25);
    background: var(--secondary-50);
    border-radius: var(--border-radius);
    overflow: auto;
}

.meal-plan-day-selection {
    padding: var(--padding-inline);
}

.meal-plan-day-selection.day-selected {
    border-left: 10px solid var(--secondary-75);
}

.small-input {
    width: 50px;
    line-height: 1;
    padding: 0 .5em;
    background: transparent;
    color: var(--primary-25);
    border: 1px solid var(--primary-25);
}

.small-input:hover, .small-input:focus, .small-input:focus-visible {
    background: var(--secondary-60);
}

.meal-plan-day {
    padding: var(--gap);
    border: 1px solid var(--primary-25);
    border-radius: var(--border-radius);
}

.recipe-step {
    background: var(--secondary-60);
    border-radius: var(--border-radius);
    padding: .25em 1em;
}

.recipe-step.done {
    background: var(--secondary-50);
    text-decoration: line-through;
    opacity: .5;
    transition: all .5s ease-in-out;
}

.recipe-step:hover {
    background: var(--primary-75);
}