/* ICONS */
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css);

/* Fuentes */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

body {
  scroll-behavior: smooth;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  color: #f5f5f5;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  touch-action: manipulation;
  margin: 0;
  padding: 0;
}
:root {
  --bg-color: #140329;
  --text-color: #f5f5f5;
  --form-bg: #330769;
}
button {
  border: none;
  background-color: transparent;
  color: #f5f5f5;
  cursor: pointer;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
.center-fixed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.75em;
}
h3 {
  font-size: 1.5em;
}
h4 {
  font-size: 1.25em;
}
h5 {
  font-size: 1em;
}
h6 {
  font-size: 0.875em;
}
p {
  font-size: 0.875em;
}

@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

@media (min-width: 1440px) {
  body {
    font-size: 22px;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeLeft {
  from {
    transform: translateX(-400%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes fadeUp {
  from {
    transform: translate(-50%, 400%);
  }
  to {
    transform: translate(-50%, -50%);
  }
}
@keyframes fadeRight {
  from {
    transform: translateX(400%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes applyBlur {
  from {
    filter: blur(0);
  }
  to {
    filter: blur(5px);
  }
}
@keyframes quitBlur {
  from {
    filter: blur(5px);
  }
  to {
    filter: blur(0);
  }
}
.back-icon {
  font-size: 1em;
}
.back-btn {
  position: fixed;
  top: 15px;
  left: 15px;
  cursor: pointer;
  background-color: transparent;
  border: 2px solid #999;
  padding: 6px;
  border-radius: 100%;
  animation: backBtn 1s;
  display: flex;
  transition: background 0.4s;
  z-index: 1;
}
.user-icon {
  font-size: 1.25em;
}
.user-btn {
  position: fixed;
  top: 15px;
  right: 15px;
  padding: 10px;
  border-radius: 100%;
  background-color: var(--form-bg);
  display: flex;
  transition: all 0.4s;
}
.user-title {
  font-size: 24px;
}
.button-div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.user-panel {
  position: fixed;
  width: 300px;
  top: 50%;
  left: 50%;
  display: none;
  transform: translate(-50%, -50%);
  background-color: #330769;
  text-align: center;
  padding: 40px 0;
  border-radius: 10px;
  z-index: 12;
  gap: 15px;
  flex-direction: column;
  animation: fadeUp 0.4s forwards;
}

.users-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.select-user-btn {
  background-color: #7542d3;
  padding: 10px;
  border-radius: 10px;
  font-weight: 700;
  transition: background-color 0.4s;
}

.btn-user-panel {
  background-color: #7542d3;
  transition: background-color 0.4s;
  padding: 10px;
  border-radius: 10px;
  font-weight: 700;
}

.quit-panel {
  position: fixed;
  right: 10px;
  top: 10px;
  border: none;
  background-color: transparent;
  font-size: 16px;
}
.quit-icon {
  font-size: 2em;
  color: #ffffff90;
  transition: all 0.4s;
}

.user-info-panel {
  display: flex;
  position: fixed;
  transform: translateX(200%);
  top: 2%;
  right: 2%;
  background-color: #330769;
  padding: 20px;
  border-radius: 10px;
  z-index: 12;
  gap: 5px;
  flex-direction: column;
  transition: transform 0.4s;
}
.user-info-show {
  transform: translateX(0);
}

.fade-in {
  animation: fadeIn 0.4s forwards;
}
.fade-out {
  animation: fadeOut 0.4s forwards;
}
.fade-left {
  animation: fadeLeft 0.4s forwards;
}
.fade-up {
  animation: fadeUp 0.4s forwards;
}
.fade-right {
  animation: fadeRight 0.4s forwards;
}
.apply-blur {
  animation: applyBlur 0.4s forwards;
}
.quit-blur {
  animation: quitBlur 0.4s forwards;
}

.alert-menu {
  position: fixed;
  bottom: 25px;
  right: 50%;
  transform: translateX(50%);
  background-color: #330769;
  padding: 10px;
  border-radius: 10px;
  opacity: 0;
  animation: alertMenu 4s;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

@keyframes alertMenu {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.home-btn {
  position: fixed;
  top: 15px;
  left: 15px;
  padding: 10px;
  border-radius: 100%;
  background-color: var(--form-bg);
  display: flex;
  transition: background-color 0.4s;
}
.home-icon {
  font-size: 1.25em;
}
.ask-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #330769;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  gap: 15px;
  flex-direction: column;
  z-index: 12;
  animation: fadeUp 0.4s forwards;
  text-align: center;
}
.figure-new-channel {
  margin: 0;
  background-color: #00000020;
  border: 3px solid #300477;
  border-radius: 100%;
  position: relative;
  width: 125px;
  height: 125px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-preview {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.input-image-receive {
  display: none;
}

.image-box {
  border-radius: 100%;
  position: relative;
  overflow: hidden;
}
.buttons-container-ask {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.buttons-container-ask i {
  font-size: 1.75em;
}
#yes-btn {
  background-color: #1da639;
  width: 25%;
}
#no-btn {
  width: 25%;
  background-color: #c81b1b;
}
.image-box{
  display: flex;
  justify-content: center;
}
.userBtn-figure{
  width: 100px;
  height: 100px;
}
.user-info-title{
  text-align: center;
}
@media (min-width: 768px) {
  .alert-menu {
    right: 25px;
    transform: translateX(0);
    padding: 20px;
  }
}
@media (min-width: 1024px) {
  #yes-btn:hover {
    background-color: #1a8c2e;
  }
  #no-btn:hover {
    background-color: #a41a1a;
  }
  .home-btn:hover {
    background-color: #4c198a;
  }
  .user-btn:hover {
    background-color: #48138a;
  }
  .btn-user-panel:hover {
    background-color: #6731cb;
  }
  .quit-icon:hover {
    color: #fff;
  }
}