@font-face {
  font-family: myFirstFont;
  src: url(./game/rsc/04B_03.TTF);
}

html * {
  font-family: myFirstFont !important;
  font-size: 16px !important;
  cursor: url("./cursor.png"), auto !important;
}

body {
  background-color: #DE6C1C;
  margin: 0;
}

/* The Modal (background) */
.modal {
  /* display: none;  Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  margin: auto;
  width: 30%;
  box-shadow: 0 0 60px 5px rgba(0,0,0,0.5);
  border-radius: 20px;
  background-color: #1C2623;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.title {
  color: white; 
  text-align: center; 
  position: absolute; 
  left: 50%; 
  transform: translate(-50%, 0);
}

.gameArt {
  width: -webkit-fill-available; 
  border-top-left-radius: inherit; 
  border-top-right-radius: inherit;
}

.logo {
  width: -webkit-fill-available;
  transform: translate(0%, 10%);
}

.logoCircle {
  background-color: transparent; 
  position: relative;
  border-radius: 50%;
  width: 25%;
  left: 50%; transform: translate(-50%, -50%);
}

span {
  color: dodgerblue;
}

input {
  height: 2rem;
  width: 50%;
  margin-bottom: 0.5rem;
}

p {
  margin: 5px; 
  margin-right: 1rem; 
}

.login {
  height: 2rem;
  width: 50%;
  
}

.register {
  height: 2rem;
  width: 25%;
  margin: 5px;
}

span:hover {
  text-decoration: underline;
  cursor: pointer;
}

.row {
  display: flex; 
  flex-direction: row; 
  justify-content: center;
}

.regForm {
  display: none; 
  text-align: center; 
  padding-bottom: 2.5rem;
}

.text {
  display: flex;
  flex-direction: column;
  text-align: end;
}

.gamePage {
  display: none; 
}