:root {
    --background-color: #1b1515;

    --white-text: #FFF2D2;
    --dark-green: #3E5C3A;
    --accent-beige: #D4CAAE;

    --shadow-black: rgba(0, 0, 0, 0.5);
    --shadow-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0.57) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0) 100%);

    --button-hover-overlay: rgba(255, 255, 255, 0.192);
    --input-bg: rgb(88, 55, 55);

    --menu-bg: #361c1c;
    --menu-bg2: #713B3B;

    --booking-bg: #361c1c;
    --booking-overlay: rgba(0, 0, 0, 0.3);

    --disabled-grey: grey;
    --status-red: rgb(204, 78, 78);
    --status-green: rgb(78, 204, 78);
    --tab-default: #313131;
    --tab-highlight: #8ab6e9;

    --calendar-white: #E2E2E2;
    --calendar-lighter-grey: #C6C6C6;
    --calendar-light-grey: #ABABAB;
    --calendar-dark-grey: #313131;
    --calendar-text: #0e0e0e;

    --calendar-disabled: #e4e4e4;
    --calendar-disabled-text: rgb(194, 194, 194);

    --time-select-button: #2c79ac;
    --time-select-button-disabled: #2b516b;
    --time-select-button-text: #ffffff;

    --footer-background: #342D2D;
    --footer-text-color: #FFFBF2;
    --footer-gradient: linear-gradient(180deg, rgba(52, 45, 45, 0) 0%, rgba(52, 45, 45, 1) 100%);

    --dark-button: #362727;
    --dark-button-hover: #241a1a;

    --font-hero: "Playfair Display";
    --font-header: "Merriweather", serif;
    --font-regular: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

body {
    margin: 0px;
    background-color: var(--background-color);
}

/* Text */

