@import url(variables.css);
@import url(layout.css);
@import url(button.css);
@import url(index.css);
@import url(hostLobby.css);
@import url(hostGame.css);
@import url(userLobby.css);
@import url(userGame.css);
@import url(timer.css);
body,#body {
  /* Light greenish background color */
  background-color: var(--primary-colour); 
  /* Creates the small square dots */
  background-image: 
    linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
  /* Controls the spacing*/
  background-size: 40px 40px; 
  margin: 0;
  height: 100vh;
    user-select: none;
  background-attachment: fixed;
  overflow-x: hidden;

}
html{
  scrollbar-width: auto;
  scrollbar-color: #7A5500 rgba(0, 0, 0, 0);
}
::selection{
  background-color: #88703846;
}
section{
  padding: 20px;
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--primary-font);
  font-weight:  300;
}
.dotted-background {
  /* This works on ANY background color you set */
  background-color: #f4fbf4; 

  /* Uses 10% black so it perfectly darkens any background color naturally */
  background-image: radial-gradient(rgba(0, 0, 0, 0.1) 2px, transparent 2px);
  background-size: 20px 20px;
}
h1{
  font-size: 4.5rem;
}
.absolute{
  position: absolute;
}
.sqarue{  width: 50px;
  height: 50px;}
td,th{
  font-weight:  300;
}
p{
  font-family: var(--tertiary-font);
}
.emphasis{
  color: var(--secondary-colour);
  text-decoration: none;
  font-style: normal;
}
.shadow{
  box-shadow: 5px 5px 0px var(--tertiary-colour) !important;
}
button{
  font-family: var(--primary-font);
}
input,select{
  font-size: 20px;
  margin: 5px;
  padding: 13px 0;
  width: 300px;
  border: 3px solid var(--tertiary-colour);
}

.card{
 
    margin: 5px;
  padding: 20px;
  border: 3px solid var(--tertiary-colour);
  margin-bottom: 10px;
  margin-top: 10px;
  background-color: var(--alt-primary-colour);

}
.card h2{
  margin: 0;

}
a{
  text-decoration: none !important;
    color: var(--tertiary-colour) !important;

}
.false{
    background-color: var(--tertiary-colour);
}
.true{
    background: none;
}
.red{
    background-color: var(--secondary-colour) !important;
    color: var(--primary-colour) !important;
}
.blue{
    background-color: var(--alt-secondary-colour) ;
    color: var(--primary-colour) ;
    transition: .2s;
}
.yellow{
  background-color: #7A5500;
  color: var(--primary-colour);

}

.red-light{    background-color: #FFDAD8 !important;

    color: var(--tertiary-colour) !important;}
.circle{border-radius: 100px !important;}
.border-red{border-color: #BE123C !important;}
.border-yellow{border-color: #7A5526 !important;}
.neutral{background-color: #FFFFFF !important;}
.line-colour-light{
  background-color: var(--line-colour-light);
}
.blue-button:hover{
  background: none !important;
  transition: .2s;
}
.red-text{
  color: var(--secondary-colour);
}
.fade-in{
  animation: fade-in .5s;
}
.white{background-color: var(--primary-colour); color: var(--tertiary-colour);}
.blue-light{background-color: #BBD3FD; color: var(--tertiary-colour);}
.yellow-light{background-color: #FDE68A !important; color: var(--tertiary-colour);}
.border-none{border: none !important;}
.blue-text{color: var(--alt-secondary-colour);}
.border-thick{border: 5px solid var(--tertiary-colour);}
.border{border: 3px solid var(--tertiary-colour);}
.card-dashed{border: 3px dashed var(--line-colour-light); background: none; color: var(--line-colour-light);}
.border-curved{border-radius: 30px; overflow: hidden;}
.disabled{opacity: 0.7; touch-action: none; pointer-events: none;}
.background-lined {
           /* The key to the lined effect: repeating linear gradient */
         /* Sharp, clear 2-tone diagonal lines */
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(0, 0, 0, 0.06) 8px,
    rgba(0, 0, 0, 0.06) 10px
  );

        }

.slide-down{
  animation: slide-down 2s ;
}
.slide-left{
  animation: slide-left 2s ;
}
.slide-right{
   animation: slide-right 2s ;
}
.slide-up{
  animation:  slide-up 2s;
}

.min-height{
  display: block;
  opacity: 1;
}
.max-height{display: block ;}
.min-width{display: block ;}
.max-width{display: block ;}
@keyframes slide-down {
  from{transform: translateY(-100vh);}
  to{transform: translateY(0vh);}
  
}
@keyframes slide-left {
  from{transform: translateX(-100vw);}
  to{transform: translateX(0vw);}
  
}
@keyframes slide-up {
  from{transform: translateY(100vh);}
  to{transform: translateY(0vh);}
  
}
@keyframes slide-right {
  from{transform: translateX(100vw);}
  to{transform: translateX(0vw);}
  
}
@keyframes fade-in {
  from{opacity: 0;}
  to{opacity: 1;}  
}
@keyframes fade-out {
  from{opacity: 1;}
  to{opacity: 0;}  
}
@media (max-width : 600px) {
  .max-width{display: none !important;}

}
@media screen and (max-width: 960px) and (max-height: 540px) {
  html {
    zoom: 0.5; /* Forces the browser to scale the entire page down */
  }
  #hostLobby-1-span-2{
    min-height: 200vh;
  }
}