body, html{
  height: 100%;


  max-width: 1000px;
  margin: 10px auto;
  padding: 20px;
  font-size: 27px;
  text-align: center;
  color: #ffffff;
  background-color: #000000
   


   }

-webkit-scrollbar {
  display: none;
}

body, html{
  -ms-overflow-style: none;  
  scrollbar-width: none;  
}


.wrapper {
  margin-top: 5%;
  width: 100%;
  height: 100%;
}

.glow {
  font-size: 27px;
  color: #fff;
  text-align: center;
  animation: glow 1s ease-in-out infinite alternate;
  height: 50%;
}


@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #a2acad, 0 0 40px #a2acad, 0 0 50px #a2acad, 0 0 60px #000000, 0 0 70px #000000;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #9fc2c3, 0 0 40px #9fc2c3, 0 0 50px #9fc2c3, 0 0 60px #9fc2c3, 0 0 70px #000000, 0 0 80px #000000;
  }
}






.answer
{
 position: absolute;
 left:    0;
 right:   0;
 z-index : 0;
 POSITION: fixed;
 bottom: 100;
 height:50%;
}
.hide {
 display: none;
}



* {
  box-sizing: border-box;
}


.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; 
}


.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 900px) {
  .column  {
    width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column  {
    width: 100%;
  }
}








a {
  color: #000000;
  cursor: default;
  font-size: 27px;
  text-decoration: none;
}

a:hover {
  color: #000000;
  cursor:default;
}

a.red {
  color: #fff;
  cursor: default;
  font-size: 20px;
  text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 8px ##ff0000, 0 0 10px ##ff0000, 0 0 15px ##ff0000;
  transition: all 1s;
}

a.red:hover {
  text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 8px ##ff0000, 0 0 10px ##ff0000, 0 0 15px ##ff0000, 0 0 20px ##ff0000, 0 0 25px #00ff33, 0 0 30px #00ff33;
}