:root {
  /* Contemporary and Bold Color Scheme */
  --primary1: #950740;
  --primary1Light: #c3073f;
  --primary1Dark: #6f2232;
  --secondary1: #4e4e50;
  --secondary1Light: #7a7a7c;
  --secondary1Dark: #1a1a1d;

  --onPrimary1: white;
  --onPrimSec1Light: black;

  /* Intrepid and Fearless Color Scheme */
  --primary2: #9e5a63;
  --primary2Light: #c96567;
  --primary2Dark: #9e5a63;
  --secondary2: #97aabd;
  --secondary2Light: #c8dcf0;
  --secondary2Dark: #314455;

  --onPrim1-Dark: white;
  --onSecPrim2Light: black;
}

html {
  box-sizing:  border-box; /* padding doesn't effect width of element */
  font-family: Arial, Helvetica, sans-serif;
  color: var(--onPrimary1);
  place-items: center;
}

body {
  background: var(--secondary1Dark);
  margin: 30px 50px; /* 30px top and bottom, 50px left and right for entire body of website */
  line-height: 1.4;
}

.examples {
  background: var(--secondary1);
  margin: auto;
  width: 75%;
  border: 4px solid var(--primary1);
  text-align: center;
}

.nc {
  text-align: left;
}

.sectHead {
  text-align: center;
}

hr {
  border-color: var(--primary1);
  height: 3px;
  width: 100%;
  border-width: medium;
}

div.wrapper {
  display: grid;
  gap: 20px;
}

a {
  background: var(--secondary1Dark);
  color: var(--primary1Light);
  display: inline-block;
  text-decoration: underline;
  text-align: center;
  font-style: italic;
  text-transform: lowercase;
  font-size: 1rem;
}

a:hover {
  background: var(--primary1Dark);
  color: var(--onPrimary);
}

/* Introductory Box */
.intro-box {
  text-align: center;
  padding: 1.5rem;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%; /* making sure the image stays within parent */
}

/* Navigation */
.main-nav {
  width: 50%;
  margin: auto;
  text-align: center;
}

.main-nav ul {
  border-bottom: 5px solid var(--secondary1Light);
  display: grid;
  padding: 0;
  gap: 20px;
  padding-bottom: 20px;
  list-style: none;
  grid-template-columns: 1fr;
}

.main-nav a {
  background: var(--primary1Dark);
  color: var(--onPrimary);
  display: block;
  text-decoration: none;
  padding: .8rem;
  text-align: center;
  text-transform: uppercase;
  font-size: 1rem;
}

.main-nav a:hover {
  background: var(--secondary1Dark);
  color: var(--primary1Light);
  border: 1px solid var(--primary1Light);
}

/* Information Boxes */
.boxes {
  display: grid;
  grid-gap: 20px;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* auto-fit tells the browser to handle resizing of the columns to fit the current width
  So we will get multiple columns or less depending on window size
  
  minmax tells the minimum width and max width of each box item. here we are
  repeating minmax(400px, 1fr) auto-fit times. min max basically forces a max number
  of columns depending on our min value. if auto-fit is 10 and your window is only 50 pixels
  wide and the minimum value for each column is 10 pixels. there will only be 5 columns
  on the browser because we cant fit all 10 columns each at 10 pixels in a 50 pixel screen.
  the columns then will be drawn at the minimum value we set and the remaining columns will move
  down to the next row at that minimum size until we have added all the columns

  1fr makes each box 1 fraction of the auto-fit number 
  (if auto-fit = 5 and there are 5 boxes, each box will be 1/5 the screen width)*/
}

.boxlink {
  background:var(--primary1Dark);
  color: var(--onPrimary1);
  display: inline;
  text-decoration: none;
  text-align: center;
  font-style: normal;
  text-transform: none;
  padding: 1.5rem 1rem;
}

.boxlink:hover {
  background: var(--secondary1Dark);
  color: var(--primary1Light);
  border: 1px solid var(--primary1Light);
}

.boxh4 {
  background: var(--secondary1Dark);
  color: var(--onPrimary1);
}