@import 'assets/panel.css';
@import 'assets/board.css';
@import 'assets/menu-animation.css';

@import 'assets/popup.css';

:root {
  --background: hsl(230, 12%, 10%);
  --backgroundLight: hsl(230, 9%, 11%);
  --tile: hsl(230, 12%, 20%);
  --tileLight: hsl(230, 12%, 40%);
  --tileLightHover: hsl(230, 12%, 50%);
  --discreettext: hsl(0, 0%, 78%);
  --text: hsl(0, 0%, 98%);
  
  --primary: hsl(18, 91%, 64%);
  --primaryTransparent: hsla(18, 91%, 64%, 0.4);
  --primaryHigh: hsl(18, 91%, 74%);
  --primaryLow: hsl(17, 50%, 31%);

  --warning: hsl(0, 91%, 44%);
  --warningLight: hsl(0, 91%, 54%);

  --confirmation: hsl(157, 68%, 42%);;
  
  --secondary: hsl(197, 84%, 24%);
  --secondaryLight: hsl(197, 84%, 34%);
  --accent: hsl(187, 68%, 42%);

  --replit: #d76b2e;

  --title: 32px;
  --body: 18px;
  --small: 14px;

  --tileSize: 70px;

  --pinSize: 15px;
  --pinDistance: 15px;

  --boardSize: 8000px;

  --panelSize: max(320px, 15%);
}

html {
  background: var(--background); 
  height: 100%;
  width: 100%;
  -webkit-user-select: none; /* webkit (safari, chrome) browsers */
  -moz-user-select: none; /* mozilla browsers */
  -khtml-user-select: none; /* webkit (konqueror) browsers */
  -ms-user-select: none; /* IE10+ */
  user-select: none; /* standard syntax */
  overflow: hidden;
}

body {
  margin: 0;
  
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--background);

  overflow: hidden;
}

* {
  box-sizing: border-box;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--text);
  font-size: var(--body);
}

h1, h2 {
  font-family: "Playfair Display", sans-serif;
  font-style: bold;
  font-size: var(--title);
  text-align: center;
  position: relative;
}

h2 {
  font-size: var(--body);
}

button {
  cursor: pointer;
}

.smalltext {
  font-size: var(--small);
  color: var(--discreettext);
  text-align: center;
}

#title {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.version {
  font-family: "Playfair Display", sans-serif;
  text-align: center;
  margin: 0;
  transform: tran;
}

.author {
  margin-bottom: 40px;
}

.author a {
  text-decoration: none;
}

.author a:hover {
  text-decoration: underline;
}


/*---------------- SCROLLBAR ----------------*/

/* width */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  border: none;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--backgroundLight); 
  border: none;
  z-index: -1;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--accent); 
  border-radius: 6px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--accent); 
  cursor: move;
}