/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Source: https://www.dafont.com/ */
@font-face {
  font-family: Winkle;
  src: url(assets/fonts/Winkle.ttf);
}
@font-face {
  font-family: KiwiSoda; /* set name */
  src: url(assets/fonts/KiwiSoda.ttf);
}
@font-face {
  font-family: GrapeSoda;
  src: url(assets/fonts/GrapeSoda.ttf);
}
@font-face {
  font-family: OwreKynge;
  src: url(assets/fonts/OwreKynge.ttf);
}
@font-face {
  font-family: Wavetosh;
  src: url(assets/fonts/Wavetosh.ttf);
}
@font-face {
  font-family: Chomsky;
  src: url(assets/fonts/Chomsky.otf);
}
@font-face {
  font-family: Inconsolata;
  src: url(assets/fonts/Inconsolata.ttf);
}
@font-face {
  font-family: Pixolide;
  src: url(assets/fonts/Pixolde.ttf);
}
@font-face {
  font-family: RainyHearts;
  src: url(assets/fonts/RainyHearts.ttf);
}
@font-face {
  font-family: Gotfridus;
  src: url(assets/fonts/Gotfridus.ttf);
}
@font-face {
  font-family: Antiquity;
  src: url(assets/fonts/Antiquity.ttf);
}

/* USED FONTS: */
@font-face {
  font-family: TypeRight;
  src: url(assets/fonts/TypeRight.ttf);
}
@font-face {
  font-family: Darinia;
  src: url(assets/fonts/Darinia.ttf);
}
@font-face {
  font-family: Pixolde;
  src: url(assets/fonts/Pixolde.ttf);
}
@font-face {
  font-family: PermanentMarker;
  src: url(assets/fonts/PermanentMarker.ttf);
}

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

/* Variables are used like this: var(--text-color) */
:root {
  /* Background Colors: */
  --background-color: #023047;
  --content-background-color: #8ecae6;
  --sidebar-background-color: #219ebc;

  /* Text Colors: */
  --text-color: black;
  --heading-title-color: #fb8500;
  --sidebar-text-color: #ffb703;
  --section-element-title-color: #fb8500;
  --link-color: #ffb703;
  --link-color-hover: #219ebc;

  /* Text: */
  --font: RainyHearts, sans-serif;
  --heading-font: Darinia, monospace;
  --heading-title-font: Darinia, serif;
  --heading-subtitle-font: TypeRight;
  --code-font: Inconsolata;
  --font-size: 16px;

  /* Section Element: */
  --section-element-background-image: url("assets/style/lined-paper.jpg");
  --section-element-backgroung-size: 30% 30%;

  /* Other Settings: */
  --margin: 10px;
  --padding: 20px;
  --border: 3px solid rgba(1, 1, 1, 0.5);
  --round-borders: 5px;
  --sidebar-width: 200px;
  --heading-rotation: -1.2deg;
  --global-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  font-size: var(--font-size);
  margin: 0;
  padding: var(--margin);
  color: var(--text-color);
  font-family: var(--font);
  line-height: 1.2;
  background: var(--background-color);
  background-image: url("");
}

::selection {
  /* (Text highlighted by the user) */
  background: rgba(0, 0, 0, 0.2);
  color: #ff5100;
}

mark {
  /* Text highlighted by using the <mark> element */
  text-shadow: 1px 1px 4px var(--link-color);
  background-color: inherit;
  color: var(--text-color);
}

/* Links: */
a {
  text-decoration: underline;
}

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

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

code {
  font-family: var(--code-font), serif;
}

/* -------------------------------------------------------- */
/* CUSTOM ELEMENTS */
/* -------------------------------------------------------- */

.postit {
  color: var(--text-color);
  text-align: center;
  background-color: white;
  background-image: url("assets/style/lined-paper.jpg");
  background-repeat: repeat;
  background-size: 100px;
  transform: rotate(1deg);
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

/* Need further working: */

/* Insert this to see: 
  <div class="tape">
    <img
      src="assets/style/tape.png"
      draggable="false"
      (dragstart)="false;"
    />
  </div>
*/

.tape {
  width: 100%;
  height: 100%;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  top: -25px;
  transform: rotate(-0.5deg);
}

.tape img {
  width: 30%;
  height: auto;
  object-position: center;
}

/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */

.layout {
  width: 1000px;
  display: grid;
  grid-gap: var(--margin);
  grid-template:
    "header header header" auto "leftSidebar main rightSidebar" auto "footer footer footer" auto
    / var(--sidebar-width) auto var(--sidebar-width);
  /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}

main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--padding);
  background: var(--content-background-color);
  border: var(--border);
  border-style: solid;
  border-radius: var(--round-borders);
  box-shadow: var(--global-shadow);
}

.section-container {
  display: flex;
  flex-direction: column;
}

.section-element {
  display: block;
  padding: var(--padding);
  margin: var(--margin);
  border-width: 0px;
  border-style: solid;
  border-radius: 10px;
  background-color: #c98e57;
  background-image: var(--section-element-background-image);
  background-size: var(--section-element-backgroung-size);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

.section-element h1,
h2,
h3,
h4,
h5 {
  color: var(--section-element-title-color);
}

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

header {
  grid-area: header;
  font-size: 2em;
  /* border: var(--border);
  border-radius: var(--round-borders); */
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--round-borders);
  box-shadow: var(--global-shadow);
}

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

.header-title {
  color: var(--heading-title-color);
  font-family: var(--heading-title-font);
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  text-shadow: 0px 0px 15px rgb(255, 255, 255, 0.3);
}

.header-subtitle {
  color: var(--heading-title-color);
  font-family: var(--heading-subtitle-font);
  font-size: 1.5em;
  font-style: italic;
  text-align: center;
}

