:root {
    --breakpoint-mobile: 40em;
    --breakpoint-tablet: 48em;
    --breakpoint-laptop: 64em;
    --breakpoint-desktop: 80em;

    --color-bg-light-gray: #f5f5f5;
    --color-accent: #ffa303;
    --color-accent-hover: #e89300;
    --background-white-hover: rgba(0, 0, 0, .05);

    --border-radius: 8px;
    --border-default: 1px solid #E0E0E0;
    --box-shadow: 0 4px 4px 0 rgba(0,0,0, 0.5);
}


/* Small devices such as large phones (640px and up) */
@media screen and (max-width: 48em) {
   :root {
        --content-padding: 1rem;
   }
}
  
  /* Medium devices such as tablets (768px and up) */
  @media screen and (min-width: 48em) {
    :root {
        --content-padding: 2rem;
   }
}
  
  /* Large devices such as laptops (1024px and up) */
  @media screen and (min-width: 64em) {
    :root {
        --content-padding: 2rem;
   }
}
  
  /* Largest devices such as desktops (1280px and up) */
  @media screen and (min-width: 80em) {
    :root {
        --content-padding: 20rem;
   }
}