body {
  --background: #162a43;
  --footer-color: #053849;
  --rooms-button: rgb(45, 55, 128);
  --room-selected: rgb(29, 36, 87);
  --pwned-img: url("../images/PWNEDCR-blue.png");
  --pwned-imgx900: url("../images/PWNEDCR-blue-900px.png");
  --sloth-img: url("../images/Oso 2 no text.svg");
}
body.red {
  --background: #560e0e;
  --footer-color: #490505;
  --rooms-button: #6c1a1a;
  --room-selected: #591f1f;
  --pwned-img: url("../images/PWNEDCR.png");
  --pwned-imgx900: url("../images/PWNEDCR-900px.png");
  --sloth-img: url("../images/Oso 1 no text.svg");
}
/*Barra de menu*/
.top-bar {
  background-color: var(--background);
  color: #ffffff;
}
.top-bar a {
  color: #fdf0d0;
}
.top-bar a:hover {
  color: #a6e5ee;
}
/*fin Barra de menu*/
/*Pequeña linea encima del footer*/
.footer-pad {
  height: 90px;
  background-color: var(--background);
}
/*-----Fin Pequeña linea encima del footer------*/
/*-----footer-------*/
.footer {
  background-color: var(--footer-color);
}
.footer a {
  color: #ffffff;
}
.footer a:hover {
  color: #a6e5ee;
  text-decoration: none;
}
.footer .footer-right {
  float: right;
  color: #ffffff;
}
/*----fin footer------*/
/*-----imagen de fondo arriba-------*/
.section--hero {
  text-align: center;
  background-image: var(--pwned-img);
  background-repeat: no-repeat;
  background-position: center;
}
.fondo-404 {
  text-align: center;
  background-image: url("images/pwnd-star-only.png");
  background-repeat: no-repeat;
  background-size: 100% 450px;
  /*background-position: center;*/
}
.hero-meta {
  flex: 1;
  margin-top: 100px;
}
.hero-features {
  margin-top: 100px;
}
/*-----fin imagen de fondo arriba-----*/
/*-----cuerpo de la pagina------*/
.welcome .section {
  position: relative;
  overflow: hidden;
  background-color: var(--background);
}
.welcome a {
  color: #ffffff;
  text-decoration: none;
}
.welcome a:hover {
  color: #ffffff;
}
/*fin cuerpo de la pagina*/
/*-----------agenda-----------*/
#titulo_agenda:hover {
  cursor: pointer;
}

#titulo_talleres {
  cursor: pointer;
}

.tabla {
  border-collapse: collapse;
  font-weight: 12px;
  position: relative;
  width: 100%;
}
tbody {
  text-align: center;
}
thead {
  font-weight: bold;
  background: #ffffff;
  text-align: center;
  text-transform: uppercase;
}

td {
  padding-top: 5px;
  padding-bottom: 5px;
}

.tabla,
th,
td {
  border: 1px solid var(--background);
  border-collapse: collapse;
}

.celda {
  background-color: var(--background);
}
.titulos_tabla {
  color: var(--background);
}

.taller_texto {
  max-width: 400px;
}

.requerimientos {
  color: #ffffff;
}

.requerimientos:hover {
  color: #d4d4d4;
  cursor: pointer;
}
/*-----------fin agenda-----------*/
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.sticky + .content {
  padding-top: 60px;
}
/* Test */
/* Style the navbar */
#navbar {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

/* Page content */
.content {
  padding: 16px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}
