@import "./_vars.css";
@import "./_reset.css";

@view-transition {
  navigation: auto;
}

body {
  font-family: monospace;
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
  margin: var(--spacing-small);
  color: var(--color-foreground-main);
  background: var(--color-background-main);
}
@media screen and (min-width: 60rem) {
  body {
    margin: var(--spacing-medium);
  }
}
@media screen and (min-width: 90rem) {
  body {
    margin: var(--spacing-large);
  }
}
@media screen and (max-width: 60rem) {
  * {
    line-break: loose;
  }
  h1, h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
    line-break: strict;
  }
}
body > div {
  display: flex;
  flex-direction: column;
}
  @media screen and (min-width: 70rem) {
    body > div {
      flex-direction: row;
      justify-content: center;
    }
    body > div > .box-sidebar-container:first-of-type {
      /* Render the first `.box-sidebar-container` as the left column. */
      order: -1;
    }
  }

blockquote {
  box-shadow: 0 0 10px lightgrey;
  padding: var(--spacing-big);
  margin-bottom: var(--spacing-big);
}
  blockquote :last-child {
    margin-bottom: 0;
  }

a {
  color: var(--color-foreground-main);
  text-decoration-color: var(--color-foreground-highlight-3rd);
  text-decoration-thickness: 3px;
  transition: box-shadow .3s;
  box-shadow: inset 0 -2px 0 var(--color-foreground-highlight-3rd), 0 2px 0 var(--color-foreground-highlight-3rd);
}
  a:hover {
    text-decoration-color: var(--color-foreground-highlight-3rd);
    box-shadow: inset 0 -30px 0 var(--color-foreground-highlight-3rd), 0 2px 0 var(--color-foreground-highlight-3rd);
  }

/*   formatting code blocks   */
pre {
  padding: var(--spacing-big);
  margin-bottom: var(--spacing-big);
  overflow: auto; /* make the code scrollable if the width is too narrow */
  background-color: var(--color-foreground-highlight-code);
}
code {
  background-color: var(--color-foreground-highlight-code);
}
pre code {
  background-color: transparent;
}
/*code, pre {*/
/*  font-size: 1.1em; !* Use `em` to make all <code> relative to the element that it contains, e.g. an H1. *!*/
/*}*/

p,
article :not(li) > ul,
article :not(li) > ol { /* The `:not(li) > ` prefix prevents nested lists to have a margin on the sub-levels */
  margin-bottom: var(--spacing-large);
  text-align: justify;
}
ul, ol {
  margin-left: var(--spacing-large);
}



h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
{
  margin-bottom: var(--spacing-small);
  text-decoration: none;
}
  h1 code, h2 code, h3 code, h4 code, h5 code {
    background-color: var(--color-foreground-highlight-4th);
  }
h1 {
  font-size: var(--font-size-larger);
}

@media screen and (max-width: 60rem) {
  h1, h2, h3, h4, h5, h6 {
    text-align: center;
  }
}

body > header a {
  text-decoration: none;
}
body > header a:hover {
  color: var(--color-foreground-highlight)
}

nav.breadcrumb {
  display: flex;
}
  nav.breadcrumb li {
    display: inline-block;
  }
  nav.breadcrumb li:first-child {
    margin-left: 0;
  }
  @media screen and (min-width: 60rem) {
    nav.breadcrumb {
      margin: var(--spacing-medium);
    }
  }

/*   styling images    */
img.sizeup-onhover-image {
  transition: 0.2s linear;
  transition-delay: 0.5s;
}
  img.sizeup-onhover-image:hover {
    box-shadow: 0.3em 0.3em 1em rgba(0, 0, 0, 0.2);
  }
  img.sizeup-onhover-image.scale2:hover {
    transform: scale(2);
  }
  img.sizeup-onhover-image.scale4:hover {
    transform: scale(4);
  }
  img.sizeup-onhover-image.origin-left-top:hover {
    transform-origin: left top;
  }
  img.sizeup-onhover-image.origin-left-center:hover {
    transform-origin: left center;
  }
  img.sizeup-onhover-image.origin-right-top:hover {
    transform-origin: right top;
  }
@media screen and (max-width: 60rem) {
  img {
    max-width: 90%;
  }
}

figure {
  margin-bottom: var(--spacing-big);
  margin-right: var(--spacing-big);
  padding: var(--spacing-big);
  border: 1px solid var(--color-foreground-highlight-3rd);
  display: inline-block;
}
  figure.float-right {
    float: right;
  }
