@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
 
* { 
  margin: 0;
}

html {
  font-family: "Roboto";
}
body {   width: 100%; overflow-x: hidden;
 -webkit-animation-name: background;
  -webkit-animation-duration: 1s;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;}

@-webkit-keyframes background {
  0% {
    background-image: url("../images/bg1.gif");
  }
  50% {
    background-image:  url("../images/bg2.gif");
  }
  100% {
    background-image:  url("../images/bg1.gif");
  }
}

body.admin {background: #fff}

body h1 {font-size: 4.5rem; font-family: 'Roboto', sans-serif;}

.left {position: fixed; width: 60%; left: 0; top: 0; height: 100vh; padding: 2rem}
.right {position: fixed; width: 20%; right: 0; top: 0; height: 100vh; padding: 2.5rem; background: rgba(255,255,255,0.7)}
textarea {width: 94%; height: 50vh;
  border-radius: 1rem;
  border: none;
  margin: 1rem 0;
  padding: 5%;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.1); }

.logo {width: 400px; filter: brightness(100); opacity: .9}
.admin .logo {filter: none}

.sortear {color: #fff;
  background-color: #659711;
  border-color: #659711; border-radius: 1rem; padding: .5rem 1.5rem; font-size: 2rem; box-shadow: none; border: none}
    
    #pick {border-radius: 2rem;
  box-shadow: 0;
  border: 0;
  padding: 1rem 3rem !important;}

.change-instance {
  position: fixed;
  top: 2rem;
  right: 2rem;
  width: auto !important;
  max-width: none;
  z-index: 5;
  border-radius: 2rem;
  background: #ffc107;
  color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.75rem 1.25rem;
  box-shadow: none;
}

.change-instance:hover,
.change-instance:focus {
  color: #000;
  background: #ffca2c;
}
    
    .form-select {max-width: 400px;
  border-radius: 2rem;
  padding: 1rem 2rem;}
    
.form-control {max-width: 400px; border-radius: 2rem;
  padding: 1rem 2rem;}

.instancias-wrapper {
  display: flex;
  justify-content: center;
  gap: 4.5rem;
  flex-wrap: wrap;
  margin: 8rem auto 5rem;
  padding: 0 2rem;
}

.instancia-btn {
  min-width: 280px;
  border: 4px solid #a8d800;
  color: #d6f51b;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 110px;
  padding: 1.5rem 2rem;
  text-decoration: none;
  font-size: 1.65rem;
  font-weight: 700;
  background: rgba(0, 122, 15, 0.18);
}

.instancia-btn:hover,
.instancia-btn:focus {
  color: #fff;
  background: rgba(168, 216, 0, 0.16);
}

.instancias-empty {
  max-width: 560px;
  margin-top: 8rem;
  margin-bottom: 5rem;
  border: 3px solid #a8d800;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  padding: 2rem;
}

@media (max-width: 768px) {
  .instancias-wrapper {
    gap: 1.5rem;
    margin-top: 4rem;
  }

  .instancia-btn {
    width: 100%;
    min-width: 0;
    font-size: 1.25rem;
  }

  .change-instance {
    top: 1rem;
    right: 1rem;
    font-size: 0.8rem;
    padding: 0.6rem 1rem;
  }
}

.winners {background: #f2f2f2}
#imgtop::before {content: url("../images/celebration-background-template-confetti-green-260nw-603154577.webp"); width: 100%; position: absolute; top: 0; left: 0}
    
    .back {border-radius: 1rem; background: rgba(255,255,255,0.6); text-decoration: none; color: #000; position: fixed; bottom: 5%; left: 47%; padding: .5rem 1rem;
  font-weight: bold;
}


ul li {margin: 1rem 0; list-style: none}
ul li h5:before {content: "\F3EC"; font-family: bootstrap-icons !important; font-size: 16px; display: inline-block; margin-right: 10px}
ul li h5 {margin-bottom: 0}
ul li span {color: #006633}

.btn-success {}

#winner {
  color: white;
  font-size: 100px; 
  z-index: 3;
  visibility: hidden;
  opacity: 0; 
  position: fixed;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  will-change: opacity;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
 
#winner.open {
  visibility: initial; 
  opacity: 1;
  transition: opacity 0.5s ease 1.5s, visibility 0.5s ease 1.5s;
}

#close {
  height: 25px;
  visibility: hidden;
  opacity: 0; 
  position: absolute;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  will-change: opacity;
  top: 40px;
  right: 40px;
  z-index: 4;
  cursor: pointer;
}

#close.open {
  visibility: initial; 
  opacity: 1;
  transition: opacity 0.5s ease 2.5s, visibility 0.5s ease 2.5s;
}

#world {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(0, 102, 51, 1);
  position: fixed; top: 0; left: 0;
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  will-change: opacity, visibility
}

#world.open {
  visibility: initial; 
  opacity: 1;
  transition: opacity 1.5s ease, visibility 0.5s ease;
}


@keyframes fadeIn {
  0% {
    transform: scale(0.5);
    transform: skewY(25deg);
    opacity: 0;
    box-shadow: none;
  }
  100% {
    transform: scale(1);
    transform: skewY(0deg);
    opacity: 1;
  }
}