/*oso azul*/
.ladoAzul {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: #046caf;
  font-family: squartiqa4f;
  font-size: 80px;
}
.osoAzul {
  width: 45%;
  /*animation: hero-octonaut 2s alternate ease-in-out infinite;*/
  will-change: transform;
  transition: transform 0.2s;
}
.osoAzul:hover {
  transform: scale(1.15);
  cursor: pointer;
  animation: paths 5s step-end infinite;
}
.ladoRojo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: #560e0e;
  font-family: squartiqa4f;
  font-size: 80px;
}
.osoRojo {
  width: 45%;
  animation: hero-octonaut 2s alternate ease-in-out infinite;
  will-change: transform;
}
.osoRojo:hover {
  transform: scale(1.15);
  cursor: pointer;
}
/*astronauta flotante*/
.astronaut {
  left: calc(50% - 520px);
}
.astronaut {
  position: absolute;
  top: -60px;
  left: calc(50% - 380px);
  animation: hero-octonaut 2s alternate ease-in-out infinite;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
  padding-left: 50%;
}
.casco-flotante {
  position: absolute;
  top: 10%;
  left: calc(50% - 380px);
  animation: casco 1s alternate ease-in-out infinite, flotar 20s infinite;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
  left: -15%;
  width: 13%;
}
/*saturno flotante*/
.saturn {
  left: calc(50% - 520px);
}
.saturn {
  position: absolute;
  top: 26%;
  left: calc(50% - 380px);
  animation: hero-octonaut 1s alternate ease-in-out infinite;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
  left: 7%;
  width: 12%;
}
.saturn-inverted {
  left: calc(50% - 520px);
}
.saturn-inverted {
  position: absolute;
  top: 76%;
  left: calc(50% - 380px);
  animation: hero-octonaut 1s alternate ease-in-out infinite;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
  margin-left: 50%;
  width: 12%;
}
/*Animaciones*/
@keyframes casco {
  0% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(20px);
  }
}
@keyframes flotar {
  100% {
    left: 100%;
  }
}
@keyframes hero-octonaut {
  0% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(8px);
  }
}
.hero-octonaut:hover {
  transform: scale(1.5);
}
@keyframes rotar3d {
  100% {
    transform: rotate3d(16, 25, 20, 40deg);
  }
}
@keyframes rotarx {
  100% {
    transform: rotatex(1turn);
  }
}
@keyframes rotary {
  100% {
    transform: rotatey(1turn);
  }
}
@keyframes rotarz {
  100% {
    transform: rotatez(1turn);
  }
}
.tbodycontact {
  text-align: left;
}
/*--------------Redes sociales de mantente en contacto---------------*/
.social_networks > a > i {
  font-size: 25px;
}

.social_networks {
  display: flex;
  justify-content: space-around;
}
/*--------------Patrocinadores---------------*/
.sponsors_link > a {
  padding-right: 5%;
}
.sponsors_link > a:hover {
  filter: contrast(5);
}
/*--------Section de sponsors y contacto--------*/
.section--contact {
  margin-bottom: -40px;
  border-top: 1px solid #1a191a;
  background-color: #2c2a2b;
  background-repeat: no-repeat;
  background-image: url(images/rocket.png);
  background-position: calc(60% + 35%) 50%;
  background-size: 20%;
  background-color: #456fa4;
}

/*------------------------------responsive-----------------------------*/

