* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  font-family: Poppins;
  list-style: none;
  margin: 0;
  outline: none;
  padding: 0;
  text-decoration: none;
  text-transform: capitalize;
  transition: all .2s ease
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem
}

body {
  background-image: linear-gradient(to right top, #051937, #662f65, #c84663, #fe8939, #ebe512);
  background-size: cover;
  min-height: 100vh;
  width: 100%
}

@media (max-width:361px) {
  body {
    background-position: 50%;
    background-size: 200%
  }
}

.container {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 7px 29px 0 hsla(240, 5%, 41%, .2);
  height: 40rem;
  left: 50%;
  min-width: 25rem;
  padding: 1rem;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 25%
}

.search_cont {
  align-items: center;
  background: rgba(255, 157, 0, .33);
  display: flex;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  justify-content: space-between;
  padding: .8rem
}

.search_cont,
.search_cont .search {
  border-radius: 2.5rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
  width: 100%
}

.search_cont .search {
  background: #f0b55c;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  height: 3rem;
  margin-left: .2rem;
  margin-right: 1rem;
  outline: none;
  padding: .7rem
}

.search::-webkit-input-placeholder {
  color: #fff;
  font-size: 1.2rem
}

.search::placeholder {
  color: #fff;
  font-size: 1.2rem
}

.fa-magnifying-glass {
  background: #f0b55c;
  border-radius: 2.5rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
  color: #fff;
  font-size: 1.1rem;
  margin-right: .2rem;
  padding: 1rem
}

.fa-magnifying-glass:hover {
  scale: 1.1
}

.search:hover {
  scale: 1.02
}

.temp_icon_cont {
  background: #fff;
  background: transparent;
  margin-top: 1.5rem;
  position: relative;
  width: 100%;
  z-index: 1
}

.temp_icon_cont .temp_icon {
  -webkit-filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, .4));
  filter: drop-shadow(3px 5px 2px rgb(0 0 0/.4));
  margin: auto;
  width: 40%
}

.temp_icon_cont .temp_icon img {
  -webkit-animation: bounce 2.5s ease-in-out infinite;
  animation: bounce 2.5s ease-in-out infinite;
  height: auto;
  width: 100%
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  50% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px)
  }

  to {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  50% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px)
  }

  to {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

.degrees_info_cont {
  margin-top: 1rem;
  text-align: center;
  width: 100%
}

.degrees_info_cont .degrees {
  color: #111;
  font-size: 4rem;
  font-weight: 700;
  text-shadow: 0 .1rem .1rem rgba(0, 0, 0, .1)
}

.degrees_info_cont .scenario {
  color: #333;
  font-size: 2rem;
  font-weight: 400;
  margin: .5rem 0
}

.degrees_info_cont .place {
  color: #666;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.6rem;
  font-weight: 400
}

.stats {
  display: flex;
  gap: .5rem;
  justify-content: space-between;
  margin-top: 2.8rem;
  width: 100%
}

.stats .stats_cont {
  align-items: center;
  display: flex;
  gap: .4rem
}

.stats .stats_cont .stats_img_cont {
  -webkit-animation: pop 2.5s ease-in-out infinite;
  animation: pop 2.5s ease-in-out infinite;
  width: 2.7rem
}

@-webkit-keyframes pop {
  0% {
    scale: 1
  }

  50% {
    scale: 1.05
  }

  to {
    scale: 1
  }
}

@keyframes pop {
  0% {
    scale: 1
  }

  50% {
    scale: 1.05
  }

  to {
    scale: 1
  }
}

.stats .stats_cont .stats_img_cont img {
  -webkit-filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, .4));
  filter: drop-shadow(3px 5px 2px rgb(0 0 0/.4));
  width: 100%
}

.stats .stats_cont .stats_details {
  color: #222;
  font-size: 1.3rem;
  font-weight: 400
}

.stats .stats_cont .stats_details h5 {
  font-size: 1.3rem;
  text-transform: none
}

.stats .stats_cont .stats_details p {
  color: #444
}

svg {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: -1
}

.wave {
  -webkit-animation: wave 8s linear infinite;
  animation: wave 8s linear infinite
}

.wave1 {
  -webkit-animation: wave1 10s linear infinite;
  animation: wave1 10s linear infinite
}

.wave2 {
  -webkit-animation: wave2 12s linear infinite;
  animation: wave2 12s linear infinite
}

@-webkit-keyframes wave {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

  to {
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
  }
}

@keyframes wave {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

  to {
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
  }
}

@-webkit-keyframes wave1 {
  0% {
    -webkit-transform: scaleY(1.2) translateX(0);
    transform: scaleY(1.2) translateX(0)
  }

  to {
    -webkit-transform: scaleY(1.2) translateX(100%);
    transform: scaleY(1.2) translateX(100%)
  }
}

@keyframes wave1 {
  0% {
    -webkit-transform: scaleY(1.2) translateX(0);
    transform: scaleY(1.2) translateX(0)
  }

  to {
    -webkit-transform: scaleY(1.2) translateX(100%);
    transform: scaleY(1.2) translateX(100%)
  }
}

@-webkit-keyframes wave2 {
  0% {
    -webkit-transform: scaleY(.8) translateX(0);
    transform: scaleY(.8) translateX(0)
  }

  to {
    -webkit-transform: scaleY(.8) translateX(100%);
    transform: scaleY(.8) translateX(100%)
  }
}

@keyframes wave2 {
  0% {
    -webkit-transform: scaleY(.8) translateX(0);
    transform: scaleY(.8) translateX(0)
  }

  to {
    -webkit-transform: scaleY(.8) translateX(100%);
    transform: scaleY(.8) translateX(100%)
  }
}

@media (max-width:1358px) {
  .container {
    height: 50rem;
    padding: 3rem;
    width: 43%
  }

  .search_cont {
    height: 5rem;
    margin-bottom: 2rem
  }

  .stats {
    flex-wrap: wrap;
    gap: 3rem;
    justify-content: center
  }

  .stats .stats_cont .stats_img_cont {
    width: 2.5rem
  }

  .stats .stats_cont .stats_details h5 {
    font-size: 1.5rem
  }
}

@media (max-width:360px) {
  html {
    font-size: 60%
  }

  .container {
    padding: 2rem;
    width: 90%
  }

  .fa-magnifying-glass {
    font-size: 1.5rem
  }

  .search_cont {
    height: 5.2rem
  }

  .search_cont .search {
    font-size: 1.8rem;
    height: 3.2rem;
    margin-left: .5rem;
    padding: 1rem 1rem 1rem 2rem
  }

  .search::-webkit-input-placeholder {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.5rem
  }

  .search::placeholder {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.5rem
  }

  .stats {
    margin-top: 5rem
  }

  .stats .stats_cont {
    gap: .6rem
  }

  .stats .stats_cont .stats_img_cont {
    width: 3.2rem
  }

  .stats .stats_cont .stats_details h5 {
    font-size: 1.5rem;
    font-size: 1.3rem
  }

  .stats .stats_cont .stats_details p {
    font-size: 1.1rem
  }

  .temp_icon_cont .temp_icon {
    width: 45%
  }
}

@media (max-width:318px) {
  .container {
    height: 52rem
  }

  .stats {
    margin-top: 3rem
  }
}

/*# sourceMappingURL=main.0886717f.css.map*/