html {
    font-size: 20px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.headerlike {
    font-family: var(--font-header);
    font-weight: bold;
    color: var(--white-text);
    text-align: center;
    margin: 0.5em 0px;
}

p,
a,
input,
label {
    /*font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;*/
    font-family: var(--font-regular);
    color: var(--white-text);
}

h1 {
    font-size: 5rem;
    z-index: 2;
}

h2 {
    font-size: 4rem;
}

h3 {
    font-size: 3.5rem;
}

h4 {
    font-size: 3rem;
}

h5 {
    font-size: 2.5rem;
}

h6 {
    font-size: 2rem;
}

p,
a,
label {
    font-size: 1.5rem;
}

a {
    transition: background-color 100ms ease-out, color 100ms ease-out;
}

input {
    border-radius: 0.3em;
    font-size: 1rem;
    height: 2em;
    padding: 0.2em;
    background-color: var(--input-bg);
    color: var(--white-text);
    border: none;
}

input:focus {
    outline: none;
}

button {
    border: none;
    transition: filter 100ms ease-out, background-color 200ms ease-out;
}

button:hover {
    cursor: pointer;
}

button.disabled:hover {
    cursor: unset;
}

button.round {
    border-radius: 100%;
    aspect-ratio: 1;
    font-size: 1.5rem;
    height: 1.5em;
}

button.round:hover {
    filter: brightness(75%);
}

button.dark {
    background-color: var(--dark-button);
}

button.dark:hover {
    background-color: var(--dark-button-hover);
}

button.disabled {
    background-color: grey;
}

button.disabled:hover {
    filter: none;
}

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

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

/* Header */

header {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    padding: 2em;
    width: 100%;

    position: absolute;
    z-index: 1;
}

header>a,
header>a img {
    font-size: 1em;
    width: 10em;
    height: 5em;
}

header>a img {
    transition: filter 100ms ease-out;
}

header>a:hover img {
    filter: brightness(130%);
}

nav {
    display: block;
    float: right;
    font-size: 1em;
    padding: 0.5em;
}

nav a {
    text-decoration: none;
    padding: 0.75em 1.5em;
    margin: 0.5em;
    font-size: 1.75em;
}

nav a:hover {
    background-color: var(--button-hover-overlay);
}

/* Hero */

.shadow {
    background: var(--shadow-gradient);
    position: absolute;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 10rem;
}

.hero {
    background-image: url("../img/background/pizza2p.webp");
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100vh;
    max-height: 1800px;
}

.hero-text div {
    font-size: 1em;
}

.hero h1 {
    font-weight: bold;
    font-size: 7.5em;
}

.hero p.headerlike {
    font-family: var(--font-hero);
    font-weight: normal;
    font-size: 2em;
}

.hero h1,
.hero h2 {
    font-family: var(--font-hero);
    margin: 0px;
}

.hero-bar {
    width: 12rem;
    height: 3px;
    background-color: var(--white-text);
    margin: 0px 1.5rem;
}

.hero-bars {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-text {
    margin-bottom: 5rem;
}

.button {
    margin: 0px auto;
    padding: 0.5em 0.7em;

    background-color: var(--dark-green);
    color: var(--white-text);
    box-shadow: 0px 7px 13px black;
    border-radius: 0.3em;

    font-size: 1.5rem;
    text-decoration: none;
}

.button:hover {
    background-color: var(--dark-green);
}

/* Info */

.info-container {
    display: grid;
    grid-template-columns: 14fr 5fr;
}

/*.lunch h3,
.lunch h4,
.lunch p {
    color: #EAE0D5;
    color: rgb(223, 222, 182);
    /*text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);* /
}*/

.lunch {
    background: var(--lunch-bg-end);
    background: radial-gradient(circle, var(--lunch-bg-start) 0%, var(--lunch-bg-end) 100%);
    background: url(../img/background/träbakgrund.webp);
    background-size: cover;
}

.lunch-sub {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    padding: 6rem;
}

.lunch-sub h2,
.lunch-sub h3 {
    margin: 0.125em 0em;
}

.lunch-sub h2 {
    font-weight: normal;
}

.lunch-sub h3 {
    font-size: 5rem;
}

.oh-edge,
.oh-edge2 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
}

.oh-edge {
    float: right;
    height: 100%;
    width: 0.5rem;
    background-image: url(../img/mönster.svg);
    background-position: right;
}

.oh-edge2 {
    width: 100%;
    position: absolute;
    transform: translate(0px, -100%);
    height: 1rem;
    background-image: url(../img/mönster2.svg);
    background-position: right;
}

.oh {
    background-color: var(--dark-green);
    padding: 3em;
}

.oh-sub {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 1rem;

    padding: 1.5rem;
    border: var(--white-text) 2px solid;
    border-radius: 1rem;
    margin-bottom: 3rem;
}

.oh-sub p {
    margin: 0px;
    font-size: 1.5rem;
}

.oh-sub p:nth-child(odd) {
    text-align: right;
    font-weight: bold;
}

/* Lore */

.lore-section {
    background-image: url(../img/background/ugn2.png);
    background-size: cover;
    height: 40rem;
    padding: 3rem;
}

.lore-section p {
    font-size: 1.75rem;
    margin: 2em 0em;
}

.lore-section h2,
.lore-section p.headerlike {
    text-align: left;
    margin: 0.1em;
    font-weight: normal;
}

.lore-section p.headerlike {
    font-family: var(--font-header);
    font-size: 2rem;
}

/* Menu */

.menu-top {
    background-image: url("../img/background/265005176_652401699284263_7412976897170951294_n.webp");
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 40vh;
}

.menu-background {
    background-color: var(--menu-bg);
    padding: 4rem;
}

.menu-background h2,
.menu-background h3 {
    text-align: left;
}

.menu-background h2,
.menu-background h3,
.menu-background p {
    margin: 0px;
}

.menu-background h3 {
    font-size: 3rem;
}

.menu-list {
    padding: 2rem 4rem 0rem 4rem;
    display: grid;
    grid-template-columns: 13fr 1fr;
    row-gap: 2rem;
}

.menu-list.double-price-cols {
    grid-template-columns: 12fr 1fr 1fr;
    padding-top: 0px;
}

.double-menu-list {
    display: flex;
    grid-template-columns: 1fr 1fr;
}

.double-menu-list .menu-list {
    row-gap: 0.5rem;
}

.double-menu-list h3 {
    font-size: 1.5rem;
}

.menu-list>p,
.pricetag {
    margin: auto;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
}

.pricetag {
    float: right;
    font-size: 2.5rem;
}

.menu-lunch {
    margin: 0px auto;
    width: 80%;
    padding: 2rem;
    display: flex;

    background-color: var(--menu-bg2);
    border-radius: 0.5rem;
    box-shadow: 8px 8px 16px var(--shadow-black);
}

.menu-lunch-content {
    padding: 2rem;
}

/* Booking */

.booking-top {
    background-image: url("../img/background/315564691_3261648077409944_855815196485273978_n.webp");
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 40vh;
}

.booking-background {
    background-color: var(--booking-bg);
    padding: 4rem;
}

.booking {
    background-color: var(--booking-overlay);
    border-radius: 1rem;
    width: 100%;
    padding: 2rem 0em;
}

#booking-tabs>div>* {
    margin: 2rem;
}

