html {
       background-color: rgb(198, 192, 202);
   }

   header {
       text-align: center;
       color: rgb(7, 5, 2);
       font-family: sans-serif;
       font-size: 3em;
       text-transform: uppercase;
       text-decoration: overline underline;
       text-shadow: 1px 1px 5px rgb(73, 72, 71);
   }
   li {
       list-style: none;
       text-align: center;

   }

   h2 {
       color: rgb(0, 0, 0);
       font-family: 'Trebuchet MS';
       font-size: 2em;
       margin-left: 1em;
   }

   h3 {
       color: whitesmoke;
       text-align: center;
       font-family: "Trebuchet MS"
   }

   p {
       margin: 10px;
       font-family: sans-serif;
       color: white;
   }

   #grid-floats {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr 1fr;
       grid-template-rows: 1fr 1fr 1fr 1fr;
       align-items: center;
       grid-gap: 1em;
       justify-content: space-around;
       padding: 1%;
       margin: 2%;
   }

   #grid-floats .grid-item {
       justify-self: center;
       background-color: rgb(158, 84, 136);
       animation-name: anim;
       min-height: 370px;;
       animation-duration: 5s;
       animation-iteration-count: 5;
   }

   @keyframes anim {
       0% {
           background-color: rgb(158, 84, 136);
       }
       100% {
           background-color: rgb(146, 34, 49);
       }
   }

   li:nth-child(1) {
       grid-column: 1/3;
   }

   #grid-floats img {
       width: 250px;
       padding: 5px 5px 5px 5px;
   }

   @media only screen and (max-width: 375px) {
       #grid-floats {
           grid-template-areas: "header" "section" "section";
           grid-template-columns: 1fr 1fr;
           grid-template-rows: 1fr 1fr;
       }
   }

   @media only screen and (max-width:375px) {
       li:nth-child(1) {
           grid-column: 1/3;
       }
   }

   @media only screen and (min-width:376px) and (max-width:768px) {
       #grid-floats {
           grid-template-areas: "header" "section  section" "section";
           grid-template-columns: 33% 33% 33%;
           grid-template-rows: 1fr 1fr 1fr;
       }
   }

   @media only screen and (min-width:376px) and (max-width:768px) {
       li:nth-child(1) {
           align-items: stretch;
       }
   }

   #grid-flex {
       display: grid;
       grid-gap: 1em;
       grid-template-columns: repeat(4, minmax(min-content, 25vw));
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: space-around;
       align-items: center;
       padding: 1%;
       margin: 2%;
   }

   #grid-flex .grid-item {
       background-color: rgb(158, 84, 136);
       min-height: 370px;
   }

   #grid-flex img {
    width: 250px;
       padding: 5px 5px 5px 5px;
   }

   @media only screen and (max-width: 375px) {
       #grid-flex {
           grid-template-areas: "header" "section" "section";
           grid-template-columns: 1fr 1fr;
           grid-template-rows: 1fr 1fr;
       }
   }

   @media only screen and (max-width:375px) {
       li:nth-child(1) {
           grid-column: 1/3;
       }
   }

   @media only screen and (min-width:376px) and (max-width:768px) {
       #grid-flex {
           grid-template-areas: "header" "section  section" "section";
           grid-template-columns: 33% 33% 33%;
           grid-template-rows: 1fr 1fr 1fr;
       }
   }

   @media only screen and (min-width:376px) and (max-width:768px) {
       li:nth-child(1) {
           align-items: stretch;
       }
   }