@media (min-width: 1000px) and (max-width: 1100px) {
  .section--hero {
    text-align: center;
    background-image: var(--pwned-imgx1000);
    background-repeat: no-repeat;

    background-position: center;
  }
  .hero-meta {
    flex: 1;
    margin-top: 0px;
  }
  .hero-features {
    margin-top: -45px;
  }
  .astronaut {
    width: 80%;
    top: 50%;
    left: 25%;
  }
  .saturn-inverted {
    top: 82%;
    margin-left: 65%;
    width: 12%;
  }
}
@media (min-width: 901px) and (max-width: 999px) {
  .section--hero {
    text-align: center;
    background-image: var(--pwned-imgx1000);
    background-repeat: no-repeat;
    background-size: 100% 850px;
    background-position: center;
  }
  .hero-meta {
    flex: 1;
    margin-top: 0px;
  }
  .hero-features {
    margin-top: -45px;
  }
  .astronaut {
    width: 80%;
    top: 55%;
    left: 25%;
  }
  .saturn-inverted {
    top: 85%;

    margin-left: 70%;
    width: 12%;
  }
}
@media (min-width: 1101px) and (max-height: 1000px) {
  .section--hero .wrapper {
    padding-top: 100px;
    
  }
  
  .hero-header {
    display: flex;
    flex-wrap: wrap;
  }
  .hero-download {
    margin-top: 0;
    margin-left: 50px;
    flex-direction: column;
  }
  .hero-download li {
    padding: 1em;
  }
  .hero-download li:first-child {
    padding: 2em 1em;
  }
  .hero-download li + li {
    border-left: none;
    border-top: 1px solid #4e4b4d;
  }
  .hero-meta {
    flex: 1;
    margin-top: 50px;
  }
  .hero-features {
    margin-top: 100px;
  }
  .hero-octonaut {
    left: calc(50% - 520px);
  }
}
@media (max-width: 1100px) {
  .welcome .wrapper {
    width: auto;
    max-width: 660px;
  }
  .welcome .section--hero {
    background-position: center -220px;
  }
  .welcome .hero-features {
    margin-top: 200px;
  }
  .welcome .hero-tagline {
    font-size: 2.4em;
  }
  .welcome .hero-download {
    flex-direction: column;
  }
  .welcome .hero-download li {
    padding: 1em;
  }
  .welcome .hero-download li:first-child {
    padding: 2em 1em;
  }
  .welcome .hero-download li + li {
    border-left: none;
    border-top: 1px solid #4e4b4d;
  }
  .welcome .section .wrapper {
    padding: 100px 50px;
  }
  .welcome .section.section--hero .wrapper {
    padding-left: 0;
    padding-right: 0;
  }
  .welcome .columns {
    width: auto;
  }
  .welcome .column.column {
    width: auto;
  }
  .welcome .columns .column:first-child {
    padding-right: 0;
  }
  .welcome .columns .column:last-child {
    margin-top: 100px;
    padding-left: 0;
  }
  .welcome .column > h3 {
    margin-bottom: 50px;
  }
  .welcome .columns + h3 {
    margin-top: 100px;
  }
  .welcome .welcome-bgs {
    margin: 50px 0;
  }
  .welcome .welcome-bg--screenshot {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0;
    max-width: 100%;
    height: auto;
  }
  .welcome .welcome-cta {
    margin: 50px 0 0;
  }
  .welcome .section--features .features-item {
    margin-top: 50px;
  }
  .welcome .section--features .column + .column {
    margin-top: 0;
  }
  .welcome .section--realtime {
    background-position: calc(50% - 845px) calc(100% + -130px);
  }
  .welcome .section--github {
    background-position: calc(50% + 450px) 0;
  }
  .welcome .section--contact {
    background-position: calc(50% + 150px) bottom;
  }
}
@media (max-width: 660px) {
  .welcome .hero-octonaut {
    display: none;
  }
  .section--contact {
    background-image: none;
  }
}
.welcome-beta .wrapper--beta,
.welcome-beta .welcome--nightly,
.welcome-nightly .wrapper--beta,
.welcome-nightly .welcome--nightly {
  max-width: 500px;
}
.welcome-beta .section--hero,
.welcome-nightly .section--hero {
  background-image: none;
}
.welcome-beta .section--hero .wrapper,
.welcome-nightly .section--hero .wrapper {
  padding-bottom: 0;
}
.welcome-beta h3,
.welcome-nightly h3 {
  margin: 0 0 1em;
}
.welcome-beta .features-item.features-item.features-item,
.welcome-nightly .features-item.features-item.features-item {
  margin-top: 50px;
}
.welcome-beta .section--features .features-item .mega-octicon,
.welcome-nightly .section--features .features-item .mega-octicon {
  top: 0;
}
.welcome-beta .section--features,
.welcome-nightly .section--features {
  margin-bottom: -40px;
}
.welcome-beta .hero-logo {
  filter: brightness(0.75) contrast(1) sepia(0.7) hue-rotate(-5deg)
    saturate(3.5);
}
.welcome-beta .hero-logo-circle:nth-child(4) {
  animation-name: hero-logo-circle--reverse;
}
.welcome-nightly .hero-logo {
  filter: brightness(0.8) contrast(0.6) sepia(0.9) hue-rotate(215deg)
    saturate(6);
}
.welcome-nightly .hero-logo-circle:nth-child(4) {
  animation-name: hero-logo-circle--reverse;
}
.welcome-nightly .hero-logo-circle:nth-child(8) {
  animation-name: hero-logo-circle--reverse;
}
.welcome-nightly .hero-logo-circle:nth-child(10) {
  animation-name: hero-logo-circle--reverse;
}
.welcome-nightly .welcome-button {
  background-color: #c67aff;
}
.welcome-nightly .welcome-button:hover {
  background-color: #c170ff;
}
.welcome-nightly .version {
  letter-spacing: 0.08em;
}
@keyframes hero-logo-circle--reverse {
  100% {
    transform: rotate(-1turn);
  }
}
.is-responsive {
  min-width: auto;
}
@media (max-width: 900px) {
  .is-responsive .top-bar {
    height: auto;
    padding: 15px 10px;
  }
  .is-responsive .top-bar > .wrapper {
    width: 100%;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
  }
  .is-responsive .top-bar .navigation {
    vertical-align: middle;
  }
  .is-responsive .top-bar-right {
    float: none;
    margin: 0 5px;
    display: inline-block;
    vertical-align: middle;
  }
  .is-responsive .footer {
    height: auto;
    padding: 20px 10px;
  }
  .is-responsive .footer > .wrapper {
    width: 100%;
    text-align: center;
  }
  .is-responsive .footer-left,
  .is-responsive .footer-right {
    float: none;
  }
  .is-responsive .footer-right {
    margin-top: 15px;
  }
}
@media (min-width: 1101px) {
  .welcome .section--features .wrapper {
    max-width: 560px;
  }
  .welcome .features-item + .features-item {
    margin-top: 50px;
  }
  @supports (display: grid) {
    .welcome .section--features .wrapper {
      max-width: none;
    }
    .welcome .features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 100px 66.6666666667px;
    }
    .welcome .features-item.features-item {
      margin-top: 0;
    }
  }
}
/*--------------fondo mobile----------*/
@media (max-width: 900px) {
  .section--hero {
    content: var(--pwned-imgx900);
    width: 100%;
    /*height: 170px;*/
    background-position: center;
  }
  .footer-right {
    text-align: center;
  }
  .fondo-404 {
    background-image: url(/images/pwned_mobile.png);
    width: 100%;
    background-position: center;
  }
  .casco-flotante {
    position: absolute;
    top: 20%;
    left: calc(50% - 50px);
    animation: hero-octonaut 2s alternate ease-in-out infinite;
    will-change: transform;
    -webkit-user-select: none;
    user-select: none;
    width: 30%;
  }
  .saturn-inverted {
    top: 85%;

    margin-left: 75%;
    width: 12%;
  }
  .chooseTeam {
    font-size:    xx-large !important;
    text-align: justify;
  }
  .slothSquare{
    display: none
  }
}
@media (min-width: 700px) and (max-width: 850px) {
  .saturn-inverted {
    top: 85%;

    margin-left: 80%;
    width: 12%;
  }
}
@media (min-width: 300px) and (max-width: 350px) {
  .saturn-inverted {
    top: 90%;

    margin-left: 140%;
    width: 12%;
  }
}
@media (min-width: 350px) and (max-width: 450px) {
  .saturn-inverted {
    top: 90%;

    margin-left: 120%;
    width: 12%;
  }
}
@media (min-width: 451px) and (max-width: 600px) {
  .saturn-inverted {
    top: 90%;

    margin-left: 100%;
    width: 12%;
  }
  /*oso azul*/
  .ladoAzul {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: #0b284d;
  }
  .osoAzul {
    width: 60%;
    animation: hero-octonaut 2s alternate ease-in-out infinite;
    will-change: transform;
    transition: transform 0.2s;
  }
  .osoAzul:hover {
    transform: scale(1.15);
    cursor: pointer;
    animation: paths 5s step-end infinite;
  }
  .chooseTeam {
    font-size: x-large;
    position: absolute;
    font-family: squartiqa4fstrike;
    display: flex;
    justify-content: center;
    width: 100%;
    /*! margin: auto; */
  }
}
@media (min-width: 0px) and (max-width: 299px) {
  .saturn-inverted {
    top: 95%;
    margin-left: 160%;
    width: 12%;
  }
}