.booking-input {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.booking-input label,
.booking-input p {
    text-align: right;
    margin: 0.3em 1em;
}

.red {
    background-color: var(--status-red);
}

.green {
    background-color: var(--status-green);
}

.quantity-selector {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.quantity-selector>p {
    display: inline-block;
    border-radius: 2px;
    background-color: var(--input-bg);
    font-size: 2rem;
    margin: 0em 0.5em;
    border-radius: 0.25em;
    height: 1.2em;
    width: 2em;
    text-align: center;
}

#tab-selector>button {
    margin: 1em;
}

#tab-selector>div {
    width: 0.75em;
    height: 0.75em;
    margin: 0.75em;
    border-radius: 100%;
    background-color: var(--tab-default);

    transition: background-color 200ms ease-out;
}

#tab-selector>div.highlighted {
    background-color: var(--tab-highlight);
}

.date-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
}

.calendar {
    width: 70%;
    /*box-shadow: 2px 2px 10px var(--shadow-black);*/
}

.calendar-header {
    background-color: var(--calendar-white);
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    justify-items: center;
}

.calendar-header p {
    font-size: 2.25rem;
    color: var(--calendar-text);
    margin: 0px;
}

.calendar-body {
    display: grid;
    align-items: center;
    justify-items: center;
    background-color: var(--calendar-white);
    width: 100%;
}

.calendar-body p {
    margin: 0px;
    font-size: 1rem;
    font-weight: bold;
    color: var(--calendar-dark-grey);
}

.calendar-body button {
    width: 100%;
    height: 100%;
    font-size: 1.5rem;
    border: 1px var(--calendar-light-grey) solid;

    transition: border-color 100ms ease-out;
}

.calendar-body button.disabled,
.calendar-body button.unfocused {
    color: var(--calendar-disabled-text);
    background-color: var(--calendar-disabled);
}

.calendar-body button:hover {
    border-width: 2px;
    border-color: var(--calendar-text);
}

.calendar-body button.disabled:hover {
    border-width: 1px;
    border-color: unset;
}

.calendar-body button.selected {
    border-width: 3px;
    border-color: var(--calendar-text);
}

.time-list {
    width: 70%;
}

.time-list div {
    width: 100%;
    display: grid;
    grid-template-columns: 4fr 1fr;
    border: 1px var(--calendar-light-grey) solid;
    background-color: var(--calendar-white);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.time-list p {
    color: var(--calendar-text);
    font-weight: bold;
    font-size: 1rem;
    margin: 0.5em 1em;
}

.time-list button {
    margin: 0.25em 0.5em;
    font-size: 1rem;
    border-radius: 0.25em;
    background-color: var(--time-select-button);
    color: var(--time-select-button-text);
}

.time-list button.disabled {
    background-color: var(--time-select-button-disabled);
}

.left-arrow,
.right-arrow {
    mask-image: url("../img/pil.webp");
    mask-position: center;
    mask-size: cover;
    background-color: var(--calendar-text);
    width: 32px;
    height: 32px;
}

.left-arrow {
    mask-image: url("../img/pil2.webp");
}

.left-arrow:hover,
.right-arrow:hover {
    background-color: rgb(85, 85, 85);
}

.information-confirmation h2 {
    font-size: 2.5rem;
}

.information-confirmation p {
    text-align: center;
}

#booking-completed-tab h3 {
    font-size: 2.5rem;
}

/* Footer */

footer {
    background-color: var(--footer-background);
}

.footer-content,
.footer-content>div {
    font-size: 1em;
}

footer p,
footer a:link,
footer a:visited,
footer h2 {
    color: var(--footer-text-color);
    text-decoration: none;
    text-align: center;
}

footer p {
    margin: 1em;
}

footer p,
footer a {
    font-size: 1em;
}

footer h2 {
    font-size: 1.5em;
    font-family: var(--font-regular);
}

.footer-gradient {
    background: var(--footer-gradient);
    width: 100%;
    height: 2rem;
    transform: translate(0, -99%);
    position: absolute;
}