.header-image img {
  width: 100%;
  height: auto;
}

/* -------------------------------------------------------- */
/* SIDEBARS */
/* -------------------------------------------------------- */

aside {
  grid-area: aside;
  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  background: var(--sidebar-background-color);
  padding: var(--padding);
  color: var(--sidebar-text-color);
  box-shadow: var(--global-shadow);
}

.left-sidebar {
  grid-area: leftSidebar;
}

.right-sidebar {
  grid-area: rightSidebar;
}

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

.sidebar-section:not(:last-child) {
  margin-bottom: 3em;
}

.sidebar-section ul,
.sidebar-section ol {
  padding-left: 1.5em;
}

.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
  margin-top: 10px;
}

/* Sidebar Blockquote: */

.sidebar-section blockquote {
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
  overflow: hidden;
}

.sidebar-section blockquote > *:first-child {
  margin-top: 0;
}

.sidebar-section blockquote > *:last-child {
  margin-bottom: 0;
}

/* Site Button: */

.site-button {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-button textarea {
  font-family: monospace;
  font-size: 0.7em;
}

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

footer {
  grid-area: footer;
  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  font-size: 0.75em;
  padding: 15px;
  background: var(--content-background-color);
  display: flex;
  justify-content: center;
}

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

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

/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */

nav {
  margin-bottom: 2em;
}

nav .sidebar-title {
  margin-bottom: 0.5em;
}

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

nav ul li {
  margin-bottom: 0;
}

nav > ul li > a,
nav > ul li > strong {
  display: inline-block;
}

nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
  padding: 5px 10px;
}

nav > ul li > a.active,
nav > ul li > details.active summary {
  font-weight: bold;
}

nav ul summary {
  cursor: pointer;
}

nav ul ul li > a {
  padding-left: 30px;
}

/* -------------------------------------------------------- */
/* CONTENT */
/* -------------------------------------------------------- */

main {
  line-height: 1.5;
}

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

main a:hover,
main a:focus {
  color: var(--link-color-hover);
  text-decoration-style: wavy;
}

main p,
main .image,
main .full-width-image,
main .two-columns {
  margin: 0.75em 0;
}

main ol,
main ul {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

main ol li,
main ul li {
  margin-bottom: 0.2em;
  line-height: 1.3;
}

main ol {
  padding-left: 2em;
}

main blockquote {
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
}

main pre {
  margin: 1em 0 1.5em;
}

main code {
  text-transform: none;
}

main center {
  margin: 1em 0;
  padding: 0 1em;
}

main hr {
  border: 0;
  border-top: var(--border);
  margin: 1.5em 0;
}

/* HEADINGS: */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  font-family: var(--heading-font);
  margin-bottom: 0;
  line-height: 1.5;
  transform: rotate(var(--heading-rotation));
  text-shadow: 0px 0px 3px rgb(0, 0, 0, 0.4);
}

main h1:first-child,
main h2:first-child,
main h3:first-child,
main h4:first-child,
main h5:first-child,
main h6:first-child {
  margin-top: 0;
}

main h1 {
  font-size: 1.5em;
}

main h2 {
  font-size: 1.4em;
}

main h3 {
  font-size: 1.3em;
}

main h4 {
  font-size: 1.2em;
}

main h5 {
  font-size: 1.1em;
}

main h6 {
  font-size: 1em;
}

/* COLUMNS: */

.two-columns {
  display: flex;
}

.two-columns > * {
  flex: 1 1 0;
  margin: 0;
}

.two-columns > *:first-child {
  padding-right: 0.75em;
}

.two-columns > *:last-child {
  padding-left: 0.75em;
}

/* DESIGN ELEMENTS: */

.horizontal-line {
  width: 1;
  height: 2px;
  border-top: 2px dashed white;
}

/* -------------------------------------------------------- */
/* CONTENT IMAGES */
/* -------------------------------------------------------- */

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

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

.images {
  display: flex;
  width: calc(100% + 5px + 5px);
  margin-left: -5px;
  margin-right: -5px;
}

.images img {
  width: 100%;
  height: auto;
  padding: 5px;
  margin: 0;
  overflow: hidden;
}

/* -------------------------------------------------------- */
/* ACCESSIBILITY */
/* -------------------------------------------------------- */

/* please do not remove this. */

#skip-to-content-link {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 0.375rem 0.75rem;
  line-height: 1;
  font-size: 1.25rem;
  background-color: var(--content-background-color);
  color: var(--text-color);
  transform: translateY(-3rem);
  transition: transform 0.1s ease-in;
  z-index: 99999999999;
}

#skip-to-content-link:focus,
#skip-to-content-link:focus-within {
  transform: translateY(0);
}

/* -------------------------------------------------------- */
/* MOBILE RESPONSIVE */
/* -------------------------------------------------------- */

/* CSS Code for devices < 800px */
@media (max-width: 800px) {
  body {
    font-size: 14px;
  }

  .layout {
    width: 100%;
    grid-template: "header" auto "main" auto "leftSidebar" auto "footer" auto / 1fr;
    /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
  }

  .right-sidebar {
    display: none;
  }

  aside {
    border-bottom: 1px solid;
    padding: 9px;
    font-size: 0.9em;
  }

  nav {
    padding: 0;
  }

  nav > ul {
    padding-top: 0.5em;
  }

  nav > ul li > a,
  nav > ul li > details summary,
  nav > ul li > strong {
    padding: 0.5em;
  }

  main {
    max-height: none;
    padding: 15px;
  }

  .images {
    flex-wrap: wrap;
  }

  .images img {
    width: 100%;
  }

  #skip-to-content-link {
    font-size: 1rem;
  }
}