* {
  box-sizing: border-box;
}

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

:root {
  --bg: #fbf8f3;
  --text: #222222;
  --hover: #f9f6f1;
  --heading: #1a1a1a;
  --acc1: #2f5f5a;
  --acc2: #8b5e3c;
  --dmbg: #121417;
  --dmsec: #1b1f24;
  --dmtext: #e6e3dc;
  --dmhover2: #b7b4ac;
  --dmheading: #f0ede6;
  --dmacc1: #6fa3a0;
  --dmacc2: #c48b5f;
  --dmhover: #8bb8b5;
}

body {
  background-color: #5090b7;
  background-image: url("./img/layout/blue_bg.png");
  color: var(--text);
  font-family: Times, serif;
  display: grid;
  grid-template-columns: auto 250px 420px 250px auto;
  padding: 10px;
  gap: 6px;
}

header {
  background-color: var(--bg);
  color: var(--text);
  font-family: Beon;
  padding: 0;
  border: 2px solid black;
  grid-column: 2/5;
  grid-row: 1/2;
  display: grid;
  grid-template-columns: 500px auto;
}

footer {
  background-color: var(--acc1);
  color: var(--bg);
  font-family: Beon;
  padding: 0;
  border: 2px solid black;
  text-align: center;
  grid-column: 2/5;
}

h3 {
  font-family: Beon;
}

p {
  font-family: "Libre Baskerville", Times, serif;
}

#sitename {
  grid-column: 1/2;
  grid-row: 1/2;
  margin-left: 8px;
}

#tagline {
  grid-column: 2/3;
  grid-row: 1/2;
}

#navbar {
  grid-column: 1/3;
  grid-row: 2/3;
  background-color: var(--acc1);
  list-style-type: none;
  margin: 0;
  padding: 0;
  color: var(--text);
  overflow: hidden;
}

.navlink {
  float: left;
}

.navlink a {
  color: var(--bg);
  text-decoration: none;
  display: block;
  padding: 4px;
}

.navlink a:hover {
  background-color: var(--hover);
  color: var(--text);
}

.contentdiv {
  background-color: var(--bg);
  color: var(--text);
  border: 2px solid black;
  padding: 2px;
}

#topdiv {
  grid-column: 2/5;
  grid-row: 2/3;
}

#recommendedreading {
  grid-column: 2/4;
  grid-row: 3/4;
}

#latestposts {
  grid-column: 4/5;
  grid-row: 3/4;
}

#readingpaths {
  grid-column: 2/3;
  grid-row: 4/5;
}

#homelearnmore {
  grid-column: 3/5;
  grid-row: 4/5;
}

#homeaboutme {
  grid-column: 2/5;
  grid-row: 5/6;
}

#starttargetdiv {
  grid-column: 2/3;
  grid-row: 4/5;
}

#starttargetlist, .startpathlist {
  text-decoration: none;
  list-style-type: none;
  padding: 0;
}

#startusediv {
  grid-column: 2/3;
  grid-row: 3/4;
}

#startpathdiv {
  grid-column: 3/4;
  grid-row: 3/5;
}

#startphilosophydiv {
  grid-column: 4/5;
  grid-row: 3/4;
}

#startaboutdiv {
  grid-column: 4/5;
  grid-row: 4/5;
}

#articlediv {
  grid-column: 2/5;
  grid-row: 3/4;
}

#articletitlediv {
  grid-column: 2/4;
  grid-row: 2/3;
}

#articlemetadiv {
  grid-column: 4/5;
  grid-row: 2/3;
}

@media (max-width: 1000px) {
  body {
    grid-template-columns: auto;
  }
  
  header {
    grid-column: 1/2;
    grid-row: 1/2;
    grid-template-columns: auto;
  }
  
  #tagline {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  
  #navbar {
    grid-column: 1/2;
    grid-row: 3/4;
  }
  
  #topdiv, #articletitlediv {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  
  #recommendedreading, #starttargetdiv, #articlemetadiv {
    grid-column: 1/2;
    grid-row: 3/4;
  }
  
  #latestposts, #startusediv, #articlediv {
    grid-column: 1/2;
    grid-row: 4/5;
  }
  
  #readingpaths, #startpathdiv {
    grid-column: 1/2;
    grid-row: 5/6;
  }
  
  #homelearnmore, #startphilosophydiv {
    grid-column: 1/2;
    grid-row: 6/7;
  }
  
  #homeaboutme, #startaboutdiv {
    grid-column: 1/2;
    grid-row: 7/8;
  }
  
  footer {
    grid-column: 1/2;
  }
}