:root {
    --warmWhite: #fff6f6;
    --black: #272727;
}

@font-face { font-family: SpecialElite; src: url('../assets/fonts/SpecialElite.ttf'); }

html, body {
    font-family: SpecialElite;
    font-weight: 900;
    font-size: 17pt;
    color: var(--black);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07);
    height: 100%;
    overflow-y: hidden;
}

h1 {
    font-size: 45pt;
}

h2 {
    font-size: 25pt;
}

.small {
    font-size: 12pt;
}

@media (max-width: 800px) {
    html, body {
        font-size: 12pt;
    }

    h1 {
        font-size: 25pt;
    }

    h2 {
        font-size: 17pt;
    }

    .small {
        font-size: 9pt;
    }
}

body, .smooth-container { scroll-behavior: smooth }

#container {
    display: grid;
    margin:0;
    padding:0;
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    background-color: var(--warmWhite);
    width: 100%;
}

.hidden {
    visibility: hidden;
}

#menuDesktop {
    display: inline-block;
    z-index: 9;
}

.menu {
    display: grid;
    grid-auto-flow: column;
    background-color: rgba(255, 246, 246, 0.7);
    width: 100%;
}

.menuLeft {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
}

.menuRight {
    display: grid;
    grid-auto-flow: column;
    justify-content: end;
}

.menuItem {
    font-size: x-large;
    padding: 30px;
}

.menuItemImg {
    padding: 20px;
}

a {
    color: inherit;
    text-decoration: inherit;
}

#menuMobile {
    display: none;
    z-index: 9;
}

/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.85); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 34px;
    color: #818181;
    display: block; /* Display block instead of inline */
}

.overlay-content .mobileImg {
    display: inline-block;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    left: 45px;
    font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-width: 900px) {
    #menuDesktop { display: none; }
    #menuMobile { display: inline-block; }
}

.slide {
    transform-style: inherit;
}

#logo {
    display: grid;
    box-sizing: border-box;
    padding: 50px;
    background-image: url("../assets/photos/moss.jpg");
    z-index: 2;
    background-position: center;
    background-size: cover;
    align-items: center;
    height: 70vh;
    margin-top: 15vh;
    margin-bottom: 15vh;
    width: 100%;
}

#logo img {
    max-width: 100%;
    height: auto;
    transform: translateZ(.25px) scale(.75);
    transform-origin: 50% 100%;
    animation: fadein ease-in 1;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-duration: 1.5s;
    animation-delay: 1s
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    pointer-events: none;
}

#about {
    display: grid;
    min-height: 130vh;
    height: 100%;
    grid-auto-flow: column;
    grid-gap: 100px;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    padding-left: 10vw;
    padding-right: 10vw;
    align-items: center;
    box-sizing: border-box;
}

#about p {
    text-align: justify;
    line-height: 140%;
    padding: 10%;
}

#about img {
    position: absolute;
    top: 50%;
    left: 45%;
    width: 600px;
    height: 450px;
    transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
    padding: 10px;
    border-radius: 5px;
    background: rgba(240,230,220, .7);
    box-shadow: 0 0 8px rgba(0, 0, 0, .7);
    object-fit: cover;
    object-position: 50% 50%;
}

#about img:last-of-type {
    transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}

@media (max-width: 1400px) {
    #about img {
        width: 450px;
        height: 300px;
    }
}

@media (max-width: 1100px) {
    #about {
        grid-template-rows: 0 1fr;
        grid-template-columns: 1fr;
        align-items: start;
    }

    #about img {
        display: block;
        top: 100%;
        left: 60%;
    }
}

@media (max-width: 700px) {
    #about img {
        width: 230px;
        height: 153px;
    }
}

#pricing {
    background-color: var(--black);
    color: var(--warmWhite);
    padding-left: 20vw;
    padding-right: 20vw;
    width: 100%;
    box-sizing: border-box;
    z-index: -1;
}

#pricingList {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 40px;
}

@media (max-width: 800px) {
    #pricingList {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

.pricingSublist {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-row-gap: 10px;
    grid-column-gap: 20px;
}

.justifyLeft {
    justify-self: start;
    align-self: center;
    text-align: start;
}

.justifyRight {
    justify-self: end;
    align-self: center;
    text-align: end;
}

#pricing h1 {
    text-align: center;
}

#pricing h2 {
    margin-bottom: 15px;
}

#contact {
    min-height: 130vh;
    background-color: var(--black);
    color: var(--warmWhite);
    display: grid;
    grid-template-rows: 1fr 1fr;
    box-sizing: border-box;
    padding-bottom: 10vh;
    width: 100%;
    height: 100%;
}

#contactInfo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-column-gap: 50px;
    justify-items: start;
    padding-left: 20vw;
    padding-right: 20vw;
    padding-bottom: 50px;
}

#contactInfo div {
    padding-top: 2px;
    padding-bottom: 2px; 
}

#contactInfo p {
    text-align: justify;
}

#contactInfo li {
    padding-top: 2px;
    padding-bottom: 2px;
}

#openingHoursContent {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-row-gap: 5px;
    grid-column-gap: 20px;
}

#googleMaps {
    height: 100%;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
#loading {
    z-index: 1000;
    position: fixed;
    top: calc(50vh - 50px);
    left: calc(50vw - 50px);
    border: 1px solid #000;
    border-right: 0;
    border-bottom: 0;
    -webkit-border-radius: 100px;
    height: 100px;
    width: 100px;
    -webkit-transition: all 0.5s ease-in;
    -webkit-animation-name:             rotate;
    -webkit-animation-duration:         1.0s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;
}

.visible {
    visibility: visible;
}