@font-face {
  font-family: 'play';
  src: url("Play-Regular.ttf");
}

html {
  background-image: url(../bg.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
overflow: hidden;
}

.hide {
  display: none;
}

.img-text {
  float:right;
  background-image: url(../info.png);
  background-size:contain;
  background-repeat: no-repeat;
  width:16vh;
  height:16vh;
  opacity:0.8;
  transition: 3s;
}


.img-text:hover {
  opacity:1;
  transition: 2s;
}


.myDIV:hover + .hide {
  position: fixed;
  display: block;
  width:350px;
  margin: 5% 2% 2% 2%;
  background-color: #9500ff54;
  z-index: 30;
  border-radius: 20% 20% 20% 20%;
  padding:3%;
}

#toHide {
  width:80%;
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  z-index:20;
}

video::-webkit-media-controls-start-playback-button {
  display: none;
}

img  {
width:25%;
text-align:center;
position: absolute;
bottom: 25%;
left: 40%;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}

/* rotate 360 key for refresh btn */
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } 

p  {
  font-size: 3em; 
  font-family:play;
  color: rgb(255, 255, 255);
  text-align:center;
  position: absolute;
  top: 10%;
  left:10%;
  right:10%;
  text-decoration: none;
  z-index:0;
  -webkit-animation: 3s ease 0s normal forwards 1 fadein;
  animation: 3s ease 0s normal forwards 1 fadein;
}

h1  {
  font-size: 1em; 
  font-family:play;
  color: rgb(255, 255, 255);
  text-align:center;
}

h2  {
  font-size: 1.4em; 
  font-family:play;
  color: rgb(255, 255, 255);
  text-align:center;
}

.yes  {
  font-size: 5em; 
  font-family:play;
  color: rgb(255, 255, 255);
  text-align:center;
  position: absolute;
  bottom: 40%;
  left:15%;
  text-decoration: none;
  z-index:0;
  -webkit-animation: 3s ease 0s normal forwards 1 fadein;
  animation: 3s ease 0s normal forwards 1 fadein;
}

@keyframes fadein{
  0% { opacity:0; }
  66% { opacity:0; }
  100% { opacity:1; }
}

@-webkit-keyframes fadein{
  0% { opacity:0; }
  66% { opacity:0; }
  100% { opacity:1; }
}


.no  {
  font-size: 5em; 
  font-family:play;
  color: rgb(255, 255, 255);
  text-align:center;
  position: absolute;
  bottom: 40%;
  right:15%;
  text-decoration: none;
  z-index:0;
  -webkit-animation: 3s ease 0s normal forwards 1 fadein;
  animation: 3s ease 0s normal forwards 1 fadein;
}

.no:hover {
  text-shadow: 3px 3px 15px rgb(175, 0, 201);
}

.yes:hover {
  text-shadow: 3px 3px 8px rgb(175, 0, 201);
}

@media screen and (max-width:1024px) {
  p  {
    font-size: 2vh; 
    top:35%;
}

.yes {
  font-size: 3.5vh; 
}

.no {
  font-size: 3.5vh; 
}

img  {
top:45%;
}

#toHide {  
  width: 100%;
}

.img-text {
  width:14vh;
  height:14vh;
}


.myDIV:hover + .hide {
margin-top:20%;
}


}