.footer-content {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.footer-content>div {
    margin: 2rem;
}

footer .logo {
    margin: 0.5rem;
    width: 10em;
    height: 5em;
}

i {
    display: inline-block;
    font-size: 1em;
    width: 1em;
    height: 1em;
    margin: 0em 0.25em;
    background-color: var(--footer-text-color);
    mask-size: cover;
    transform: translate(0, 17.5%);
}

.instagram {
    mask-image: url(../img/instagram.svg);
}

.facebook {
    mask-image: url(../img/Facebook_Logo_Secondary.webp);
}

/* Misc */

@keyframes highlighted {
    0% {
        background-color: rgba(255, 255, 255, 0.25);
    }

    50% {
        background-color: rgba(255, 255, 255, 0.35);
    }

    100% {
        background-color: rgba(255, 255, 255, 0.25);
    }
}

.scroll-fade {
    transition: 0.5s;
}

.scroll-highlighted {
    animation-name: highlighted;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    background-color: rgba(255, 0, 0, 1);
}


.image-display {
    border-radius: 1rem;
    box-shadow: 0px 4px 8px var(--shadow-black);
    border: none;
    object-fit: cover;
}

.image-display.round {
    border-radius: 100%;
    box-shadow: 4px 4px 16px black;
}

.center-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.row {
    flex-direction: row;
}

hr.wide {
    margin: 0px;
    height: 5px;
    border: none;
    background-color: var(--accent-beige);
}

hr {
    margin: 2rem 1.5rem;
    height: 3px;
    border: none;
    background-color: var(--accent-beige);
    opacity: 50%;
}

.no-margin {
    margin: 0px;
}

.fade-down,
.fade-up,
.fade-left,
.fade-right {
    transition: transform 600ms ease-in-out, opacity 600ms ease-in-out;
    opacity: 0%;
}

.fade-down {
    transform: translate(0px, -4vh);
}

.fade-up {
    transform: translate(0px, 4vh);
}

.fade-left {
    transform: translate(2vw, 0px);
}

.fade-right {
    transform: translate(-2vw, 0px);
}

.fade-visible {
    transform: translate(0px, 0px);
    opacity: 100%;
}

.fade-delay-1 {
    transition-delay: 150ms;
}

.fade-delay-2 {
    transition-delay: 300ms;
}

.fade-delay-3 {
    transition-delay: 450ms;
}

.fade-delay-4 {
    transition-delay: 600ms;
}

@media (prefers-reduced-motion) {
    .fade-visible {
        transition: none;
    }

}

/* Responsivitet */

/* 1. Large Desktops */
@media (max-width: 1440px) {
    html {
        font-size: 14px;
    }

    header {
        font-size: 1.5rem;
    }

    .image-display {
        width: 300px;
        height: 300px;
    }
}

/* 2. Standard Desktops */
@media (max-width: 1280px) {
    html {
        font-size: 12px;
    }

    .image-display {
        width: 250px;
        height: 250px;
    }
}

/* 3. Tablets (Landscape) */
@media (max-width: 1024px) {
    html {
        font-size: 12px;
    }

    header {
        font-size: 1.5rem;
    }

    .image-display {
        width: 250px;
        height: 250px;
    }
}

/* 4. Tablets (Portrait) */
@media (max-width: 768px) {
    html {
        font-size: 8px;
    }

    header {
        font-size: 1.5rem;
    }

    footer {
        font-size: 1.5rem;
    }

    .image-display {
        width: 200px;
        height: 200px;
        margin: 20px;
    }

    a.button {
        font-size: 2rem;
    }

    .hero {
        height: 90vh;
    }

    .hero p.headerlike {
        font-size: 3rem;
    }

    .hero-bar {
        height: 1px;
    }
}

/* 5. Mobile */
@media (min-width: 479.98px) {
    .visibility-mobile {
        display: none;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 10px;
    }

    .hero {
        max-height: 1000px;
    }

    .hero-text {
        font-size: 0.5rem;
    }

    .hero-bar {
        width: 2rem;
    }

    .hero-text p.headerlike {
        font-size: 1.5rem;
    }

    .info-container {
        display: block;
    }

    .visibility-pc {
        display: none;
    }

    nav {
        float: none;
        padding: 1em 0px;
    }

    nav a {
        margin: 0.1em;
    }

    header {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.8rem;
    }

    a.button {
        font-size: 2.5rem;
    }

    .image-display {
        width: 150px;
        height: 150px;
        margin: 10px auto;
    }

    .lunch-sub {
        padding: 2rem;
        padding-bottom: 4rem;
    }

    .lunch-sub,
    .lunch-sub>div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .menu-background {
        padding: 2rem;
    }

    .menu-list {
        padding: 1rem 2rem 0rem 2rem;
        grid-template-columns: 8fr 2fr;
    }

    .menu-list.double-price-cols {
        grid-template-columns: 6fr 2fr 2fr;
    }

    .double-menu-list h3 {
        font-size: 1.2rem;
    }

    .double-menu-list p {
        font-size: 1.4rem;
    }

    .menu-lunch {
        flex-direction: column-reverse;
    }

    .menu-lunch h2,
    .menu-lunch h3,
    .menu-lunch p {
        text-align: center;
        float: none;
    }

    .footer-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .date-picker {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .calendar {
        width: 90%;
    }
}

@media (max-width: 380px) {
    html {
        font-size: 8px;
    }

    header {
        font-size: 0.85rem;
    }
}

.hidden {
    display: none;
}