: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;
}


/* 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;
}

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;
}

.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);
}

.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);
}

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