#orderPage{
  font-family: 'Courier New', Courier, monospace;
  background: url("img/pizza5.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}
#landingPage{
  font-family: 'Courier New', Courier, monospace;
  background: url("img/pizza1.jpg");
  background-size: cover;
  background-repeat: no-repeat;

}
#thankyouPage{
  font-family: 'Courier New', Courier, monospace;
  background: url("img/pizza6.jpg");
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;

}
body{
  
  text-align: center;
}

header{
  background-color: black;
  text-align: center;
  padding: 1rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  width: 90%;
  line-height: 2rem;
  
  

}

a{
  color: rgb(255, 0, 0);
  text-decoration: none;
}
h1{
  color: white;
  background-color: red;

}



h3{
  color: black;
  background-color: antiquewhite;
  opacity: .7;
  font-weight: bold;
  font-size: 1.5rem;
}
#orderForm{
  margin-right: auto;
  font-weight: bold;
  margin-left: auto;
  text-align: center;
  background-color: red;
  color: aliceblue;
  border-radius: 10px;
  width: 70%;
 

}
ul{
  list-style: none;
  display: flex;
  margin-left: auto;
  margin-right: auto;
}
li{
  display: inline;
  flex: 24%;
  
}
.menu-p{
  font-size: .9rem;
  background-color: rgb(0, 0, 0);
  margin: .2rem;
}
#welcome-p{
  margin-top: 5rem;
  margin-left: auto;
  margin-right: auto;
  font-weight: 900;
  color: rgb(255, 255, 255);
  width: 50%;

}
#pricebtn{
  background-color: black;
  color: white;
  border-radius: 5px;
  width: 9rem;
  height: 2.3rem;
  margin-left:auto;
  margin-right: auto;
  
}

.enterNumberDiv{
  margin-top: 2rem;
  padding: 1rem;
  border-radius: 3px;
  background-color: rgb(7, 7, 7);
  text-align: center;
}
#numberOfPizzas{
  border-radius: 50%;
  text-align: center;
  height: 3rem;
  width: 3rem;
}

#submitbtn{
  background-color: burlywood;
  margin-bottom: 1rem;
  border-radius: 3px;
}

table{
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

#order-list{
  position: relative;
}

tr{
  background-color: black;
  color: aliceblue;
  word-spacing: 1rem;
}

#checkoutbtn{
  background-color: chartreuse;
  height: 2.3rem;
  border-radius: 5px;
  width: 20rem;
  font-weight: bold;
  margin-top: 1rem;

}



  .modal {
    position: relative;
    text-align: center;
    top: 5rem;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 300ms ease-in-out;
    border: 4px solid black;
    border-radius: 10px;
    z-index: 4;
    background-color: rgb(255, 255, 255);
    width: 500px;
    max-width: 80%;
  }
  
  .modal.active {
    transform: translate(-50%, -50%) scale(1);
  }
  
  .modal-header {
    padding: 10px 15px;
    display: flex;
    font-family: 'Courier New', Courier, monospace;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid black;
  }
  
  .modal-header .title {
    font-size: 1.25rem;
    font-weight: bold;
  }
  
  .modal-header .close-button {
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    font-size: 1.25rem;
    font-weight: bold;
  }
  
  .modal-body {
    padding: 10px 15px;
  }
  
  #overlay {
    position: fixed;
    opacity: 0;
    transition: 200ms ease-in-out;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    pointer-events: none;
  }
  
  #overlay.active {
    opacity: 1;
    pointer-events: all;
  }

  @media (max-width : 541px){
    header{
      width: 98%;
    }
    #orderForm{
      width: 100%;
    }
    tr{
      font-size: .8rem;
    }
  }
  @media (max-width : 415px){
    #orderForm{
      width: 105%;
    }
    tr{
      font-size: .5rem;
    }
  }

  
  @media (max-width : 415px){
    ul{
      
      font-size: .9rem;
    }
    .menu-p{
      font-size: .7rem;

    }
    
  }

  @media (max-width : 321px){
    ul{
      display: initial;
    }
    li{
      font-size: .7rem;
    }
   
  }