@font-face {
   font-family: "playgaurd";
   src: url("Assets/Fonts/Plaguard.otf");
}

#game {
   background-color: black;
}
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body {
   height: 100vh;
   background: #000428;
   background: -webkit-linear-gradient(to right, #004e92, #000428);
   background: linear-gradient(to right, #004e92, #000428);
   color: white;
   font-family: "Montserrat", sans-serif;
   justify-content: center;
}

#title {
   font-size: 50px;
   font-family: "playgaurd", Arial, Helvetica, sans-serif;
   color: #1216ec;
}

h1 {
   transition: all 0.4s ease;
}

#title:hover h1 {
   transition: all 0.4s ease;
   transform: scaleY(-1);
   color: #8a0224;
}

.flexcol-center {
   flex-direction: column;
   display: flex;
   align-items: center;
}

.container {
   justify-content: space-around;
}

#input-name {
   align-items: flex-start;
   padding-bottom: 20px;
}

#name {
   background-color: transparent;
   color: white;
   border-radius: 5px;
   font-family: "Poppins", sans-serif;
   line-height: 2;
   border: 1px solid black;
}

#name {
   color: black;
   background-color: white;
}

button {
   width: fit-content;
   color: white;
   border-radius: 5px;
   line-height: 2;
   padding: 0 20px;
   background-color: transparent;
}
button:hover {
   color: black;
   background-color: white;
}

#canvas-container {
   display: flex;
   padding: 0;
   height: 450px;
}

#game {
   background-color: black;
}
#canvas-container {
   position: relative;
}
#canvas-container > canvas {
   position: absolute;
   left: 0;
   top: 0;
}

#score {
   display: none;
   align-self: center;
   padding-top: 2px;
   height: 0px;
}

#game {
   display: none;
   background-color: black;
}

#game-overlay {
   font-family: "Montserrat", sans-serif;
   font-weight: 700;
   display: none;
   position: absolute;
   background-color: black;
   color: white;
   justify-content: center;
   opacity: 0.5;
   z-index: 10;
   overflow: auto;
   width: 800px;
   height: 450px;
}

.padding-20 {
   padding: 20px;
}

#outer-container {
   width: 810px;
   height: 460px;
   display: none;
   border: 5px solid gray;
   border-radius: 5px;
}

#view-scores-menu {
   display: none;
}

#high-scores {
   display: none;
}

@media all and (orientation: portrait) {
   body {
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg);
   }
}