body {
  background-color: #314452;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center; 

  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer */
  -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
  -webkit-user-select: none; /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none; /* Disable Android and iOS callouts*/

  overscroll-behavior-y: contain;

}

.animate-in {
    -webkit-animation: fadeIn 1s ease-in;
    animation: fadeIn 1s ease-in;
}

.animate-out {
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    opacity: 0;
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#preload-01 { background: url(../refresh.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(../back.png) no-repeat -9999px -9999px; }

.container {
  position: fixed;
  padding: 60px;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

.card {
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
  width: 300px;
  margin: auto;
  padding: 10px 35px 10px 35px;
  margin-bottom: 30px;
  border-radius: 10px;
}

a {
  text-decoration: none;
}

p {
  color: white;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  text-shadow: 2px 2px rgba(0, 0, 0, 0.8);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align:center;
  padding: 40px auto;
  font-size: 1.2em;
}

/* drag */

.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  padding: 1em;
}
.gu-hide {
  display: none !important;
}
.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
.gu-transit {
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
}
.gu-mirror {
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
}

/*gen button*/

#gen {
  margin: 10px;
  outline: none;
  padding: 5px;
  text-decoration: none;
  font-size: 2em;
  background-color: black;
  color: white;
  height: 80px;
  width: 80px;
  border-radius: 20px;
  border-width: 0px;
  transition: 0.2s;
  opacity: 0.5;
  cursor: pointer;
}

#gen:hover {
  opacity: 0.8;
}

#back {
  margin: 10px;
  outline: none;
  padding: 5px;
  text-decoration: none;
  font-size: 2em;
  background-color: black;
  color: white;
  height: 80px;
  width: 80px;
  border-radius: 20px;
  border-width: 0px;
  transition: 0.2s;
  opacity: 0.5;
  cursor: pointer;
}

#back:hover {
  opacity: 0.8;
}