:root {
    --body-bg: #FFFFFF;
    --warmgrey-one: #000000;
    --warmgrey-two: #444444;
    --warmgrey-three: #A09E9A;
    --warmgrey-four: #E2DFDD;
    --warmgrey-five: #F6F4F2;
    --mustardyellow: #EFB500;
    --antiquepink: #E9AAB0;
    --petrol: #00576F;
    --petrol-80: #00576F80;
    --green: #65AE2F;
    --orionred: #D60846;
    --open-color: var(--petrol);
    --booked-self-color: var(--green);
    --booked-color: var(--petrol-80);
    --disabled-color: var(--warmgrey-four);
    --light-background: var(--warmgrey-five);
    --base-padding: 9px;
    --base-padding-half: 5px;
    --base-radius: 2px;
    --base-shadow: 1px 1px 3px var(--warmgrey-four);
    --base-font-size: 15px;
    --base-line-height: 23px;
    --line-height-size-level-1: 34px;
    --font-size-level-1: 26px;
    --font-size-level-2: 18px;
    --font-size-level-3: 13px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --body-bg: #000000;
        --warmgrey-one: #FFFFFF;
        --warmgrey-two: #F6F4F2;
        --warmgrey-three: #E2DFDD;
        --warmgrey-four: #A09E9A;
        --warmgrey-five: #444444;
    }
}

/* colors */
.green {
    color: var(--green);
}
.orion-red {
    color: var(--orionred);
}
.petrol {
    color: var(--petrol);
}
.mustardyellow {
    color: var(--mustardyellow);
}
.antiquepink {
    color: var(--mustardyellow);
}
.warmgrey-two {
    color: var(--warmgrey-two);
}
.warmgrey-three {
    color: var(--warmgrey-three);
}
.warmgrey-four {
    color: var(--warmgrey-four);
}
.warmgrey-five {
    color: var(--warmgrey-five);
}

/* backgrounds */
.whiteBG {
    background: var(--body-bg);
}
.warmgrey-two-BG {
    background: var(--warmgrey-two);
}
.warmgrey-five-BG {
    background: var(--warmgrey-five);
}
.greenBG {
    background: var(--green);
    color: #FFFFFF;
}
.orion-red-BG {
    background: var(--orionred);
    color: #FFFFFF;
}
.petrolBG {
    background: var(--petrol);
    color: #FFFFFF;
}
.mustardyellowBG {
    background: var(--mustardyellow);
    color: #FFFFFF;
}
.antiquepinkBG {
    background: var(--antiquepink);
}

/* helper */
.hidden {
    display: none;
}
.minus90deg {
    transform: rotate(-90deg);
}
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

/* forms */
input:not([type='checkbox']),
button,
label {
    display: block;
    border-radius: var(--base-radius);
    padding: var(--base-padding);
    margin: var(--base-padding) auto;
    width: 100%;
}
input:not([type='checkbox']) {
    border: 1px solid var(--warmgrey-four);
}
input[type='checkbox'] {
    width: calc(var(--base-padding)*2);
    height: calc(var(--base-padding)*2);
}
input::placeholder {
    color: var(--warmgrey-three);
    font-weight: 200;
}
@media (prefers-color-scheme: dark) {
    input::placeholder {
        color: var(--warmgrey-four);
    }
}
button {
    color: var(--body-bg);
    font-weight: 800;
    border: 1px solid transparent;
}

/* typo */
a {
    color: inherit;
    text-decoration: none;
}
h1,
.navigation ul li {
    font-size: var(--font-size-level-1);
    line-height: var(--line-height-size-level-1);
}
h1 span {
    display: block;
    font-weight: 600;
}
p {
    margin-top: calc(var(--base-padding)*2);
    margin-bottom: calc(var(--base-padding)*2);
}
p i {
    margin-right: var(--base-padding-half);
}
.font-bold {
    font-family: 'Open Sans Bold', 'Open Sans', sans-serif;
}
.font-regular {
    font-family: 'Open Sans Regular', 'Open Sans', sans-serif;
}
.font-thin {
    font-family: 'Open Sans Thin', 'Open Sans', sans-serif;
}
.font-center{
    text-align: center;
}

/* Icon */
.icon{    
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-style: normal;
}

/*  */
body {
    background: var(--body-bg);
    font-family: 'Open Sans Regular', 'Open Sans', sans-serif;
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
    color: var(--warmgrey-two);
    margin: 0;
    padding: 0;
}
.inner {
    padding-left: calc(var(--base-padding)*2);
    padding-right: calc(var(--base-padding)*2);
    margin: auto;
}
@media screen and (min-width: 360px) {
    .inner {
        max-width: 360px;    
    }
}
header {
    text-align: center;
    margin-top: calc(var(--base-padding)*5);
    margin-bottom: calc(var(--base-padding)*5);
}

section:not(:last-child){
    margin-bottom: calc(var(--base-padding)*4);
}