@font-face {
  font-family: "LintelNext";
  src: url("../assets/fonts/LintelNext/LintelNext-CondensedExtraBold.woff2") format("woff2"),
       url("../assets/fonts/LintelNext/LintelNext-CondensedExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Basic reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  block-size: 100%;
}

body {
  margin: 0;
}

/* scoped css */
#cgr-park-whatsup {
  --cgr-font-family: "LintelNext", "Arial Narrow", system-ui, sans-serif;

  --cgr-color-magenta: #e20074;
  --cgr-color-text: #000;
  --cgr-color-surface: #fff;
  --cgr-color-yellow: #ffff00;

  --cgr-fs-body: 16px;
  --cgr-fs-h1: 20px;
  --cgr-fs-h1-lead: 32px;
  --cgr-headline-fw: 800;
  --cgr-headline-top: 6%;

  --cgr-lang-offset-inline: 8px;

  --cgr-bg-position-inline: 45%;
  --cgr-bg-position-block: 95%;

  --cgr-panel-inline: 344px;
  --cgr-panel-block: 214px;
  --cgr-panel-padding-block-end: 50px;
  --cgr-panel-offset-inline: 20px;
  --cgr-panel-offset-block: 100px;

  --cgr-lh-tight: 1;
  --cgr-lh-body: 1.25;

  --cgr-radius-full: 999px;

  --cgr-pill-min-inline: 40px;
  --cgr-pill-min-block: 24px;
  --cgr-pill-padding-inline: 10px;
  --cgr-pill-border: 1px;
  --cgr-pill-fw: 800;
  --cgr-pill-fs: 16px;

  --cgr-transition: 0.4s ease;

  accent-color: var(--cgr-color-magenta);

  display: grid;
  grid-template-rows: auto 1fr;
  min-block-size: 100dvh;
  padding: 0;
  overflow-wrap: break-word;
  font-family: var(--cgr-font-family);
  font-size: var(--cgr-fs-body);
  line-height: var(--cgr-lh-body);
  color: var(--cgr-color-text);
  background-color: var(--cgr-color-surface);
  background-image: url("../assets/img/whatsup.jpg");
  background-size: cover;
  background-position: var(--cgr-bg-position-inline) var(--cgr-bg-position-block);
  background-repeat: no-repeat;

  h1 {
    margin: 0;
    line-height: var(--cgr-lh-tight);
    text-wrap: balance;
  }

  p {
    margin: 0;
    text-wrap: pretty;
  }

  button {
    outline-color: transparent;
    font: inherit;
    cursor: pointer;
  }

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  main {
    margin-block-start: auto;

    .headline-panel {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      inline-size: var(--cgr-panel-inline);
      block-size: var(--cgr-panel-block);
      max-inline-size: calc(100% - var(--cgr-panel-offset-inline));
      margin-inline-start: var(--cgr-panel-offset-inline);
      margin-block-end: var(--cgr-panel-offset-block);
      padding-block-end: var(--cgr-panel-padding-block-end);
      background-image: url("../assets/img/Vector.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .headline {
      max-width: 82%;
      position: relative;
      top: var(--cgr-headline-top);
      font-size: var(--cgr-fs-h1);
      font-weight: var(--cgr-headline-fw);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--cgr-color-surface);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;

      span {
        font-size: var(--cgr-fs-h1-lead);
        color: var(--cgr-color-yellow);
      }
    }
  }

  .logo {
    padding: 8px 24px;
    background-color: var(--cgr-color-text);
    max-height: 80px;
  }

  .lang-switcher {
    margin-inline-end: var(--cgr-lang-offset-inline);
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--cgr-pill-min-inline);
    min-block-size: var(--cgr-pill-min-block);
    padding-inline: var(--cgr-pill-padding-inline);
    font-size: var(--cgr-pill-fs);
    font-weight: var(--cgr-pill-fw);
    line-height: var(--cgr-lh-body);
    border-radius: var(--cgr-radius-full);
    background-color: transparent;
    color: var(--cgr-color-surface);
    border: var(--cgr-pill-border) solid currentColor;
    transition: background-color var(--cgr-transition), border-color var(--cgr-transition);

    &[aria-pressed="true"] {
      background-color: var(--cgr-color-yellow);
      color: var(--cgr-color-text);
      border-color: var(--cgr-color-yellow);
    }
  }
}

@media (min-width: 769px) {
  #cgr-park-whatsup {
    --cgr-fs-h1: 31px;
    --cgr-fs-h1-lead: 48px;
    --cgr-headline-top: 0;

    --cgr-lang-offset-inline: 24px;

    --cgr-panel-inline: 600px;
    --cgr-panel-block: 372px;
    --cgr-panel-padding-block-end: 87px;
    --cgr-panel-offset-block: 20px;
  }
}

@media (min-width: 1025px) {
  #cgr-park-whatsup {
    --cgr-fs-h1: 48px;
    --cgr-fs-h1-lead: 80px;

    --cgr-lang-offset-inline: 40px;

    --cgr-bg-position-inline: center;

    --cgr-panel-inline: 840px;
    --cgr-panel-block: 514px;
    --cgr-panel-padding-block-end: 120px;
    --cgr-panel-offset-inline: 44px;
    --cgr-panel-offset-block: 86px;
  }
}

@media (max-width: 370px) {
  #cgr-park-whatsup {
    --cgr-fs-h1: 16px;
    --cgr-fs-h1-lead: 26px;

    --cgr-panel-inline: 280px;
    --cgr-panel-block: 174px;
    --cgr-panel-padding-block-end: 41px;
  }
}