html {
  scroll-behavior: smooth;
}

body {
  background-color: rgba(255, 255, 225, 1);
}

#backdrop {
  background: url('../img/restaurant1.jpg');
  background-position: center center;
  background-size: cover;
  height:600px;
  text-align: center;
  padding-top: 450px;
}
#backdrop .container {
  height: 75px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 15px;
}
#backdrop .col{
  padding-top: 18px;
  text-align: center;
}

.col{
  text-align: center;
}

.col a:link, .col a:visited {
  color: rgba(255,255,225);
}

hr {
  width: 25%;
  border-top: 2px solid red;
}

.fas.fa-utensils {
  color: white;
  background-color: orangered;
  padding: 25px;
  border-radius: 50px;
  font-size: 40px;
}

a:hover .fas.fa-utensils{
  animation: shake 1s;
  background-color: black;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(1px, 1px) rotate(1deg); }
  20% { transform: translate(1px, 1px) rotate(-2deg); }
  30% { transform: translate(1px, 1px) rotate(2deg); }
  40% { transform: translate(1px, 1px) rotate(-2deg); }
  50% { transform: translate(1px, 1px) rotate(2deg); }
  60% { transform: translate(1px, 1px) rotate(-2deg); }
  70% { transform: translate(1px, 1px) rotate(2deg); }
  80% { transform: translate(1px, 1px) rotate(-2deg); }
  90% { transform: translate(1px, 1px) rotate(2deg); }
  100% { transform: translate(1px, 1px) rotate(-2deg); }
}

#breakfast, #lunch, #dinner {
  color : black;
  font-weight: bold;
  font-size: 20px;
}

a:hover #breakfast, a:hover #lunch, a:hover #dinner {
  color:orangered;
}

th {
  background: rgba(0, 0, 0);
}

tr:nth-child(3) td{
  width:70px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn-success:active, .btn-success:focus, .btn-danger:active, .btn-danger:focus {
  box-shadow: none;
}

.placeOrder {
  width: 50%;
  border: 1px solid black;
  outline: none;
  padding: 10px;
  border-radius: 5px 20px;
  font-weight: bold;
}

.placeOrder:hover {
  color: white;
  background: black;
  outline: none;
  box-shadow: none;
  border: none;
}

#dealOfTheDay {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/restaurant7.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 300px;
  text-align: center;
  color: white;
}

#dealOfTheDay h1 {
  position: relative;
  top:10%;
  text-decoration: underline;
}

#dealOfTheDay h3 {
  position: relative;
  top:10%;
}

#dealOfTheDay p {
  position: relative;
  top: 10%;
  margin-left: 100px;
  margin-right: 100px;
}

#dealOfTheDay button {
  outline: none;
  border: white 1px solid;
  padding: 10px;
  text-align: center;
  border-radius: 6px 20px;
  background: orangered;
  color: white;
  font-weight: bold;
}

#dealOfTheDay button:hover {
  color: orangered;
  background-color: white;
}

.carousel-item img {
  height:500px;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.carousel-control-prev-icon, .carousel-control-next-icon{
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
}

.carousel-item:nth-child(1) .carousel-caption{
  text-align: right;
  color: red;
  text-decoration: underline;
}

.carousel-item:nth-child(2) .carousel-caption{
  text-align: left;
  color: black;
  text-decoration: underline;
}

.carousel-item:nth-child(3) .carousel-caption{
  text-align: right;
  color: red;
  text-decoration: underline;
}

#customer {
  background: linear-gradient(rgba(0, 0 , 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/restaurant8.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 300px;
}

#customer .row .col i {
  padding-top: 50px;
  text-align: center;
  color: white;
  font-size: 50px;
}

#customer .row .col span {
  padding-top: 25px;
  text-align: center;
  color: white;
  font-size: 35px;
}

#foodgram {
  text-align: center;
}

#zoomIn {
  width: 275px;
  height: 225px;
  overflow: hidden;
  margin: 0 auto;
}

#zoomIn img {
  height: 225px;
  width: 275px;
  transition: 0.5s linear;
}

.overlay {
  position: absolute;
  width: 275px;
  height:225px;
  left: 15px;
  right: 0;
  top: 0;
  bottom: 0;
  transform: scale(0);
  background: rgba(0, 0, 0, 0.5);
  transition: 0.5s linear;
}

.overlay button {
  color: white;
  font-size: 30px;
  position: relative;
  top:40%;
  background: transparent;
  border: none;
  outline: none;
}

#zoomIn:hover .overlay {
  transform: scale(1);
}

#zoomIn:hover img {
  transform: scale(1.5);
}

.modal {
  padding-top: 50px ;
  font-size: 20px;
  font-weight: bolder;
  color: white;
}

.modal button {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  outline: none;
  color: white;
  font-size: 50px;
}

.modal button:hover {
  color: red;
}

.modal-body {
  text-align: center;
  padding: 10px;
}

.modal-image {
  width: 100%;
  height: 500px;
}

.form-control:focus {
  box-shadow: none;
}

.orderForm {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/restaurant17.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 550px;
  padding: 10px;
}

.orderForm .container {
  width: 50%;
}

.orderForm h1 {
  color: white;
  text-decoration: underline;
}

.orderForm button {
  border-radius: 5px 20px;
  color: orangered;
  padding: 6px;
  font-weight: bold;
  border: none;
  outline: none;
  border: 1px solid orangered;
}

.orderForm button:hover {
  color: white;
  background: orangered;
}

.col small {
  position: absolute;
  left:20px;
  color: red;
  visibility: hidden;
}

.col.error .form-control {
  border: 2px solid red;
}

.col.success .form-control {
  border: 2px solid green;
}

.col.error small {
  visibility: visible;
}

a {
  cursor: pointer;
}