.layers {
  position: relative;
}

.layers::before,
.layers::after {
  content: attr(data-text);
  position: relative;
  width: 110%;
  z-index: -1;
}

.layers::before {
  top: 10px;
  left: 15px;
  color: #e0287d;
}

.layers::after {
  top: 5px;
  left: -10px;
  color: #1bc7fb;
}

.single-path {
  clip-path: polygon(
    0% 12%,
    53% 12%,
    53% 26%,
    25% 26%,
    25% 86%,
    31% 86%,
    31% 0%,
    53% 0%,
    53% 84%,
    92% 84%,
    92% 82%,
    70% 82%,
    70% 29%,
    78% 29%,
    78% 65%,
    69% 65%,
    69% 66%,
    77% 66%,
    77% 45%,
    85% 45%,
    85% 26%,
    97% 26%,
    97% 28%,
    84% 28%,
    84% 34%,
    54% 34%,
    54% 89%,
    30% 89%,
    30% 58%,
    83% 58%,
    83% 5%,
    68% 5%,
    68% 36%,
    62% 36%,
    62% 1%,
    12% 1%,
    12% 34%,
    60% 34%,
    60% 57%,
    98% 57%,
    98% 83%,
    1% 83%,
    1% 53%,
    91% 53%,
    91% 84%,
    8% 84%,
    8% 83%,
    4% 83%
  );
}

