@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap");
body, html {
  height: 100vh;
  position: relative;
  display: block;
  font-family: "Cormorant Garamond", sans-serif;
  color: #eee;
  background: black;
  margin: 0;
  overflow: hidden;
}

a, a:visited {
  color: #eee;
  text-decoration: none;
}

.block-i-text {
  position: absolute;
  z-index: 10;
  font-size: 6vh;
  text-align: left;
  left: 98%;
  top: 5vw;
}

@media (min-height: 700px) {
  .block-i-text {
    font-size: 6vh;
  }
}

.block-pate {
  position: absolute;
  z-index: 1;
  width: 50vw;
  height: 100vh;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.block-pate:before {
  position: absolute;
  z-index: 1;
  width: 50vw;
  height: 100vh;
  background: url("../media/front-pate-back.jpg") no-repeat;
  background-size: cover;
  background-position: right;
  -webkit-filter: brightness(30%);
          filter: brightness(30%);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  content: "";
}

@media (hover: none) {
  .block-pate:before {
    -webkit-filter: brightness(60%);
            filter: brightness(60%);
  }
}

.block-pate:hover:before {
  -webkit-filter: brightness(60%);
          filter: brightness(60%);
  cursor: pointer;
}

.block-pate-text {
  position: relative;
  z-index: 5;
  font-size: 6vh;
  text-align: center;
  padding: 5vw;
}

@media (min-height: 700px) {
  .block-pate-text {
    font-size: 6vh;
  }
}

.block-pate img {
  z-index: 6;
  position: relative;
  padding: 7.5vh;
  width: 30vh;
  height: auto;
  -webkit-filter: brightness(40%);
          filter: brightness(40%);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

@media (hover: none) {
  .block-pate img {
    -webkit-filter: brightness(80%);
            filter: brightness(80%);
  }
}

.block-pate img:hover {
  -webkit-filter: brightness(100%);
          filter: brightness(100%);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
}

.block-pate-grad {
  z-index: 5;
  position: absolute;
  top: 27.5vh;
  left: 12vmax;
  width: 45vh;
  height: auto;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation: pulse 1s linear infinite;
          animation: pulse 1s linear infinite;
  -webkit-transition: 1s;
  transition: 1s;
}

@media only screen and (min-height: 600px) and (max-width: 1120px) {
  .block-pate-grad {
    left: 9vh;
  }
}

@media (hover: none) {
  .block-pate-grad {
    -webkit-animation-play-state: running;
            animation-play-state: running;
  }
}

.block-pate-grad:hover {
  -webkit-transition: 1s;
  transition: 1s;
}

@-webkit-keyframes pulse {
  0% {
    background: radial-gradient(35vh 38vh, rgba(255, 255, 255, 0.9) 30%, rgba(0, 0, 0, 0) 55%);
  }
  15% {
    background: radial-gradient(35vh 38vh, rgba(255, 255, 255, 0.9) 31%, rgba(0, 0, 0, 0) 57%);
  }
  30% {
    background: radial-gradient(35vh 38vh, rgba(255, 255, 255, 0.9) 32%, rgba(0, 0, 0, 0) 60%);
  }
  45% {
    background: radial-gradient(35vh 38vh, rgba(255, 255, 255, 0.9) 33%, rgba(0, 0, 0, 0) 65%);
  }
  60% {
    background: radial-gradient(35vh 38vh, rgba(255, 255, 255, 0.9) 33%, rgba(0, 0, 0, 0) 65%);
  }
  75% {
    background: radial-gradient(35vh 38vh, rgba(255, 255, 255, 0.9) 32%, rgba(0, 0, 0, 0) 60%);
  }
  90% {
    background: radial-gradient(35vh 38vh, rgba(255, 255, 255, 0.9) 31%, rgba(0, 0, 0, 0) 57%);
  }
  100% {
    background: radial-gradient(35vh 38vh, rgba(255, 255, 255, 0.9) 30%, rgba(0, 0, 0, 0) 55%);
  }
}

@keyframes pulse {
  0% {
    background: radial-gradient(35vh 38vh, rgba(255, 255, 255, 0.9) 30%, rgba(0, 0, 0, 0) 55%);
  }
  15% {
    background: radial-gradient(35vh 38vh, rgba(255, 255, 255, 0.9) 31%, rgba(0, 0, 0, 0) 57%);
  }
  30% {
    background: radial-gradient(35vh 38vh, rgba(255, 255, 255, 0.9) 32%, rgba(0, 0, 0, 0) 60%);
  }
  45% {
    background: radial-gradient(35vh 38vh, rgba(255, 255, 255, 0.9) 33%, rgba(0, 0, 0, 0) 65%);
  }
  60% {
    background: radial-gradient(35vh 38vh, rgba(255, 255, 255, 0.9) 33%, rgba(0, 0, 0, 0) 65%);
  }
  75% {
    background: radial-gradient(35vh 38vh, rgba(255, 255, 255, 0.9) 32%, rgba(0, 0, 0, 0) 60%);
  }
  90% {
    background: radial-gradient(35vh 38vh, rgba(255, 255, 255, 0.9) 31%, rgba(0, 0, 0, 0) 57%);
  }
  100% {
    background: radial-gradient(35vh 38vh, rgba(255, 255, 255, 0.9) 30%, rgba(0, 0, 0, 0) 55%);
  }
}

.block-voteto {
  position: absolute;
  z-index: 1;
  left: 50vw;
  width: 50vw;
  height: 100vh;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.block-voteto:hover {
  z-index: 1;
  cursor: pointer;
  -webkit-filter: sepia(80%);
          filter: sepia(80%);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

#duck {
  z-index: 5;
  position: absolute;
  top: 28vh;
  left: 18vw;
  width: 20vh;
  height: auto;
  animation: shake 0.25s linear infinite alternate-reverse;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-filter: sepia(60%);
          filter: sepia(60%);
}

@media only screen and (min-height: 600px) and (max-width: 1120px) {
  #duck {
    left: 30%;
  }
}

#horse {
  z-index: 5;
  position: absolute;
  top: 35vh;
  left: 13vw;
  width: 50vh;
  height: auto;
  -webkit-animation: shake 0.3s linear infinite;
          animation: shake 0.3s linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-filter: sepia(60%);
          filter: sepia(60%);
}

@media only screen and (min-height: 600px) and (max-width: 1120px) {
  #horse {
    left: 15%;
  }
}

