@import url('https://fonts.googleapis.com/css2?family=Andada+Pro&family=Birthstone+Bounce:wght@500&family=Handlee&family=Merriweather&family=Pacifico&family=Rampart+One&family=Satisfy&display=swap');

html,
section {
  background-color: rgb(253, 120, 120);
}

#result-a {
  background-color: rgb(253, 120, 120);
}

#result {
  background-color: rgb(253, 120, 120);
}

.result-para {
  outline: none !important;
  border: 4px solid crimson !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  width: 100% !important;
  padding: 15px 20px !important;
  margin: 10px !important;
  background-color: crimson;
  color: aliceblue;
}

.heading {
  color: rgb(244, 215, 215);
  font-size: 2.5rem !important;
  font-weight: bolder;
  padding: 30px 0 !important;
  font-family: 'Handlee', cursive;
}

.container {
  max-width: 40% !important;
}

input:focus::placeholder {
  color: transparent !important;
}

input::placeholder {
  color: aliceblue;
}

input {
  outline: none !important;
  border: 4px solid crimson !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  width: 100% !important;
  padding: 15px 20px !important;
  margin: 0 3px !important;
  background-color: crimson;
  color: aliceblue;
}

.in-box {
  margin: 20px 0px;
  background-color: rgba(221, 37, 37, 0.3);
  ;
}

.btn {
  margin-left: 7vw;
}

.result {
  font-size: 2rem !important;
  font-family: 'Satisfy', cursive !important;
  color: white;
  background-color: rgba(22, 5, 177, 0.7);
  cursor: pointer;

}

.result:hover {
  transform: scale(1.1);
}

.image {
  width: 200px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  cursor: pointer;
}

@media (max-width: 800px) {
  .container {
    max-width: 60% !important;
  }
}

@media (max-width: 700px) {
  .container {
    max-width: 70% !important;
  }
}