@import url('./tradicional-effects.css');

.flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 1.25rem; /* 4px */
}

.mb-4 {
  margin-bottom: 1.25rem; /* 20px */
}

.align-center {
  align-items: center;
}

.flex-col {
  flex-direction: column;
}

.font-bold {
  font-weight: bold;
}

.title-header {
  font-weight: bold;
}

.title-header h3 {
  margin: 0;
  font-size: 1.7rem;
}

.color-blue {
  color: #1043ff;
}

#unmute-button {
  position: absolute;
  z-index: 99999;
  top: 10%;
  right: 30%;
  background: #1043ff;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  padding: 10px;
  color: white;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
}

@media (min-width: 420px) {
  #unmute-button {
    top: 10%;
    right: 36%;
  }
}

@media (min-width: 500px) {
  #unmute-button {
    top: 35%;
    right: 40%;
  }
}

@media (min-width: 768px) {
  #unmute-button {
    top: 35%;
    right: 43%;
  }
}

@media (min-width: 900px) {
  #unmute-button {
    top: 35%;
    right: 45%;
  }
}