:root{
  --clr-black: #0F1111;
  --clr-white: #F7F8F8;
  --clr-btn-hvr: #dadada;
  --page-padding: 4rem;
  --font-size-header: clamp(1rem, 1.3vw + 0.2rem, 1.5rem);
  --font-size-title: clamp(1.6rem, 4vw + 1rem, 4rem);
  --font-size-small-title: clamp(1.2rem, 3vw + 0.5rem, 3rem);
  --font-size-btn: clamp(1rem, 1vw + 1rem, 1.3rem);
  --font-size-description: clamp(1rem, 1.5vw + 0.5rem, 1.4rem);
  --font-family-description: 'Open Sans Condensed';
  --font-family-title: 'Permanent Marker';
  --font-family-btn: 'Open Sans Condensed';
  --font-weight-btn: 600;
  --width-btn: clamp(10rem, 27vw, 18rem);
  --height-btn: clamp(2rem, 9vw, 4rem);
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body{
  background-color: var(--clr-black);
}

main > section{
  margin: 0 var(--page-padding);
}

button{
  cursor: pointer;
  transition: scale 0.3s;
}
button:not(.next, .prev):hover{
  scale: 1.1;
}

address{
  font-style: normal;
}

@media screen and (min-width: 1254px){
  :root{
      --page-padding: 10rem;
  }
}

@media screen and (max-width: 680px){
  :root{
      --page-padding: 2rem;
  }
}

@media screen and (max-width: 380px){
  :root{
      --page-padding: 1rem;
  }
}