@import url('https://fonts.googleapis.com/css2?family=Fondamento&family=Poppins:ital,wght@0,400;0,600;1,500&display=swap');

*{
  font-family: 'Poppins', sans-serif;
}
#ball1{
  animation: ball1 15s infinite;
  transition-timing-function: ease-in-out;
}
#ball2{
  animation: ball2 10s infinite;
  margin-left: 2%;
  transition-timing-function: ease-in-out;
}
#ball3{
  animation: ball3 10s infinite;
  transition-timing-function: ease-in-out;
}
@keyframes ball1 {
  from {
    margin-left: 2%;
    width: 300%;
  }

  to {
    margin-left: 5%;
    width: 100%;
  }
}
@keyframes ball2 {
  from {
    margin-top: 8%;
  }

  to {
    margin-top: 1%;
  }
}
@keyframes ball3 {
  from {
    margin-left: 1%;
  }

  to {
    margin-left: 10%;
  }
}





/* MODAL CSS */

.lang-container {
  padding: 25px;
  background-color: black;
  opacity: 0.8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 25px;
  position: relative;
}

.mic {
  display: inline-block;
  margin: auto;
}

.inner-lang-container {
  justify-content: center;
  display: flex;
  gap: 25px;
}

._side {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.detect-lang select {
  padding-left: 15px;
  font-size: 18px;
  width: 413px;
  color: white;
  height: 60px;
  background: linear-gradient(90.17deg, #292929 6.42%, rgba(41, 41, 41, 0) 95.06%);
  border: 0.2px solid #FFFFFF;
  backdrop-filter: blur(4px);
  border-radius: 8px;
}

.detect-area .left-detect-area,
.detect-area .right-detect-area {
  width: 413px;
  height: 280px;
  background: linear-gradient(90.17deg, #292929 6.42%, rgba(41, 41, 41, 0) 95.06%);
  border: 0.2px solid #FFFFFF;
  backdrop-filter: blur(10px);
  border-radius: 8px;
  color: white;
  font-family: inherit;
  padding: 30px;
  font-size: 18px;
}

.detect-area {
  position: relative;
}

.speaker-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.swap-icon img {
  margin-top: 9px;
  width: 48px;
  height: 48px;
}
.close-btn{
  position: absolute;
  right: 0;
  height: 100%;
  background: #525252;

}

/* @media only screen and (max-width: 980px) {
  .detect-lang select{
    width: 180px;
    height: 50px;
    font-size: 12px;
    padding-left: 3px ;
  }
  .detect-area .left-detect-area,
  .detect-area .right-detect-area {
    width: 180px;
    font-size: 12px;
  height: 130px;
}
.lang-container {
  padding: 15px;
  gap: 6px;
}
._side, .inner-lang-container {
  gap: 6px;
}
.detect-area .left-detect-area,
.detect-area .right-detect-area{
  padding: 5px;
}
.swap-icon img {
  margin-top: 6px;
  width: 25px;
  height: 25px;
}
} */
@media only screen and (max-width: 750px) {
  .detect-lang select{
    width: 120px;
    height: 30px;
    font-size: 8px;
    padding-left: 3px ;
  }
  .detect-area .left-detect-area,
  .detect-area .right-detect-area {
    width: 120px;
    font-size: 8px;
  height: 100px;
}
.lang-container {
  padding: 15px;
  gap: 6px;
}
.inner-lang-container {
  gap: 6px;
}
.detect-area .left-detect-area,
.detect-area .right-detect-area{
  padding: 5px;
}
.swap-icon img {
  margin-top: 6px;
  width: 20px;
  height: 20px;
}
}