/* Helvetica Now Text */
@font-face {
  font-display: swap;
  font-family: 'Helvetica Now Text';
  font-style: normal;
  font-weight: 400;
  src: url('https://cdn.migros.ch/ch.migros/static/fonts/helvetica-now/HelveticaNowTextW05-Regular.woff2')
      format('woff2'),
    url('https://cdn.migros.ch/ch.migros/static/fonts/helvetica-now/HelveticaNowTextW05-Regular.woff') format('woff');
}

/* Helvetica Now Display */
@font-face {
  font-display: swap;
  font-family: 'Helvetica Now Display';
  font-style: normal;
  font-weight: 700;
  src: url('https://cdn.migros.ch/ch.migros/static/fonts/helvetica-now/HelveticaNowDisplayW05-Bold.woff2')
      format('woff2'),
    url('https://cdn.migros.ch/ch.migros/static/fonts/helvetica-now/HelveticaNowDisplayW05-Bold.woff') format('woff');
}

*,
:after,
:before {
  border: 0 solid;
  box-sizing: border-box;
}

p {
  margin: 0;
}

h1,
h2 {
  font-family: 'Helvetica Now Display';
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  margin: 0;

  > p {
    margin-top: 8px;
  }
}

body {
  background-color: #fff;
  color: #333333;
  display: grid;
  font-family: 'Helvetica Now Text';
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  gap: 24px;
  grid-template-rows: auto 1fr auto;
  justify-content: center;
  line-height: 24px;
  margin: 0;
  min-height: 100dvh;
  padding: 24px 16px 32px 16px;
}

header {
  display: grid;
  justify-content: center;
}

main {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 80px;
  max-width: 328px;
  text-align: center;
}

footer {
  align-items: center;
  display: grid;
  font-family: 'Helvetica Now Text';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  gap: 8px;
  justify-content: center;
  line-height: 20px;
  text-align: center;

  > div {
    display: flex;
    gap: 16px;
  }

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

    &:hover {
      color: #803300;
    }
  }

  p {
    color: #737373;
  }
}

.box {
  background-color: #f5f5f5;
  border-radius: 8px;
  font-size: 14px;
  margin-inline: auto;
  padding: 8px 16px;
  width: fit-content;
}

.loader {
  animation: rotation 1s linear infinite;
  border: 4px solid #808080;
  border-bottom-color: transparent;
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  height: 40px;
  width: 40px;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}