@font-face {
    font-family: 'BadTyp';
    src: url('./fonts/BadTyp.otf') format('embedded-opentype'), /* Internet Explorer */
         url('./fonts/BadTyp.otf') format('woff2'),             /* Super Modern Browsers */
         url('./fonts/BadTyp.otf') format('woff'),              /* Pretty Modern Browsers */
         url('./fonts/BadTyp.otf') format('truetype'),          /* Safari, Android, iOS */
         url('./fonts/BadTyp.otf') format('svg');               /* Legacy iOS */
}

@font-face {
    font-family: 'Satoshi';
    src: url('./fonts/Satoshi-Regular.otf') format('embedded-opentype'), /* Internet Explorer */
         url('./fonts/Satoshi-Regular.otf') format('woff2'),             /* Super Modern Browsers */
         url('./fonts/Satoshi-Regular.otf') format('woff'),              /* Pretty Modern Browsers */
         url('./fonts/Satoshi-Regular.otf') format('truetype'),          /* Safari, Android, iOS */
         url('./fonts/Satoshi-Regular.otf') format('svg');               /* Legacy iOS */
}


:root {
  --primary-color: #BF4E24;
  --secondary-color: #F4A300;
  --accent-overlay: #6B4C56;
  --background-peach: #F6C7A4;
  --background-sandstone: #D7B595;
  --background-dark: #000;
  --header-font: "BadTyp";
  --body-font: "Satoshi";

  --header-and-footer-font-size: 27px;
}

body {
    box-sizing: border-box;
    margin: 0px;
    font-family: var(--body-font);

    -webkit-transition:background-position 2s ease;
	-moz-transition:background-position 2s ease;
	-o-transition:background-position 2s ease;
	transition:background-position 2s ease;
}

h1, h2, h3 {
    font-family: var(--header-font);
    text-transform: capitalize;
    box-sizing: border-box;
    margin: 0px 0px 16px;
    min-width: 0px;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    margin: 0px;
}

h1 {
    font-size: 72px;
}

h2 {
    font-size: 64px;
}

h3 {
    font-size: 48px;
}

h4, .smaller-h1 {
    font-size: 32px;
    margin: 0px;
}

h4 {
    font-family: var(--body-font);
}

h5 {
    font-size: 24px;
    margin-bottom: 0px;
}

p, pre {
    font-size: 18px;
}

ul {
    padding-left: 15px;
}

nav, footer {
    background: var(--background-dark);
    color: white;
    text-align: left;
}

nav {
    height: 15vh;
    line-height: 20px;
    padding: 0 2em;
}

/* Hide the hamburger menu */
nav .icon {
  display: none;
}

footer {
    height: 35vh;
    padding: 2em 2em 1em 2em;
}

nav, .footer {
    text-transform: uppercase;
    width: 100%;
    box-sizing: border-box;
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--header-font);
}

.footer {
    line-height: 32px;
    text-align: right;
    flex-wrap: wrap;
    font-size: var(--header-and-footer-font-size);
}

nav li, .footer li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav a, footer a {
    font-family: var(--header-font);
    color: white;
    text-decoration: none;
}

nav a:hover, footer a:hover {
    color: var(--secondary-color);
}

.footer .primary-btn {
    padding: 7px;
    margin-top: 8px;
}

.attribution {
    border-top: 1px solid white;
    background: var(--background-dark);
    color: white;
    line-height: 10px;
    margin-top: 15px;
}

.attribution a {
    font-family: var(--body-font);
}

.logo {
    width: 12vh;
    display: block;
}

img {
    max-width: 100%;
    object-fit: cover;
}

.container {
    position: relative;
    text-align: center;
    display: flex;
    padding: 20px;
    flex-direction: row;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: space-between;
}

.hero {
    background-position: 10%;
    height: 60vh;
    width: 100%;
    padding: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    flex-wrap: wrap;

    /* vertically center elements */
    align-items: center;
    /* horizontally center elements */
    justify-content: center;

    /* make text white */
    color: white;
}

