nav {
     font-family: Arial;
     font-weight: bold;
     text-align: right;
     padding: 1%;
}

nav a{
      padding: 1%;
}

.active{
  background: #808080;
}

img.musclesbones{
  float: left;
  margin-right: 5%;
}

body{
  margin: 0;
  background-color: #004a69;
}

h1{
  color: #ffcf92;
  text-align: center;
  background: #713600;
  font-family: arial;
  padding: 1%;
  margin: 0;
}

h2{
  color:white;
  font-family: arial;
  font-size: 20px;
}

.home{
  padding-right: 5%;
  margin-top: 3%;
  font-family: arial;
  font-size: 20px;
  color: white;
}

a{
  text-decoration: none;
  color: #ffcf92;
}

a:hover{
  color: #713600;
  text-decoration: none;
}

.navrow1{
            display: grid;
            grid-template-columns: 1fr 2fr 2fr 2fr 1fr;
            grid-gap: 0.5rem;
            text-align: center;
}

.navrow2{
              display: grid;
              grid-template-columns: 1fr 2fr 2fr 2fr 1fr;
              grid-gap: 1rem;
              text-align: center;
}

img.hover:hover{
    opacity: 0.5;
}

img.spineimg{
  float: left;
}

.equip{
  padding: 30px;
}

p.equipment{
  font-family: arial;
  font-size: 20px;
  color: white;
}

p.about{
  font-family: arial;
  font-size: 20px;
  color: white;
  background-color:#713600;
  text-align: left;
  padding: 2%;
  margin: 3%;
}

.grid-container{
  display: grid;
  grid-template-columns: 1fr 2fr 9fr;
  grid-gap: 0.5rem;
}

.grid-container > div {
  text-align: center;
}

.item1{
  grid-row: 1 / 5;
}

.item2, .item4, .item6, .item8{
  padding-top: 50%;
}

h2.about{
  text-align:center;
}

p.equipment{
  padding-left: 5%;
  padding-right: 5%;
}

img.boneexercise{
  padding-top: 15%;
  padding-left: 18%;
}

h2.extype{
  background: #713600;
  padding-top: 3%;
  padding-bottom: 3%;
  padding-left: 10%;
  margin-bottom: 0;
  font-size: 30px;
}

p.numberexercise{
  background: #713600;
  padding-left:10%;
  padding-bottom: 3%;
  margin: 0;
  font-family: arial;
  font-size: 20px;
  color: white;
}

.exerciserow1{
  display: grid;
  grid-template-columns: 2fr 4fr 4fr 2fr;
  grid-gap: 0.5rem;
}

.exerciserow2, .exerciserow3, .exerciserow4{
  display: grid;
  grid-template-columns: 2fr 4fr 4fr 2fr;
  grid-gap: 0.5rem;
}

p.warmuptext{
  color: white;
  font-family: arial;
  font-size: 20px;
  background-color: #808080;
  margin: 0;
  padding: 3%;
}

.typeofexerciserow1{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
}

.video{
  margin-top:5%;
}

.exercise{
  font-family: arial;
  font-size: 20px;
  color: white;
  text-align: left;
  padding: 2%;
  margin: 0%;
}

ul.exercise{
  color: black;
  font-family: arial;
  font-size: 20px;
  padding-left: 8%;
  list-style-position: inside;
  margin: 0%;
  background-color: #808080;
}

.badgesrow1, .badgesrow2, .badgesrow3{
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 2fr 1fr;
  grid-gap: 0.5rem;
  text-align: center;
}

img.groove{
  padding-top:2%;
  padding-bottom:2%;
}

@media screen and (max-width: 700px) {
  nav a{
    display: block;
    text-align: center;
  }
  .exerciserow1, .exerciserow2, .exerciserow3, .exerciserow4, .aboutgrid, .navrow1, .navrow2, .typeofexerciserow1, .badgesrow1, .badgesrow2, .badgesrow3, .musclesbones, .home{
    grid-template-columns: 1fr;
  }
}