/*image alignment*/
body {
  background-image: url("img/bg.jpg");
  background-repeat: no-repeat; /* Critical for fitting images! */  
  background-position: center;
  background-attachment: fixed;
  background-size: contain;
  min-height: 100vh; /*keeps it aligned at top always*/
  margin: 0;
  background-color: #000000;
}

h1 {
    color:aliceblue
}

label {
    color:aliceblue
}

/*testing of new design, center button*/

@media (orientation: portrait) {
  .circle {
    width: 14vw;
    height: 14vw;
  }
}

@media (orientation: landscape) {
  .circle {
    width: 24vh;
    height: 24vh;
  }
}


.circle {
    border-radius: 50%;
    background-color: transparent;
    border: transparent;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-32%, -120%); /*align size*/
}

.circle:hover {
    background-color: rgba(199, 191, 231, .3) /*hex color: #c7bfe7*/
}

/*debug tool for hitbox, updates things with this class*/
.debug {
    border: #c7bfe7;
    border-style: dashed;
}