#octopus {
  z-index: 5;
  position: absolute;
  top: -15vh;
  right: -18vh;
  width: 50vh;
  height: auto;
  -webkit-filter: sepia(60%) brightness(60%);
          filter: sepia(60%) brightness(60%);
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
  -webkit-animation: shakeo 0.3s linear infinite;
          animation: shakeo 0.3s linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

@media only screen and (min-height: 600px) and (max-width: 1120px) {
  #octopus {
    right: -25vh;
  }
}

#secret1 {
  z-index: 0;
  position: absolute;
  top: 58vh;
  right: 24vw;
  width: 10vh;
  height: auto;
  -webkit-filter: sepia(60%) brightness(60%);
          filter: sepia(60%) brightness(60%);
  display: none;
}

@media only screen and (min-height: 600px) and (max-width: 1120px) {
  #secret1 {
    right: -25vh;
  }
}

#secret2 {
  z-index: -1;
  position: absolute;
  top: 10vh;
  right: -20vw;
  width: 50vh;
  height: auto;
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
  -webkit-filter: sepia(60%) brightness(60%);
          filter: sepia(60%) brightness(60%);
  -webkit-animation: secret2 3s linear infinite;
          animation: secret2 3s linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  filter: sepia(60%) brightness(60%);
  display: none;
}

@media only screen and (min-height: 600px) and (max-width: 1120px) {
  #secret2 {
    right: -25vh;
  }
}

#secret_cover {
  display: none;
  z-index: 999;
  background: black;
  /* background: url("to/your/ajaxloader.gif") no-repeat scroll center center #FFF; */
  position: fixed;
  height: 100vh;
  width: 100vw;
}

#question {
  position: relative;
  z-index: 999;
  font-size: 10vmin;
  top: 33vh;
  text-align: center;
}

#yes, #no {
  cursor: pointer;
  margin-top: 5vh;
  font-size: 5vmin;
  padding: 1vmin;
  width: 15vmin;
  color: white;
  background-color: red;
  border-right: solid 2px green;
  border-left: solid 2px green;
  border-radius: 10px;
}

#yes:hover, #no:hover {
  background-color: #ff4646;
}

