:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}
.container{
  width: 1600px;
  margin: auto;
  height: 130px
}
.subcontainer{
  width: 85%;
  margin: auto;
  display: flex;
  translate: 0 300px;
}
#cookies{
 width: 100%;
 height: 100%;
 position: fixed;
 bottom: 0;
 color: #ffffff;
  background-color: #000000b9;
  z-index: 999;

}
.cookies{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 40px;
}
.cookies a{
  color: #ffffff;
  text-decoration: none;
}
#cookies-btn{
  padding: 30px 60px;
  background-color: #ff3e3e;
  font-size: large;
  font-weight: bolder;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
 translate: 600px 0;
}
 body {
    margin: 0;
    padding: 0;
    background-color: #54494B;
    color: #fafbfc;
text-align: center; 
font-size: 50px;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: 25px;
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
    background-color: rgba(0, 0, 0, 0.548);
    padding: 10px;
    border-radius: 8px;

}
                            


/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {}
    #hero-1856 {
      /* 200px - 300px - leaving extra space for the navigation */
      padding: 50px;
      /* prevents the topper line from causing an overflow */
      overflow: hidden;
      position: relative;
      z-index: 1;
    }
    .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      gap: 3rem;
    }
    .cs-content {
      text-align: left;
      width: 100%;
      max-width: 46.875rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: relative;
      z-index: 1;
    }
    .cs-title {
      /* 49px - 84px */
      font-size: clamp(3.0625rem, 6vw, 5.25rem);
      max-width: 100%;
      letter-spacing: -2px;
    }
   .cs-title,
   .cs-text {
      text-align: left;
      color: var(--bodyTextColorWhite);
    }
    .cs-text {
      margin-bottom: 2rem;
    }
    
    .cs-button-solid:hover:before {
      width: 100%;
    }
 
    .cs-graphic {
      width: 100%;
      min-width: 120rem;
      height: auto;
      object-fit: cover;
      position: absolute;
      bottom: -1px;
      left: 50%;
      z-index: 2;
      transform: translateX(-50%);
      
    }
    .cs-background {
      width: 100%;
      height: 110%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -2;

    }
    
   .cs-background img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
    }

  /* Tablet - 768px */


  /* Large Desktop - 1920px */
  @media only screen and (min-width: 120rem) {
    #hero-1856 {
      /* this ties the padding bottom value to the size of the screen width. The wider the image gets the taller it gets, meaning it will get closer and closer to the content. This makes the padding bottom value grow with the screen size so it accounts for the growing height of the svg graphic getting taller */
      padding-bottom: 0px;
    }
  }
  
.button {
    padding-left: 45px;
    padding-right: 45px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #F15152;
    border-radius: 8px;
    font-size: 25px;
    font-weight: 700;
    border: none;
    color: #fafbfc;
    font-family: 'times new roman', times, serif;
    font-weight: bolder;
    cursor: pointer;
     
  
    
}
.button:hover {
    background-color: #fa2424;
}
.menu-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #54494B;
    margin-left: 500px;
    margin-right: 500px;
 
}
header {
background-color: #2b2b2b;
 color: #54494B;
text-align: center; 
    background-color: #AFAAB9;
    color: #ffffff;
    padding: 0px;
    border-top: #F15152;
    border-bottom: #F15152;
    border-width: 15px;
    border-style: solid;
    border-left: 0px;
    border-right: 0px;
    font-size: 30px;
  align-items: center;
  height: 180px;
  
}
.social-media {
   translate: 1500px -110px;
   display: flex;
   margin-right: 1600px;
    justify-content: space-between;
    fill: #1a1a1a
}



  .deal-1 {
    display: flex;
    justify-content: space-between;
    margin-left: 200px;
    margin-right: 200px;
    background-color: #ffffff;
    background-size: cover;
    border-radius: 8px;
    background-position: center;
    padding: 5px;
    font-size: 20px;
   
  }

footer {
    background-color: #2b2b2b;
    color:#fafbfc;
    padding: 10px;
    padding-bottom: 0px;
    text-align: center;
    font-size: 15px;
    border-top: #F15152;
    border-bottom:#2b2b2b;
    border-width: 15px;
    border-style: solid;
    border-left: 0px;
    border-right: 0px;
    align-items: center;
}
.footer-list {
    display: flex;
    justify-content: center;
    font-size: 20px;
    color:#F15152;
text-decoration: underline;

}
.footer-2 {
    display: flex;
    justify-content: center;
    font-size: 25px;
    color:#ffffff;
}

.tripadvisor {
    display: flex;
    justify-content: center;
    margin-top: 3px;
    scale: 1.3;
    margin-left: -35px;
}

a {
  color: #fafbfc;
  text-decoration: none;

}
a:visited {
  color:#F15152;
}