@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200;0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;0,6..12,900;0,6..12,1000;1,6..12,200;1,6..12,300;1,6..12,400;1,6..12,500;1,6..12,600;1,6..12,700;1,6..12,800;1,6..12,900;1,6..12,1000&display=swap');
@font-face {
   font-family: myFont;
   src: url('../fonts/Amsterdam.ttf');
}

* {
   margin: 0;
   padding: 0;
   font-family: 'Nunito Sans', sans-serif;
}

.max-tickets {
   display: none;
   background-color: red;
   color: rgb(255, 222, 222);
   width: 90vw;
   padding: 10px;
   border-radius: 10px;
   text-align: center;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10;
}

.max-tickets-text {
   text-align: center;
}

.max-tickets button {
   padding: 1px 15px;
   background-color: rgb(190, 190, 190);
}

.confirm {
   display: none;
   position: fixed;
   top: 50%;
   left: 50%;
   background-color: #D6A07E;
   padding: 20px;
   width: 260px;
   transform: translate(-50%, -50%);
   z-index: 100;
}

.confirm h3 {
   text-align: center;
}

.confirm button {
   padding: 10px;
   background-color: #6F6D3D;
}

.background {
   height: 100px;
   width: 100%;
   background-image: url('../images/background-buy-page-img.jpeg');
   background-size: cover;
}

.inputs {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   text-align: center;
   margin-top: 10px;
   margin-bottom: 100px;
}

label {
   width: 30%;
   margin-right: 10px;
   text-align: left;
   font-weight: 400;
}

.input-div {
   width: 80%;
   display: flex;
   flex-direction: row;
   align-items: center;
   margin: 20px 10px;
}

.error {
   display: none;
   background-color: #f8d7da;
   color: #721c24;
   padding: 8px;
   border: 1px solid #f5c6cb;
   border-radius: 4px;
   font-size: 12px;
   margin-top: 5px;
   max-width: 300px;
   text-align: center;
}

h3 {
   text-align: center;
   margin: 10px;
   font-weight: 400;
}

h5 {
   text-align: justify;
   margin: 10px;
   font-weight: 400;
}

p {
   font-size: 10px;
}

input {
   border: 2px solid yellow;
   width: 70%;
   padding: 5px;
   outline: none;
}

input::placeholder {
   opacity: 0.5;
}

#success-completing {
   border: 2px solid lightgreen;
}

#unsuccess-completing {
   border: 2px solid red;
}

.fa-chevron-left {
   color: #BF4C33;
   cursor: pointer;
}

.buttons {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: fixed;
   bottom: 0;
   width: 100vw;
}

.buttons a {
   margin: 20px;
}

button {
   border: none;
   background-color: transparent;
}

.confirmImg {
   margin: 20px;
   cursor: pointer;
}

.confirmBtn {
   color: black;
}

.backAndEditBtn {
   color: black;
}

@media (min-width: 768px) {
   label {
      font-size: 20px;
   }

   input {
      height: 50px;
      font-size: 20px;
   }

   input::placeholder {
      font-size: 20px;
   }

   .confirmImg, .fa-chevron-left {
      height: 80px;
   }

   h3 {
      font-size: 30px;
   }

   h5 {
      font-size: 20px;
   }

   h4 {
      font-size: 25px;
   }
   
   p {
      font-size: 15px;
   }
}