:root {

   /* color palette */
   --primary-color-dark:        hsl(210, 50%, 20%);
   --primary-color-mid-dark:    hsl(210, 50%, 35%);
   --primary-color:             hsl(210, 50%, 50%);
   --primary-color-mid-light:   hsl(210, 50%, 65%);
   --primary-color-light:       hsl(210, 50%, 80%);

   --secondary-color-dark:      hsl(150, 40%, 20%);
   --secondary-color-mid-dark:  hsl(150, 40%, 35%);
   --secondary-color:           hsl(150, 40%, 50%);
   --secondary-color-mid-light: hsl(150, 40%, 65%);
   --secondary-color-light:     hsl(150, 40%, 80%);

   --accent-color-dark:         hsl(330, 40%, 20%);
   --accent-color-mid-dark:     hsl(330, 40%, 35%);
   --accent-color:              hsl(330, 40%, 50%);
   --accent-color-mid-light:    hsl(330, 40%, 65%);
   --accent-color-light:        hsl(330, 40%, 80%);

   --neutral-color-dark:        hsl(210, 10%, 20%);
   --neutral-color-mid-dark:    hsl(210, 10%, 35%);
   --neutral-color:             hsl(210, 10%, 50%);
   --neutral-color-mid-light:   hsl(210, 10%, 65%);
   --neutral-color-light:       hsl(210, 10%, 80%);

   --alert-color-dark:          hsl(0, 50%, 20%);
   --alert-color-mid-dark:      hsl(0, 50%, 35%);
   --alert-color:               hsl(0, 50%, 50%);
   --alert-color-mid-light:     hsl(0, 50%, 65%);
   --alert-color-light:         hsl(0, 50%, 80%);

   --warning-color-dark:        hsl(60, 50%, 20%);
   --warning-color-mid-dark:    hsl(60, 50%, 35%);
   --warning-color:             hsl(60, 50%, 50%);
   --warning-color-mid-light:   hsl(60, 50%, 65%);
   --warning-color-light:       hsl(60, 50%, 80%);

   --success-color-dark:        hsl(120, 50%, 20%);
   --success-color-mid-dark:    hsl(120, 50%, 35%);
   --success-color:             hsl(120, 50%, 50%);
   --success-color-mid-light:   hsl(120, 50%, 65%);
   --success-color-light:       hsl(120, 50%, 80%);

   --info-color-dark:           hsl(120, 50%, 20%);
   --info-color-mid-dark:       hsl(120, 50%, 35%);
   --info-color:                hsl(120, 50%, 50%);
   --info-color-mid-light:      hsl(120, 50%, 65%);
   --info-color-light:          hsl(120, 50%, 80%);

   /* 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; */
}