/* CSS Document */
/*mixens*/
/*color controllers*/
* {
  /*its necessary*/
  margin: 0;
  padding: 0; }

body {
  /* change background color*/
  background-color: chocolate; }

#container {
  /*the container that the entire website uses*/
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  width: 960px;
  border: 4px solid #000000;
  box-shadow: 5px 4px 8px 5px rgba(0, 0, 0, 0.5);
  background-color: sandybrown;
  margin: 50px auto; }

header img {
  /*makes the image in the header fit the box and not look weird*/
  display: block; }

nav {
  /* needed for navigation to work/look nice*/
  grid-column: 1/5;
  text-align: center;
  background-color: saddlebrown;
  padding-top: 1%;
  padding-bottom: 1%;
  list-style-type: none;
  border-top-style: solid;
  border-bottom-style: solid; }
  nav ul {
    /* needed for navigation to work/look nice*/
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    justify-content: center; }
  nav a {
    /* needed for navigation to work/look nice*/
    color: black;
    background-color: sandybrown;
    padding: 5px 25px;
    text-decoration: none;
    border-radius: 15px;
    margin: 10px;
    width: 22120px;
    text-align: center;
    border: 2px solid black;
    font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif'; }
  nav a:hover {
    /* makes hovering over the links cool */
    color: black;
    text-decoration: underline; }

li {
  display: inline; }

h1 {
  /*added to fix grid problems*/
  grid-column: 1/5; }

footer {
  /*makes the footer fit with the page*/
  grid-column: 1/5;
  text-align: center;
  background-color: black;
  color: aliceblue; }
  footer a {
    /*make footer links look nice*/
    color: azure;
    text-decoration: none;
    font-style: italic; }
  footer a:hover {
    /*makes hovering over the footer links cool*/
    text-decoration: underline; }

flexcontainer {
  /*needed to make smallcontainer work*/
  grid-column: 1/5;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-template-columns: auto auto auto; }

smallcontainer {
  /*makes health page look nice*/
  width: 260px;
  border: 4px solid #000000;
  box-shadow: 0px 0px 8px 10px rgba(0, 0, 0, 0.5);
  background-color: sandybrown;
  margin: 20px 20px;
  display: block; }

#center {
  text-align: center;
  font-family: 'Amandine Light'; }

#center2 {
  /*for the smaller words that need centered*/
  text-align: center;
  font-family: 'Amandine Light';
  margin: auto;
  font-weight: bolder; }

#center3 {
  /*for the grid items that need centered*/
  grid-column: 1/5; }

img[alt="cup of hot cocoa"] {
  width: 80%;
  box-shadow: 0px 0px 6px 8px rgba(0, 0, 0, 0.5);
  border: 3px solid #000000;
  margin: 0px 20px 10px; }

h2[alt^="big"] {
  text-align: center;
  font-family: 'Amandine Light'; }

p[alt^="small"] {
  text-align: center;
  font-family: 'Amandine Light';
  margin: auto;
  font-weight: bolder; }

p[alt="end"] {
  margin-bottom: 0px;
  padding-bottom: 0px; }

img[alt~="left"] {
  float: left;
  margin: 0 10px 0 0;
  padding: 0; }

img[alt~="right"] {
  float: right;
  margin: 0 0 0 10px;
  padding: 0; }

@media screen and (max-width: 600px) {
  #container {
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
    margin-bottom: auto;
    box-shadow: none;
    grid-template-columns: auto; }

  header img {
    display: none; }

  flexcontainer {
    /*needed to make smallcontainer work*/
    grid-template-columns: auto auto; }

  smallcontainer {
    /*makes health page look nice*/
    width: 260px;
    margin: 20px 10px;
    display: block; } }