:root {

   /* color palette */
   --primary-color-dark4:  hsl(30, 75%, 2%);
   /* --primary-color-dark3:  hsl(30, 75%, 14%); */
   --primary-color-dark3:  hsl(230, 60%, 14%);
   --primary-color-dark2:  hsl(30, 75%, 26%);
   --primary-color-dark1:  hsl(30, 75%, 38%);
   /* --primary-color:        hsl(30, 75%, 50%); */
   --primary-color:        hsl(230, 60%, 50%);
   --primary-color-light1: hsl(30, 75%, 62%);
   --primary-color-light2: hsl(30, 75%, 74%);
   --primary-color-light3: hsl(30, 75%, 86%);
   /* --primary-color-light4: hsl(30, 75%, 98%); */
   --primary-color-light4: hsl(230, 60%, 98%);

   --accent-color-dark4:   hsl(10, 50%, 2%);
   --accent-color-dark3:   hsl(10, 50%, 14%);
   --accent-color-dark2:   hsl(10, 50%, 26%);
   --accent-color-dark1:   hsl(10, 50%, 38%);
   --accent-color:         hsl(10, 50%, 50%);
   --accent-color-light1:  hsl(10, 50%, 62%);
   --accent-color-light2:  hsl(10, 50%, 74%);
   --accent-color-light3:  hsl(10, 50%, 86%);
   --accent-color-light4:  hsl(10, 50%, 98%);

   --neutral-color-dark4:  hsl(30, 5%, 2%);
   --neutral-color-dark3:  hsl(30, 5%, 14%);
   --neutral-color-dark2:  hsl(30, 5%, 26%);
   --neutral-color-dark1:  hsl(30, 5%, 38%);
   --neutral-color:        hsl(30, 5%, 50%);
   --neutral-color-light1: hsl(30, 5%, 62%);
   --neutral-color-light2: hsl(30, 5%, 74%);
   --neutral-color-light3: hsl(30, 5%, 86%);
   --neutral-color-light4: hsl(30, 5%, 98%);

   /* limit overall content size */
   --content-min-width: 320px;
   --content-max-width: 800px;

   --content-min-height: 600px;
   --content-max-height: 800px;
}

* {
   /* font-size: 1em; */
   /* font-weight: normal; */

   /* global resets */
   text-align: inherit;
   text-wrap: inherit;

   margin: 0;
   margin-block: 0;
   margin-inline: 0;

   padding: 0;
   padding-block: 0;
   padding-inline: 0;

   box-sizing: border-box;

   background-color: inherit;
   color: inherit;

   /* border: 1px black solid;
   border-radius: 1px; */
}