/* ==-IMPORT FONT-======= */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap");

/* ====================== */
/* ==-VARIABLES-========= */
/* ====================== */

:root {
  /* ==-BACKGROUND COLOR-== */
  --background-color: #eeeeee;
  --content-background-color: #ffffff;
  --aside-background-color: #ffffff;
  --box-shadow-color: #00a4bd;

  /* ==-TEXT COLOR-======== */
  --text-color: #000000;
  --aside-text-color: #000000;
  --link-color: rgb(0, 125, 73);
  --link-color-hover: #0c3d11;

  /* ==-FONT-============== */
  --font: "Atkinson Hyperlegible", Verdana, sans-serif;
  --heading-font: "Atkinson Hyperlegible", Verdana, sans-serif;
  --mono-font: "Atkinson Hyperlegible Mono", Lucida, sans-serif;
  --font-size: 15px;

  /* ==-SIZING-============= */
  --margin: 5px;
  --padding: 30px;
  --border: 5px black;
  --round-borders: 0px;
  --aside-width: 160px;
  --main-width: 500px;
}

/* ====================== */
/* ==-BODY STRUCTURE-==== */
/* ====================== */

* {
  box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    min-height: 100vh;
    margin: 0px;
    line-height: 1.2;
    color: var(--text-color);
    font-family: var(--font);
    font-size: var(--font-size);
    background-image: url(./decor/backgrounds/Muchtranquilitylater.webp);
    background-repeat: no-repeat;
    background-size: cover;
    flex-direction: column;
}

/* ==-QUOTE BLOCK-======= */

#quote {
  color: var(--text-color);
  padding: 20px;
  border-radius: 33px 33px 33px 0px;
  font-family: var(--font);
  text-align: justify;
  background: #b3ffb3;
  box-shadow: 6px 5px rgba(0, 255, 149, 1);
  margin: var(--margin);
  margin-bottom: 1.5em;
}


/* ====================== */
/* ==-MAIN GRID-========= */
/* ====================== */

.grid {
  width: 1300px;
  display: grid;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
  grid-template:
    "header header" auto
    "leftaside main" auto
    "footer footer" auto
    / var(--aside-width) auto var(--aside-width) auto;
  grid-template-columns: 1fr 5fr;
}

main {
  height: auto;
  grid-area: main;
  padding: var(--padding);
  background: var(--content-background-color);
  border: var(--border);
  text-align: justify;
}

/* ====================== */
/* ==-HEADER-============ */
/* ====================== */

header {
  grid-area: header;
  font-size: var(--font-size);
  height: 100px;
  margin: 1% 0% 0% 0%;
  padding: 1%;
  border: solid;
  border-width: 1px 1px 0px 1px;
  border-radius: 30px 30px 0px 0px;
  background: #94ff94;
  background: linear-gradient(
    180deg,
    rgba(148, 255, 148, 1) 25%,
    rgba(0, 255, 149, 1) 22%
  );
}

.headerimg {
  width: 100%;
  height: auto;
}

.header-title {
  font-size: 2em;
  font-weight: bold;
  font-family: var(--heading-font);
}

.header-p {
  padding: var(--padding);
}

/* ====================== */
/* ==-SIDEBAR-=========== */
/* ====================== */

aside {
  grid-area: aside;
  padding: 20px;
  border: var(--border);
  background: var(--aside-background-color);
  color: var(--aside-text-color);
  text-align: left;
  overflow: hidden;
}

.leftaside {
  display: block;
  grid-area: leftaside;
 border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: black;
  padding: 0px;
}

.rightaside {
  grid-area: rightaside;
}

.aside-p {
  margin-bottom: 1.5em;
  padding-left: 0.1em;
}

.aside-title {
  font-size: 1.2em;
  font-weight: bold;
  font-family: var(--heading-font);
}

.leftaside-nav {
  width: auto;
  height: auto;
  padding: 1px 0px 1px 10px;
  border-style: solid;
  border-width: 1px 0px 1px 0px;
  border-color: black;
  background-color: white;
  margin-bottom: 10px;
}

.leftaside-header {
  height: auto;
  padding: 10px 0px 10px 10px;
  border: 1px;
  border-style: solid;
  border-color: black;
  border-width: 1px 0px 0px 0px;
  color: #09331f;
  background: #94ff94;
  background: linear-gradient(
    180deg,
    rgba(148, 255, 148, 1) 25%,
    rgba(0, 255, 149, 1) 22%
  );
}

/* ==-NAV-============== */

.aside-p ul,
.aside-p ol {
  padding-left: 0.2em;
}

/* ====================== */
/* ==-FOOTER-============ */
/* ====================== */

footer {
  grid-area: footer;
  height: 100px;
  margin: 0% 0% 1% 0%;
  padding: 1%;
  border: solid;
  border-width: 0px 1px 1px 1px;
  border-radius: 0px 0px 30px 30px;
  font-size: var(--font-size);
  font-family: var(--heading-font);
  text-align: center;
  background: #94ff94;
  background: linear-gradient(
    180deg,
    rgba(148, 255, 148, 1) 25%,
    rgba(0, 255, 149, 1) 22%
  );
}

.footer-p {
  padding: 5px;
}

/* ====================== */
/* ==-STYLING-=========== */
/* ====================== */

/* Forward */
.hvr-forward {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-forward:hover,
.hvr-forward:focus,
.hvr-forward:active {
  -webkit-transform: translateX(8px);
  transform: translateX(8px);
}

/* Wobble Horizontal */
@-webkit-keyframes hvr-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes hvr-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

hr.secret {
  border: 2px solid transparent;
}

div.wrap {
  padding: 0 25px 0 0;
  gap: 15px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-around;
}

div.block {
  vertical-align: middle;
  gap: 25px;
  padding: 0 15px;
}


/* ==-BORDER DECO-======= */

#contentblock {
  border: solid;
  border-width: 1px;
}

/* ==-TEXT STUFF-======== */

mark {
  text-shadow: 1px 1px 4px var(--link-color);
  background-color: inherit;
  color: var(--text-color);
}

.scrollbox {
  border: 5px double var(--background-color);
  padding: 15px;
  margin-top: 20px;
  width: 100%;
  height: 100px;
  overflow-y: auto;
  box-shadow: 0 1px 5px var(--background-color);
  resize: vertical;
}

/* ==-MAIN HEADINGS-===== */

main h1 {
  font-size: 1.8em;
}

main h2 {
  font-size: 1.5em;
}

main h3 {
  font-size: 1.4em;
}

main h4 {
  font-size: 1.3em;
}

main h5 {
  font-size: 1.2em;
}

main h6 {
  font-size: 1.1em;
}

/* ==-NAV-============== */

nav {
  margin-bottom: 5px;
}

nav ul {
  margin: 0 5px;
  padding: 0;
  list-style: none;
}

/* ==-LINKS-============= */

a {
text-decoration-style: solid;
}

a,
a:visited {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-color-hover);
}

::selection {
  background: rgba(0, 0, 0, 0.2);
}

/* ==-IMAGES-============ */

.image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

.image-fw {
  display: block;
  width: 100%;
  height: auto;
}

/* ====================== */
/* ==-RESPONSIVE-======== */
/* ====================== */

@media (max-width: 800px) {
  body {
    font-size: 14px;
  }

  .grid {
    width: 100%;
    grid-template: "header" auto "main" auto "leftaside" auto "rightaside" auto "footer" auto;
  }

  main {
    max-height: none;
    width: 100%;
    padding: 50px;
  }

  .aside {
    padding: var(--padding);
  }

  .leftaside {
    width: 100%;
  }
}