:root {
   --main-size: 1.25rem;
   --body-font: system-ui, sans-serif;
   --heading-font: system-ui, sans-serif;
   --primary-color: #D01B0C;
   --secondary-color: #301717;
   --tertiary-color: #F8F3E2;
   --xx-large-font-size: clamp(2.5rem, 1.7593rem + 3.7037vw, 5rem);
   --x-large-font-size: clamp(2rem, 1.4815rem + 2.5926vw, 3.75rem);
   --large-font-size: 2.5rem;
   --medium-font-size: 1.5rem;
   --small-font-size: 0.875rem;
   --border-color: #dee2e6;
   --border-radius: .375rem;
}

.mark,
mark {
   padding: unset;
   color: unset;
   background-color: unset;
}

b,
strong {
   font-weight: 700;
}

figure {
   margin: unset;
}

body.no-scroll {
   overflow: hidden;
   padding-inline-end: 0px;
}

.overlay {
   background-color: rgba(0, 0, 0, .5);
   position: fixed;
   width: 100%;
   height: 100%;
   z-index: 999;
   left: 0;
   top: 0;
   display: none;
}

summary {
   list-style: none;
}

summary::-webkit-details-marker {
   display: none;
}

.grecaptcha-badge {
   right: -300px !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

/* input[type=number] { 
  -moz-appearance: textfield;
} */

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
hr {
   margin-block-start: var(--main-size);
   margin-block-end: 0;
   &:first-child {
      margin-block-start: 0;
   }
}

a {
   outline: 0;
   &:hover,
   &:focus,
   &:active {
      outline: 0;
   }
}

.grecaptcha-badge {
   right: -300px !important;
}

.btn-close:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
   outline: 0;
   box-shadow: none;
}

.form-control:focus {
   border-color: none;
   box-shadow: none;
}

img {
   max-width: 100%;
   height: auto;
}

/* ==========================================================================
GENERAL
========================================================================== */

body {
   color: var(--secondary-color);
   background-color: var(--tertiary-color);
   font-family: "Public Sans", sans-serif;
   font-optical-sizing: auto;
   font-size: clamp(0.8125rem, 0.7569rem + 0.2778vw, 1rem);
}

a {
   color: currentColor;
}

#main-header {
   display: flex;
   justify-content: space-between;
   padding: var(--main-size);
   position: fixed;
   width: 100%;
   top: 0;
   left: 0;
   font-weight: 700;
   z-index: 999;
   p {
      margin: 0;
   }
   .logo {
      max-width: 150px;
   }
}

main {
   width: 100%;
   position: fixed;
   height: 100dvh;
   overflow-y: scroll;
   scroll-snap-type: block mandatory;
}

.booking {
   text-decoration: none;
   &:hover {
      text-decoration: underline;
   }
}

section {
   padding: var(--main-size);
   min-height: 100dvh;
   align-content: end;
   scroll-snap-align: start;
}

.section-1 {
   .gallery {
      padding-block: var(--main-size);
      gap: var(--main-size);
   }
   .bottom {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-transform: uppercase;
      gap: var(--main-size);
      p {
         margin: 0;
      }
   }
   .social-link {
      a {
         display: block;
      }
   }
}

.texts {
   position: fixed;
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   padding: var(--main-size);
   padding-block-start: 15vh;
   display: flex;
   pointer-events: none;
   z-index: 5;
   img {
      max-width: none;
      height: 14px;
      display: block;
      transition: all .5s ease-out;
   }
   div {
      flex: 0 0 50%;
      &:first-child {
         a {
            pointer-events: all;
            position: relative;
            display: inline-block;
            transition: all .5s ease-out;
            &::after {
               content: '';
               position: absolute;
               bottom: -5px;
               left: 0;
               width: 100%;
               height: 2px;
               background-color: #D01B0C;
            }
         }
      }
      &:last-child {
         display: flex;
         justify-content: space-between;
      }
   }
}

@media (min-width: 768px) {
   .texts {
      padding: calc(var(--main-size) * 2);
      padding-block-start: 25vh;
      &.unordered {
         div {
            &:last-child {
               img:nth-child(1) {
                  rotate: -5deg;
               }
               img:nth-child(2) {
                  rotate: 10deg;
                  translate: 0 100%;
               }
               img:nth-child(3) {
                  rotate: -5deg;
                  translate: 0 200%;
               }
            }
         }
      }
   }
}

@media (min-width: 992px) {
   .texts {
      gap: var(--main-size);
      padding-block-start: 30vh;
      height: 100%;
      img {
         height: 20px;
      }
      div {
         &:first-child {
            position: relative;
            a {
               position: absolute;
               left: 0;
               top: 0;
            }
         }
      }
      &.unordered {
         div {
            &:first-child {
               a {
                  top: calc(100% - 36px);
                  left: 121%;
               }
            }
         }
      }
   }
}

@media (min-width: 1200px) {
   .texts {
      div {
         &:last-child {
            flex: 0 0 calc(25% - var(--main-size));
         }
      }
   }
}

.section-2 {
   position: relative;
   .bottom {
      display: flex;
      flex-direction: column-reverse;
      gap: var(--main-size);
      text-transform: uppercase;
      strong {
         font-style: italic;
      }
      .long-text {
         text-align: justify;
      }
   }
   .social-link {
      a {
         display: block;
      }
   }
   .goto-section-1 {
      position: absolute;
      right: var(--main-size);
      bottom: var(--main-size);
      z-index: 10;
      img {
         max-width: 20px;
      }
   }
}

@media (min-width: 768px) {
   #main-header {
      padding: calc(var(--main-size) * 2);
      .logo {
         max-width: 100%;
      }
   }
   section {
      padding: calc(var(--main-size) * 2);
   }
   .section-1 {
      .bottom {
         flex-direction: row;
      }
   }
}

@media (max-width: 991px) {
   .section-1 {
      .gallery::-webkit-scrollbar {
         display: none;
      }
      .gallery {
         width: 100vw;
         margin-inline: -1.25rem !important;
         padding-inline: 1.25rem;
         display: flex;
         flex-wrap: nowrap;
         overflow-x: auto;
         scrollbar-width: none;
         -webkit-overflow-scrolling: touch;
         -ms-overflow-style: -ms-autohiding-scrollbar;
         >* {
            flex: 1 0 min(80%, 400px);
         }
      }
   }
}

@media (min-width: 992px) {
   .section-1 {
      .gallery {
         display: grid;
         grid-template-columns: repeat(4, minmax(0, 1fr));
      }
   }
   .section-2 {
      .bottom {
         flex-direction: row;
         align-items: flex-end;
         div {
            flex: 0 0 50%;
         }
      }
   }
}

@media (min-width: 1200px) {
   .section-2 {
      .bottom {
         div {
            flex: 0 0 25%;
            &:last-child {
               margin-left: 25%;
            }
         }
      }
   }
}

/* ==========================================================================
MEDIA QUERIES
========================================================================== */