p {
   font-size:20px;
   font-family: Arial;
   padding-left: 5%;
}

.intro {
        margin-left: 10%;
        margin-right: 10%
}

h1 {
    color:white;
    font-family: Arial;
    text-align: center;
    background: #4d1860;
    padding: 50px;
    margin: 0px;
    font-size: 40px;
}

h2  {
    font-family: Arial;
    padding-left: 5%;
}

h2.dish  {
    padding-bottom: 0px;
    margin-bottom: 0px;
    background: #bca6c1;
    padding-top: 2%;
}

h3  {
    font-family: Arial;
    padding-left: 5%;
}

ul {
    font-family: Arial;
    font-size: 20px;
    padding-left: 5%;
    list-style-position:inside;
}

li {
  margin-bottom: 5px;
}

img:hover{
    opacity: 0.5;
}

a:hover{
  color: green;
  text-decoration: none;
}

a {
  text-decoration: none;
  color: #4d1860;
}

ul.recipelist {
    background: #bca6c1;
    padding-bottom: 2%;
    margin-top: 0px;
}

ol {
    font-family: Arial;
    font-size: 20px;
    padding-left: 5%;
}

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

nav a{
      padding: 1%;
      color: #4d1860;
}

.active{
  background: white;
}

body {
      margin:0;
      background-color: #ddd5e2;
}

iframe {
        padding-left: 5%;
}

img {
      padding-left: 5%;
}

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

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

.bottomtext{
  margin:0 25%;
}

@media screen and (max-width: 500px) {
  nav a{
    display: block;
    text-align: center;
  }
  .mainnavrow1, .mainnavrow2{
    grid-template-columns: 1fr;
  }
}