body {
   margin: 0;
   padding: 0;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
}

body * {
   font-family: 'Loved by the King', cursive;
}

body>#backgroundWraper {
   position: absolute;
   height: 100%;
   width: 100%;
   overflow: hidden;
}

img.background {
   position: relative;
   top: 50%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
}

#content {
   display: initial;
   width: 100%;
   height: 100%;
}

#loading {
   position: absolute;
   width: 100vw;
   height: 100vh;
   top: 50%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
   background: pink;
   margin: 0;
   padding: 10px;
   opacity: 1;
   z-index: 1;
   display: none;
}

#about {
   right: 0;
   top: 0;
}

#gear {
   left: 0;
   top: 0;
}

#about, #gear {
   position: absolute;
   font-size: 26px;
   font-weight: bolder;
   color: pink;
   opacity: 0.8;
   margin: 1px 5px;
}

#board {
   width: 100%;
   height: 100%;
   overflow: hidden;
   color: pink;
   text-align: center;
   position: absolute;
   padding: 0;
   max-width: 100vw;
   max-height: 100vh;
   top: 0px;
   left: 0px;
   padding: 5vh 10vw;
}

#componentsContainer {
   width: 100%;
   position: relative;
   margin: 0 auto;
   top: 50%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
}

#componentsContainer>* {
   width: 100%;
}

h1 {
   margin-top: .5rem;
   margin-bottom: .5rem;
}

/* @media (min-width: 576px) { ... } */

/* @media (max-width: 768px) {} */

@keyframes lds-heart {
   0% {
      -webkit-transform: scale(0.85);
      transform: scale(0.85);
   }
   5% {
      -webkit-transform: scale(1);
      transform: scale(1);
   }
   39% {
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
   }
   45% {
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
   }
   60% {
      -webkit-transform: scale(0.85);
      transform: scale(0.85);
   }
   100% {
      -webkit-transform: scale(0.8);
      transform: scale(0.8);
   }
}

@-webkit-keyframes lds-heart {
   0% {
      -webkit-transform: scale(0.85);
      transform: scale(0.85);
   }
   5% {
      -webkit-transform: scale(1);
      transform: scale(1);
   }
   39% {
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
   }
   45% {
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
   }
   60% {
      -webkit-transform: scale(0.85);
      transform: scale(0.85);
   }
   100% {
      -webkit-transform: scale(0.8);
      transform: scale(0.8);
   }
}

.lds-css {
   width: 100%;
   height: 100%;
}

.lds-heart {
   position: relative;
   -webkit-animation: lds-heart 1s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
   animation: lds-heart 1s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
   box-sizing: border-box;
   margin: auto;
   top: 34%;
   position: relative;
   --webkit-transform: translateX(-50%) translateY(-50%);
   transform: translateX(-50%) translateY(-50%);
   width: 200px !important;
   height: 200px !important;
}

.lds-heart div {
   top: 72px;
   left: 60px;
   position: absolute;
   width: 80px;
   height: 80px;
   background: #912623;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
}

.lds-heart div:after, .lds-heart div:before {
   content: " ";
   position: absolute;
   display: block;
   width: 80px;
   height: 80px;
   background: #912623;
}

.lds-heart div:before {
   left: -52px;
   border-radius: 50% 0 0 50%;
}

.lds-heart div:after {
   top: -52px;
   border-radius: 50% 50% 0 0;
}

@media (orientation: landscape) {
   img.background {
      width: 100%;
   }
   h1.title {
      margin-bottom: 7vh;
   }
   .lds-heart {
      top: 20%;
   }
}

@media (orientation: portrait) {
   img.background {
      height: 100%;
   }
   h1.title {
      margin-bottom: 80px;
   }
}