#no {
  background-color: blue;
}

#no:hover {
  background-color: #4542ff;
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
}

@keyframes shake {
  0% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
}

@-webkit-keyframes shakeo {
  0% {
    -webkit-transform: rotate(35deg);
            transform: rotate(35deg);
  }
  50% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  100% {
    -webkit-transform: rotate(35deg);
            transform: rotate(35deg);
  }
}

@keyframes shakeo {
  0% {
    -webkit-transform: rotate(35deg);
            transform: rotate(35deg);
  }
  50% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  100% {
    -webkit-transform: rotate(35deg);
            transform: rotate(35deg);
  }
}

@-webkit-keyframes secret2 {
  4% {
    top: 10vh;
    right: -20vw;
  }
  8% {
    top: 11vh;
    right: -16vw;
  }
  12% {
    top: 12vh;
    right: -12vw;
  }
  16% {
    top: 14vh;
    right: -8vw;
  }
  20% {
    top: 16vh;
    right: -6vw;
  }
  24% {
    top: 18vh;
    right: -4vw;
  }
  28% {
    top: 20vh;
    right: -2vw;
  }
  32% {
    top: 22vh;
    right: 0vw;
  }
  36% {
    top: 24vh;
    right: 0vw;
  }
  40% {
    top: 25vh;
    right: 0vw;
  }
  44% {
    top: 24vh;
    right: 0vw;
  }
  48% {
    top: 25vh;
    right: 0vw;
  }
  52% {
    top: 24vh;
    right: 0vw;
  }
  56% {
    top: 25vh;
    right: 0vw;
  }
  60% {
    top: 24vh;
    right: 0vw;
  }
  64% {
    top: 25vh;
    right: 0vw;
  }
  68% {
    top: 24vh;
    right: 0vw;
  }
  72% {
    top: 22vh;
    right: 0vw;
  }
  76% {
    top: 20vh;
    right: -2vw;
  }
  80% {
    top: 18vh;
    right: -4vw;
  }
  84% {
    top: 16vh;
    right: -6vw;
  }
  88% {
    top: 14vh;
    right: -8vw;
  }
  92% {
    top: 12vh;
    right: -12vw;
  }
  96% {
    top: 11vh;
    right: -16vw;
  }
  100% {
    top: 10vh;
    right: -20vw;
  }
}

@keyframes secret2 {
  4% {
    top: 10vh;
    right: -20vw;
  }
  8% {
    top: 11vh;
    right: -16vw;
  }
  12% {
    top: 12vh;
    right: -12vw;
  }
  16% {
    top: 14vh;
    right: -8vw;
  }
  20% {
    top: 16vh;
    right: -6vw;
  }
  24% {
    top: 18vh;
    right: -4vw;
  }
  28% {
    top: 20vh;
    right: -2vw;
  }
  32% {
    top: 22vh;
    right: 0vw;
  }
  36% {
    top: 24vh;
    right: 0vw;
  }
  40% {
    top: 25vh;
    right: 0vw;
  }
  44% {
    top: 24vh;
    right: 0vw;
  }
  48% {
    top: 25vh;
    right: 0vw;
  }
  52% {
    top: 24vh;
    right: 0vw;
  }
  56% {
    top: 25vh;
    right: 0vw;
  }
  60% {
    top: 24vh;
    right: 0vw;
  }
  64% {
    top: 25vh;
    right: 0vw;
  }
  68% {
    top: 24vh;
    right: 0vw;
  }
  72% {
    top: 22vh;
    right: 0vw;
  }
  76% {
    top: 20vh;
    right: -2vw;
  }
  80% {
    top: 18vh;
    right: -4vw;
  }
  84% {
    top: 16vh;
    right: -6vw;
  }
  88% {
    top: 14vh;
    right: -8vw;
  }
  92% {
    top: 12vh;
    right: -12vw;
  }
  96% {
    top: 11vh;
    right: -16vw;
  }
  100% {
    top: 10vh;
    right: -20vw;
  }
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}

.block-voteto-text {
  position: relative;
  z-index: 6;
  font-size: 6vh;
  text-align: center;
  padding: 5vw;
}

@media (min-height: 700px) {
  .block-voteto-text {
    font-size: 6vh;
  }
}
/*# sourceMappingURL=style.css.map */