@font-face {
  font-family: "TILESportfolio";
  src: url("../assets/Fonts/TILESportfolio.ttf");
}

@font-face {
  font-family: "PixelPlay";
  src: url("../assets/Fonts/pixelplay.ttf");
}

:root{
  --caption-height:30px;

  /* map palettes */
  --rocks-1:#817a68;
  --rocks-2:#7c6f50;
  --rocks-3:#716450;

  --grass-1:#7a7c3f;
  --grass-2:rgb(120, 130, 63);
  --grass-3:#577021;

  --water-1:#6c767c;
  --water-2:#79868a;
  --water-3:#5c747f;

  --paths-1:rgb(173, 149, 103);
  --paths-2:rgb(160, 138, 97);

  --ground-1:#8c7a69;
  --ground-2:#8b7858;

  --building-1:#b81515;
  --buildingTop-1:#52462b;

  --empty-1:rgb(189, 170, 139);
}

body{
  margin:0;
  font-family:PixelPlay;
  background:rgb(189, 170, 139);
}

/* shared layout */

#layout{
  display:grid;
  grid-template-columns:1fr 300px;
  height:100vh;
}

/* sidebar content (shared) */

#gui{
  padding:1rem;
  background:rgb(189, 170, 139);
  overflow-y:auto;
  box-shadow: 3px 0px black;
  display:flex;
  flex-direction:column;
  font-size: 18px;
  border-left: 3px dotted;
}

#gui ul{
  list-style:none;
  position:relative;
  line-height:1.1;
}

#gui li::before{
  content:">";
  position:absolute;
  left:0;
}

.gui-credits{
  margin-top:auto;
  margin-right: 10px;
  margin-bottom: 35px;
  font-family:PixelPlay;
  font-size:16px;
  text-align: right;
}

.gui-credits a{
  color:rgb(230,7,7);
  text-decoration:none;
}

.gui-credits a:hover{
  text-decoration:underline;
}

/* table of contents */

#toc ul{
  padding:0;
  margin:0;
  counter-reset: toc;
}

#toc li{
  list-style:none;
  counter-increment: toc;
}

#toc li::before{
  content:none;
}

#toc a{
  display:flex;
  align-items:flex-end;
  text-decoration:none;
  color:rgb(230,7,7);
}

#toc a::before{
  content:">";
  margin-right:8px;
}

/* dots that stretch */

#toc a::after{
  content:" ." counter(toc);
  flex:1;
  border-bottom:2px dotted red;
  margin:0 12px 2px 8px;
  text-align:right;
  color:red;
}

/* hover */

#toc a:hover{
  color:rgb(63,8,8);
  transform:translateX(4px);
}

/* visited */

#toc a:visited{
  color:rgb(99,85,85);
}

/* active */

#toc a:active{
  color:yellow;
}

@keyframes menuBlink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

#toc a:hover::before{
  animation:menuBlink 0.8s steps(1) infinite;
  color:rgb(255, 247, 0);
  font-weight: bold;
  text-shadow: 0px 1px black;
}

.page-index a[href="index.html"],
.page-about a[href="about.html"],
.page-archive a[href="archives.html"],
.page-cv a[href="cv.html"]{
  background:#d5b5a048;
  box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.39);
  border-radius: 2px;
  padding:3px 0px;
}

.page-index a[href="index.html"]::before,
.page-about a[href="about.html"]::before,
.page-archive a[href="archives.html"]::before,
.page-cv a[href="cv.html"]::before{
  animation:menuBlink 2s steps(1) infinite;
  color:rgb(255, 0, 0);
  font-weight:bold;
  text-shadow:0px 1px black;
}



.player-symbol{
  font-family:TILESportfolio;
  font-size:20px;
}