/* ==-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;
  justify-content: center;
  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/boatingbuddies.webp");
  background-repeat: no-repeat;
  background-size: cover;
}

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

#quote {
  color: var(--text-color);
  border: 20px solid var(--background-color);
  border-radius: 7px;
  font-family: var(--font);
  text-align: justify;
  background: var(--background-color);
  box-shadow: 6px 5px var(--box-shadow-color);
  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 header" auto
    "leftaside main rightaside" auto
    "footer footer footer" auto
    / var(--aside-width) auto var(--aside-width) auto;
  grid-template-columns: 1fr 5fr 1fr;
}

main {
  grid-area: main;
  padding: var(--padding);
  background: white;
  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 {
  position: relative;
  padding-left: 1080px;
  left: 0;
  top: -90px;
  margin-bottom: -90px;
}

.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 {
  grid-area: leftaside;
  background-color: transparent;
  width: 200px;
  padding: 0px;
}

.rightaside {
  grid-area: rightaside;
  border-style: solid;
  border-width: 1px 1px 1px 0px;
}

.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;
  border-radius: 20px 0px 0px 0px;
  border-color: black;
  background-color: white;
}

.leftaside-header {
  height: auto;
  padding: 10px 0px 10px 10px;
  border: 1px;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  border-radius: 20px 0px 0px 0px;
  color: #09331f;
  font-weight: bold;
  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 Vertical */
@-webkit-keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.hvr-wobble-vertical {
  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);
}
.hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active {
  -webkit-animation-name: hvr-wobble-vertical;
  animation-name: hvr-wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* 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);
  }
}
.hvr-wobble-horizontal {
  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);
}
.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
  -webkit-animation-name: hvr-wobble-horizontal;
  animation-name: hvr-wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}





/* ==-THE BLOCK-======= */

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



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

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

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

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

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

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

#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 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-============ */

.imageR {
  display: inline-block;
  max-width: 100%;
}

.imageL {
  display: block;
  float: left;
  max-width: 100%;
  padding-right: 40px;
}

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

.static {
  position: absolute;
  background: white;
  float: right;
}

.static:hover {
  opacity: 0;
  float: right;
}

/* ====================== */
/* ==-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;
    padding: 15px;
  }

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

  .leftaside {
    width: 100%;
  }

  .headerimg {
    position: static;
    padding-left: 0px;
    left: 0;
    top: -90px;
    margin-bottom: -90px;
  }
}