.hero h1 {
    text-align: center;
    position: absolute;
}

.overlay:before {
    content: "";
    display: block;
    position: absolute;
    color: white;
    background: var(--accent-overlay);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    opacity: 30%;
}

.gallery-image {
    height: 55vh;
    min-height: 400px;
    width: 100%;
}

.cover-image {
    height: auto;
}

.primary-btn, .secondary-btn {
    padding: 25px 30px;
    text-transform: uppercase;
    color: white;
    text-decoration: none;
    font-family: var(--header-font);
    display: block;
}

.primary-btn:hover, .secondary-btn:hover {
    color: white;
}

.primary-btn {
    background-color: var(--primary-color);
}

.secondary-btn {
    background-color: var(--secondary-color);
}

.bg-primary {
    background-color: var(--primary-color);
    color: white;
}

.bg-secondary {
    background-color: var(--secondary-color);
    color: black;
}

.bg-secondary h2, .bg-secondary h3, .bg-secondary h4 {
    color: white;
}

.bg-white {
    background-color: white;
    color: black;
}

.bg-purple {
    background: var(--accent-overlay);
    color: white;
}

.text-highlight {
    color: var(--secondary-color);
}

.spacer {
    padding: 15px 0px;
    width: 100%;
}

.gallery-image-container {
    flex-basis: 45%;
}

.text-container {
    flex-basis: 50%;
}

.offerings-container {
    position: relative;
    text-align: center;
    display: flex;
    padding: 20px;
    flex-direction: row;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-between;
    height: auto;
    font-family: var(--header-font);
}

.offerings-container h4 {
    font-family: var(--header-font);
}

.offering {
    width: 30%;
    text-decoration: none;
    color: white;
}

.offering-spacer {
    padding: 40px 0px;
    width: 100%;
}

/* need to redo this in JS to get the text and the image's border to change at the same time when hovering the offering parent */
/* .offering:hover {
    color: var(--secondary-color);
}

.offering img:hover {
    border-color: var(--secondary-color);
} */

.offerings-thumbnail {
    border-radius: 15%;
    border: 3px solid white;
    width: 100%;
    height: 90%;
}

/* Carousel from: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_overflow/CSS_carousels */
.carousel ul {
  width: 100vw;
  height: auto;
  padding: 20px;
  display: flex;
  gap: 4vw;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  box-sizing: border-box;
  anchor-name: --carousel;
}

.carousel li {
  list-style-type: none;
  flex: 0 0 75%;
  scroll-snap-align: center;
}

@media screen and (max-width: 700px) {
    h1 {
        font-size: 64px;
    }

    h2, h3, .smaller-h1 {
        font-size: 32px;
    }

    h4 {
        font-size: 24px;
    }

    h5 {
        font-size: 20px;
    }

    footer {
        height: auto;
    }

    .footer {
        flex-wrap: nowrap;
        align-items: flex-start;
        font-size: 18px;
    }

    .container {
        flex-direction: column;
    }

    .gallery-image-container, .text-container {
        width: 90%;
        margin: auto;
    }

    /* Consider making this a carousel */
    .offerings-container {
        height: auto;
    }

    .offering {
        width: 80%;
        margin-bottom: 80px;
    }

    .offering-spacer {
        padding: 0px 0px;
        width: 100%;
    }
}

@media screen and (max-width: 1200px) {
    nav a, nav .primary-btn {
        display: none;
    }

    nav.responsive a {
        display: block;
    }

    nav .icon {
        display: block;
        order: 10; /* nav doesn't go to 10, but I want it always last when menu isn't open */
    }

    .logo {
        width: 10vh;
    }

    nav.responsive .icon {
        order: -1; /* This should be at the top always */
        align-self: flex-end;
        position: absolute;
        top: 50px;
    }

    nav.responsive {
        align-items: center;
        justify-content: space-evenly;
        flex-direction: column;
        height: 100vh;
        padding-bottom: 50px;
    }

    .attribution p {
        line-height: 1.5;
        font-size: 14px;
    }
}