@import "/css/normalize.css";

:root {
  --wine: rgb(59, 38, 48);
  --pink:rgb(166, 130, 154);
  --silver: rgb(237, 237, 237);
  --grey:#292929;
  --darkgrey:#181818;
}

@font-face {
  font-family: Daydream;
  src: url(/fonts/Daydream.ttf); /* https://www.dafont.com/daydream-3.font */
}

@font-face {
  font-family: RomanceA;
  src: url(/fonts/RomanceA.ttf); /* https://cinni.net/?z=/font */
}

@font-face {
  font-family: GothPixelFont;
  src: url(/fonts/GothPixelFont.ttf); /* https://dacosta.itch.io/gothic-pixel-font */
}

@font-face {
  font-family: OldEnglishGoth;
  src: url(/fonts/OldEnglishGoth.ttf); /* https://www.fontspace.com/old-english-gothic-pixel-font-f83405 */
}

@font-face {
  font-family: Fira Code;
  src: url(/fonts/FiraCode.ttf); /* https://fonts.google.com/specimen/Fira+Code */
}

@font-face {
  font-family: Kelmscott;
  src: url(/fonts/Kelmscott.ttf); /* https://www.dafont.com/kelmscott.font */ 
}

@font-face {
  font-family: NDSBIOS;
  src: url(/fonts/NDSBIOS.ttf); /* https://www.dafont.com/nintendo-ds-bios.font */
}

@font-face {
  font-family: Minecraft; 
  src: url(/fonts/Minecraft.ttf); /* https://www.dafont.com/minecraft.font */
}

@font-face {
  font-family: Alkhemikal;
  src: url(/fonts/Alkhemikal.ttf);
}

/* Regular */
@font-face {
  font-family: 'DejaVuSansMono';
  src: url('/fonts/DejaVuSansMono.ttf') format('truetype'); /* https://www.fontsquirrel.com/fonts/dejavu-sans-mono */
  font-weight: normal;
  font-style: normal;
}

/* Bold */
@font-face {
  font-family: 'DejaVuSansMono';
  src: url('/fonts/DejaVuSansMono-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

/* Italic */
@font-face {
  font-family: 'DejaVuSansMono';
  src: url('/fonts/DejaVuSansMono-Oblique.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

/* Bold Italic */
@font-face {
  font-family: 'DejaVuSansMono';
  src: url('/fonts/DejaVuSansMono-BoldOblique.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

body {
  font-family: monospace;
  font-size: 0.95em;
  line-height: 1.5em;
  letter-spacing: 0.5px;
  background-color: var(--darkgrey);
  color:var(--silver);
  margin: auto;
  text-align: left;
}

a {
  transition: 0.5s ease;
}

a:hover {
  color: var(--silver);
  text-decoration: dotted underline;
}


input[type="text"], textarea, [contenteditable] {
  cursor: url('/images/text.png') 2 12, text;
} 

/* GRID LAYOUT */

.content {
  padding: 10px;
}

.container {
  justify-items: center;
  background-color: rgb(77, 77, 77);
  padding: 15px 30px 15px;
  gap: 20px;
  margin: 0px auto 0px;
  width: 75%;
  height: 100%;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  grid-auto-flow: row;
  grid-template-areas:
    "header"
    "main"
    "footer";
}

header{
  grid-area: header;
  width: 100%;
  border: 1px solid #fff;
  padding:5px;
  text-align: center;
}

header a {
  display: inline-block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


main {
  grid-area: main;
  width: 100%;
  height: auto;
  border: 1px solid #fff;
  padding:5px;
}


footer {
  margin-bottom: 20px;
  width: auto;
  grid-area: footer;
  min-height: 15px;
  max-height: auto;
  padding: 20px;
  text-align: center;
  border: 1px solid #fff;
  padding:5px;
}

.thumb{
  display:inline-block;
}