html, body {
  background: black;

     -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: none;

    font-family: "IBM Plex Mono", monospace;
    letter-spacing: 0.1em;
    color: green;
    font-size: 1.2em;
    text-transform: uppercase;
}

.card {
  background-color: black;
  min-width: 350px;
  max-width: 500px;
  margin: auto;
  margin-bottom: 15px;
  padding: 15px;
  border-style: dashed;
  border-color: #222;
}

.container {
  padding-top: 1em;
  text-align: center;
}

#timer {
    width: 50px;
    position: relative;
    float: left;
    margin-left: 50%;
    margin-right: 50%;
    margin-bottom: -100px;
    left: -285px;
    text-align: left;
    color: #d0d0d0;
    font-size: 0.5em;
    display: none;
}

#star {
  display: none;
}

#hourglass {
  transition: 1s;
}

#hourglass2 {
  transition: 1s;
}

.butt {
  margin: 20px;
  outline: none;
  border:none;
  background-color: black;
  vertical-align: middle;
  margin-top: 20px;
  text-decoration: none;
  color: grey;
  height: 50px;
  width: 50px;
  transition: 0.2s;
  font-size: 1.5em;
}