.paths {
  animation: paths 5s step-end infinite;
}

@keyframes paths {
  0% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(8px);
  }
  0% {
    clip-path: polygon(
      0% 43%,
      83% 43%,
      83% 22%,
      23% 22%,
      23% 24%,
      91% 24%,
      91% 26%,
      18% 26%,
      18% 83%,
      29% 83%,
      29% 17%,
      41% 17%,
      41% 39%,
      18% 39%,
      18% 82%,
      54% 82%,
      54% 88%,
      19% 88%,
      19% 4%,
      39% 4%,
      39% 14%,
      76% 14%,
      76% 52%,
      23% 52%,
      23% 35%,
      19% 35%,
      19% 8%,
      36% 8%,
      36% 31%,
      73% 31%,
      73% 16%,
      1% 16%,
      1% 56%,
      50% 56%,
      50% 8%
    );
  }

  5% {
    clip-path: polygon(
      0% 29%,
      44% 29%,
      44% 83%,
      94% 83%,
      94% 56%,
      11% 56%,
      11% 64%,
      94% 64%,
      94% 70%,
      88% 70%,
      88% 32%,
      18% 32%,
      18% 96%,
      10% 96%,
      10% 62%,
      9% 62%,
      9% 84%,
      68% 84%,
      68% 50%,
      52% 50%,
      52% 55%,
      35% 55%,
      35% 87%,
      25% 87%,
      25% 39%,
      15% 39%,
      15% 88%,
      52% 88%
    );
  }

  30% {
    clip-path: polygon(
      0% 53%,
      93% 53%,
      93% 62%,
      68% 62%,
      68% 37%,
      97% 37%,
      97% 89%,
      13% 89%,
      13% 45%,
      51% 45%,
      51% 88%,
      17% 88%,
      17% 54%,
      81% 54%,
      81% 75%,
      79% 75%,
      79% 76%,
      38% 76%,
      38% 28%,
      61% 28%,
      61% 12%,
      55% 12%,
      55% 62%,
      68% 62%,
      68% 51%,
      0% 51%,
      0% 92%,
      63% 92%,
      63% 4%,
      65% 4%
    );
  }

  45% {
    clip-path: polygon(
      0% 33%,
      2% 33%,
      2% 69%,
      58% 69%,
      58% 94%,
      55% 94%,
      55% 25%,
      33% 25%,
      33% 85%,
      16% 85%,
      16% 19%,
      5% 19%,
      5% 20%,
      79% 20%,
      79% 96%,
      93% 96%,
      93% 50%,
      5% 50%,
      5% 74%,
      55% 74%,
      55% 57%,
      96% 57%,
      96% 59%,
      87% 59%,
      87% 65%,
      82% 65%,
      82% 39%,
      63% 39%,
      63% 92%,
      4% 92%,
      4% 36%,
      24% 36%,
      24% 70%,
      1% 70%,
      1% 43%,
      15% 43%,
      15% 28%,
      23% 28%,
      23% 71%,
      90% 71%,
      90% 86%,
      97% 86%,
      97% 1%,
      60% 1%,
      60% 67%,
      71% 67%,
      71% 91%,
      17% 91%,
      17% 14%,
      39% 14%,
      39% 30%,
      58% 30%,
      58% 11%,
      52% 11%,
      52% 83%,
      68% 83%
    );
  }

  76% {
    clip-path: polygon(
      0% 26%,
      15% 26%,
      15% 73%,
      72% 73%,
      72% 70%,
      77% 70%,
      77% 75%,
      8% 75%,
      8% 42%,
      4% 42%,
      4% 61%,
      17% 61%,
      17% 12%,
      26% 12%,
      26% 63%,
      73% 63%,
      73% 43%,
      90% 43%,
      90% 67%,
      50% 67%,
      50% 41%,
      42% 41%,
      42% 46%,
      50% 46%,
      50% 84%,
      96% 84%,
      96% 78%,
      49% 78%,
      49% 25%,
      63% 25%,
      63% 14%
    );
  }

  90% {
    clip-path: polygon(
      0% 41%,
      13% 41%,
      13% 6%,
      87% 6%,
      87% 93%,
      10% 93%,
      10% 13%,
      89% 13%,
      89% 6%,
      3% 6%,
      3% 8%,
      16% 8%,
      16% 79%,
      0% 79%,
      0% 99%,
      92% 99%,
      92% 90%,
      5% 90%,
      5% 60%,
      0% 60%,
      0% 48%,
      89% 48%,
      89% 13%,
      80% 13%,
      80% 43%,
      95% 43%,
      95% 19%,
      80% 19%,
      80% 85%,
      38% 85%,
      38% 62%
    );
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    clip-path: none;
  }
}

