@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;}
    
    .form-select {max-width: 400px;
  border-radius: 2rem;
  padding: 1rem 2rem;}
    
    .form-control {max-width: 400px; border-radius: 2rem;
  padding: 1rem 2rem;}

.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;
  }
}