@media screen and (max-width: 60rem) {
  figure.float-right {
    float: none;
  }
}
figcaption {
  font-style: italic;
}

td {
  padding: 0.5rem;
  background-color: lightgrey;
}

.metadata {
  color: var(--color-secondary);
  margin-bottom: var(--spacing-small);
}

footer {
  padding: var(--spacing-larger);
  border-top: 1px solid var(--color-foreground-highlight-3rd);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  /*
     The negative margin, is basically just removing the body's margin
     so we can place the entire <header> at the very top and give it a different bgcolor.
     1) It prevents to wrap all the page in a div just to do that
     2) (Hopefully) makes the entire HTML simpler
     3) Downside: It MUST stay in sync with the body's margin.
     Better ideas welcome ;).
  */
  margin: calc(-1 * var(--spacing-larger));
  margin-top: var(--spacing-larger);
  background-color: var(--color-background-inverse);
}
  @media screen and (max-width: 60rem) {
    footer {
      flex-direction: column;
      align-items: center;
    }
    footer div {
      text-align: center;
    }
  }
  footer * {
    color: var(--color-foreground-inverse);
    font-size: var(--font-size-medium);
  }
  footer div {
    margin-top: var(--spacing-larger);
  }
  footer ul {
    margin: 0;
    padding: 0;
    display: block;
  }
  footer li {
    list-style: none;
    margin: 0;
  }

kbd {
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  padding: 0.1rem var(--spacing-small);
  white-space: nowrap;
}

/*   twitter styling    */

blockquote.twitter-tweet {
  font-weight: bold;
  display: inline-block;
  box-shadow: 0 0 10px lightgrey;
}
  blockquote.twitter-tweet p {
    font-weight: normal;
  }
  blockquote.twitter-tweet a {
    font-weight: normal;
  }
  blockquote.twitter-tweet a:hover,
  blockquote.twitter-tweet a:focus {
    text-decoration: underline;
  }

/*    sidebar styling, incl. responsiveness    */

.box-sidebar-container {
  flex: 0 1 30rem;
}
.box-main-content,
.box-sidebar {
  box-shadow: none;
  padding: var(--spacing-medium);
  margin: var(--spacing-medium);
  overflow: hidden;
}
.box-sidebar {
  background-image: linear-gradient(121deg, var(--color-background-main) 80%, var(--color-foreground-highlight-4th));
  flex-direction: column;
}
@media screen and (min-width: 60rem) {
    .box-main-content {
      padding: var(--spacing-larger);
      padding-top: 0;
    }
    .box-sidebar {
      padding: var(--spacing-large);
      border: 1px solid var(--color-foreground-highlight-3rd);
    }
  }
  @media screen and (min-width: 90rem) {
    .box-main-content,
    .box-sidebar {
    }
    .box-sidebar {
      display: flex; /* Replace display:none */
    }
  }
.box-sidebar .huge-link-as-button {
  display: inline-block;
  width: fit-content;
  text-align: center;
  font-weight: bold;
  font-size: var(--font-size-large);
  background: var(--color-foreground-highlight-2nd);
  text-decoration: none;
  padding: var(--spacing-medium);
  border-radius: var(--distance-small);
  border: 2px outset var(--color-foreground-highlight);
}
.box-sidebar .huge-link-as-button:hover {
  cursor: pointer;
  color: var(--color-foreground-inverse);
  background-color: var(--color-foreground-highlight);
  transition: background-color 0.5s;
  box-shadow: 0 0 20px 5px var(--color-foreground-highlight-3rd);
}


/*     the main content box    */

main {
  flex: 0 0 var(--readable-max-width);

  /* move the footer always to the lower part of the screen */
  min-height: 60vh;

  /*min-width: 60%; !* Make sure this column gets at least a major amount of the available width! *!*/

  /* Needed for the pre's overflow:auto to work and make the code boxes scrollable when they are too wide.
    learned it at https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size */
  min-width: 0;
}
  main > h1 {
    text-align: center;
    margin-top: 0;
  }

  @media screen and (max-width: 60rem) {
    main {
      box-shadow: none;
      padding: var(--spacing-medium);
      min-height: auto;
    }
  }



/** various little helper classes, that can just be applied **/
.fade-in-slow {
  animation: fadeIn 5s;
  -webkit-animation: fadeIn 5s;
  -moz-animation: fadeIn 5s;
  -o-animation: fadeIn 5s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}