.movement {
  /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
  position: relative;
  animation: movement 8s step-end infinite;
}

@keyframes movement {
  0% {
    top: 0px;
    left: -20px;
  }

  15% {
    top: 10px;
    left: 10px;
  }

  60% {
    top: 5px;
    left: -10px;
  }

  75% {
    top: -5px;
    left: 20px;
  }

  100% {
    top: 10px;
    left: 5px;
  }
}

.opacity {
  animation: opacity 5s step-end infinite;
}

@keyframes opacity {
  0% {
    opacity: 0.1;
  }

  5% {
    opacity: 0.7;
  }

  30% {
    opacity: 0.4;
  }

  45% {
    opacity: 0.6;
  }

  76% {
    opacity: 0.4;
  }

  90% {
    opacity: 0.8;
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    opacity: 0;
  }
}

.font {
  animation: font 7s step-end infinite;
}

@keyframes font {
  0% {
    font-weight: 100;
    color: #e0287d;
    filter: blur(3px);
  }

  20% {
    font-weight: 500;
    color: #fff;
    filter: blur(0);
  }

  50% {
    font-weight: 300;
    color: #1bc7fb;
    filter: blur(2px);
  }

  60% {
    font-weight: 700;
    color: #fff;
    filter: blur(0);
  }

  90% {
    font-weight: 500;
    color: #e0287d;
    filter: blur(6px);
  }
}

.glitch span {
  animation: paths 5s step-end infinite;
}

.glitch::before {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 8s step-end infinite, movement 10s step-end infinite;
}

.glitch::after {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 7s step-end infinite, movement 8s step-end infinite;
}

.hero-container {
  position: relative;
  padding: 200px 0;
  text-align: center;
}

@font-face {
  font-family: "squartiqa4fstrike";
  src: url("/fonts/Squartiqa4FStrike.woff2") format("woff2"),
    url("/fonts/Squartiqa4FStrike.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/*Texto de elegir lado, hay que centrarlo y hacerlo mas grande*/
.chooseTeam {
  font-size: xxx-large;
  position: absolute;
  font-family: squartiqa4fstrike;
  display: flex;
  justify-content: center;
  width: 100%;
  /*! margin: auto; */
}
.osoAdentro {
  /*background-image: var(--sloth-img);
  position: absolute;
  animation: paths 2s alternate ease-in-out infinite;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
  width: 98%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: right;*/
}

.salaAgenda {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.sala-button-agenda {
  background-color: var(--rooms-button);
  color: white;
  border: none;
  height: 30px;
  width: 85px;
}

.sala-button-agenda:hover {
  opacity: 0.6;
}

.sala-button-agenda:first-child {
  border-radius: 4px 0px 0px 4px;
}

.sala-button-agenda:last-child {
  border-radius: 0px 4px 4px 0px;
}

.room-selected {
  background-color: var(--room-selected);
  border: 1px solid black;
  height: 33px;
}
.slothSquare{
  background-image: var(--sloth-img);
  width: 10%;
  height: 30%;
  position: absolute;
  background-repeat: no-repeat;
  left: 8%;
  animation: paths 2s alternate ease-in-out infinite;
  will-change: transform;
}