/* universal */
* {
  box-sizing: border-box;
  background-color: thistle;
  margin: 0;
}

/* grid setup */
.container {
  display: grid;
  grid-gap: 25px;
  grid-template:
    "header header header header" 15vh
    "left main main right" 40vh
    "left main main logo" 30vh
    "footer footer footer footer" 5vh
    / 15vw 1fr 1fr 20vw;
}

/*layout*/
header {
  grid-area: header;
  margin: 10px 0px;
}

.leftsidebar {
  grid-area: left;
  padding: 20px;
}

.rightsidebar {
  grid-area: right;
  padding: 0px 20px 0px 0px;
  overflow-y: scroll;
}

.logo {
  grid-area: logo;
  margin: auto;
}

main {
  grid-area: main;
  padding: 10px 100px;
  overflow-y: scroll;
}

footer {
  grid-area: footer;
  padding: 0px 20px;
  display: flex;
  justify-content: space-between;
}

/*type and appearance*/
.rebworld,
.rebworld a {
  font-family: "Pirata One", monospace;
  font-size: 1.2em;
  text-decoration: none;
  color: black;
  text-align: center;
}

nav,
nav a {
  font-family: "libre Franklin", sans-serif;
  font-weight: 650;
  line-height: 20px;
  color: black;
  text-decoration: none;
}

nav a:hover {
  background-color: black;
  color: thistle;
  padding: 2px;
}


.minipost h2 {
  font-size: 0.65em;
  font-family: "Space Grotesk", monospace;
  font-weight: 300;
  text-align: end;
  padding: 0px 5px;
  line-height: 20px;
  margin: 0px 0px 10px 0px;
}

.minipost p {
  font-family: monospace;
  font-size: 10px;
  font-weight: 50;
  padding: 10px;
  border-style: dotted;
  border-color: dimgray;
  border-width: 2px;
}

article {
  margin: 0px 0px 50px 0px;
}

article h2 {
  font-family: "Pirata One", monospace;
  color: thistle;
  background-color: black;
  padding: 5px;
  margin-bottom: 10px;
}

article h3 {
  font-family: "Pirata One", monospace;
  text-decoration: underline;
  font-size: 24px;
}

article h6 {
  font-family: monospace;
  font-size: 10px;
  font-weight: 200;
  font-style: italic;
  margin: 5px 0px;
}

article p {
  font-family: "libre Franklin", sans-serif;
  font-size: 14px;
  margin: 10px 0px;
  font-weight: 400;
}

article a {
  color: black;
  padding: 2px;
  font-weight: 500;
}

article a:hover {
  background-color: lavender;
  color: black;
  padding: 2px;
}

.logo img {
  width: auto;
  height: 190px;
  object-fit: cover;
}

footer a {
  font-family: monospace;
  font-size: 11px;
  font-weight: 200;
  color: black;
  margin: 10px;
}

footer a:hover {
  background-color: lavender;
}

footer p {
  font-family: monospace;
  font-size: 10px;
  font-weight: 100;
  margin: 10px;
}

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

/* Track */
::-webkit-scrollbar-track {
  background: lightgray;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: black;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: slategray;
}

/*mobile responsiveness*/
@media (max-width: 900px) {
  .container {
    grid-template:
      "header"
      "left"
      "main"
      "logo"
      "footer";
    grid-gap: 10px;
  }

  .leftsidebar {
    grid-area: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  /*change to leftsidebar a when linked */
  .leftsidebar p,
  .leftsidebar a {
    margin: 0px 10px;
  }

  main {
    grid-area: main;
    padding: 0px 25px;
    overflow-y: hidden;
  }

  .rightsidebar {
    display: none;
  }

  .logo {
    grid-area: logo;
    margin: 0 auto;
  }

  footer {
    grid-area: footer;
    justify-content: center;
  }
}