@layer base {
  :root {
    --default-font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial,
      sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --paragraph-font-size: 1.6rem;
  }

  *,
  ::before,
  ::after {
    box-sizing: inherit;
    font: inherit;
    margin: 0;
    padding: 0;
  }

  html {
    hanging-punctuation: first last;
    color-scheme: light;
    box-sizing: border-box;
    font-size: 62.5%;
  }

  body {
    min-height: 100svh;

    font-family: var(--default-font-family);
    font-size: var(--paragraph-font-size);
    font-synthesis: none;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
  }

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

  img,
  picture,
  svg,
  video {
    display: block;
    max-width: 100%;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  p {
    max-width: 75ch;
    text-wrap: pretty;
  }

  @media (prefers-reduced-motion: no-preference) {
    :has(:target) {
      scroll-behavior: smooth;
      scroll-padding-top: 3rem;
    }
  }
}

@layer theme {
  :root {
    --primary-color: hsl(223, 87%, 63%);
    --secondary-color: hsl(223, 100%, 88%);
    --tertiary-color: hsl(354, 100%, 66%);
    --quaternary-color: hsl(0, 0%, 59%);
    --quinary-color: hsl(209, 33%, 12%);
    --senary-color: hsl(166, 100%, 34%);
    --white-color: hsl(0, 0%, 100%);

    --font-family: 'Libre Franklin', sans-serif;
  }

  body {
    font-family: var(--font-family);
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
  }

  header {
    display: grid;
    place-items: center;
  }

  .logo {
    width: 250px;
    height: auto;
  }

  main {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .title {
    margin-block-end: 1cap;
    font-size: 2.8rem;
    font-weight: lighter;
    text-align: center;
    color: var(--quaternary-color);
    & > span {
      color: var(--quinary-color);
      font-weight: 700;
    }
  }

  .subTitle {
    margin-block-end: 1cap;
    font-size: 1.9rem;
    color: var(--quinary-color);
  }

  .paragraph {
    margin-block-end: 1cap;
    text-align: left;
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--quinary-color);
    & .tripadvisor {
      color: var(--senary-color);
    }
  }

  .cta {
    display: block;
    align-self: center;
    width: 200px;
    height: auto;
    padding: 10px 20px;
    border-radius: 15px;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--white-color);
    background-color: var(--primary-color);
    transition: opacity 0.3s;
  }

  .cta:hover {
    opacity: 0.9;
  }

  .socialMedia {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-block-end: 1cap;
  }

  .copyright {
    margin-block-end: 1cap;
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--quaternary-color);
  }

  @media (min-width: 768px) {
    main {
      gap: 50px;
    }

    .title {
      font-size: 4.8rem;
    }

    .subTitle {
      font-size: 2.4rem;
    }

    .cta {
      width: 250px;
      padding: 15px 30px;
      font-size: 1.8rem;
    }
  }
}