@import url("colour.css");
@import url("size.css");

/* ===== FONTS ===== */
@font-face {
  font-family: hermit;
  src: url(hermit/Hermit-Regular.otf);
}

@font-face {
  font-family: platinum_sign_under;
  src: url(platinum_sign/Platinum\ Sign\ Under.ttf);
}

@font-face {
  font-family: platinum_sign_over;
  src: url(platinum_sign/Platinum\ Sign\ Over.ttf);
}

@font-face {
  font-family: platinum_sign;
  src: url(platinum_sign/Platinum\ Sign.ttf);
}

/* ===== STYLE ===== */
:root {
  background-color: var(--background-colour);
  color: var(--main-colour-1);
  font-family: hermit;
}

@media screen and (min-width: 601px) {
  :root {
    font-size: 20px;
  }
}

@media screen and (max-width: 600px) {
  :root {
    font-size: 16px
  }
}

h1 {
  color: var(--main-colour);
}

nav {
  height: 1fr;
  width: 1fr;
  text-align: center;
}

nav>a {
  display: block;
  text-decoration: none;
  background-color: var(--background-colour-8);
  color: var(--main-colour-2);
  text-align: center;
}

nav>a:hover {
  background-color: var(--background-colour-7);
}


/* ===== LAYOUT ===== */

.container {
  height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--header-height) .8fr .2fr;
  grid-template-areas:
    "corner header"
    "nav main"
    "footer footer";
}

.container .header {
  grid-area: header;
  align-content: center;
  text-align: center;
}

.main {
  grid-area: main;
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}

.nav {
  grid-area: nav;
}