@font-face {
  font-family: ThirdStreet;
  font-style: normal;
  font-weight: 900;
  src: url(/fonts/ThirdStreetBold-Latin.woff2) format("woff2");
}

:root {
  --color-bg: #030303;
  --color-primary: #f5eee4;
  --color-secondary: #161616;
  --color-socials: #8ad1f1;
  --color-borders: #202020;
  --color-gradient-1: #3fc9ff;
  --color-gradient-2: #7a1c50;
  --color-gradient-3: #e79f31;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-primary);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}

/* FOR OPTIONAL SHORTCODE ALIGNMENT ON LONG CONTENT POSTS*/
.post-left {
    text-align: left;
}

svg {
  pointer-events: none;
}

a {
  text-decoration: none;
  color: red;
}

a:visited { color: red; }

p {
  margin: 0;
}

/* ul li { color: red; }*/

h1 h2 article p {
  pointer-events: none;
}

.centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.section {

  /* GOOD FOR MOBILE AND WEB: 200vh */
  /* 100% -- crowds main page on mobile */
  height: 100vh;
  /*height: 100vh; /* ORIGINAL*/
  /*height: auto; /* ORIGINAL*/
  display: flex; /*ORIGINAL */
  /* display: inline-flex; /* justifies right and still has overlap issue */
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /*   this can have some space but its a little off...
  padding-bottom: 100px;
  padding-top: 100px;
  **/
}

.section-container {
  /*width: 150vw; **/
  width: 50vw; /**/
  /* padding here makes the main splash too close to the about/home 
  padding-bottom: 100px;
  padding-top: 100px;
  */
}

.section-header {
  font-family: ThirdStreet;
  font-weight: 100;
  font-size: 2.5em;
  background: linear-gradient(
    to right,
    var(--color-socials),
    var(--color-primary),
    var(--color-primary)
  );
  background-size: 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 6px var(--color-socials);
  text-transform: uppercase;
  text-decoration: none;
  padding: 0;
  margin: 0 0 1em 0;
  width: 100%;
}

.section-article {
  font-weight: 600;
  font-size: 1.2em;
  width: 100%;
  padding: 0;
  margin: 0;
  /* this didn't seem to have any effect... */
  /*box-sizing: border-box; /**/
}

#sidenav * {
  padding: 0;
}

#sidenav {
  position: fixed;
  left: auto;
  height: 94vh;
  width: 7vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#logo-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 1;
}

#page-logo {
  height: 3em;
  aspect-ratio: 1;
  margin: 0;
  filter: drop-shadow(0 0 2px var(--color-primary)) invert(75%) sepia(28%)
    saturate(526%) hue-rotate(167deg) brightness(200%) contrast(93%);
}

#navlinks {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 2;
  width: 100%;
}

#navlinks a {
  flex-direction: row;
  display: flex;
  justify-content: center;
}

.sidenav-button {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: var(--color-primary);
  will-change: opacity;
  opacity: 0.3;
  margin: 0.7em 0;
}

.active-menu {
  opacity: 0.8;
}

.glowing-title {
  font-family: ThirdStreet;
  font-size: 6em;
  background: linear-gradient(
    to right,
    var(--color-gradient-1),
    var(--color-gradient-2),
    var(--color-gradient-3),
    var(--color-gradient-1)
  );
  background-size: 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 0 6px var(--color-primary);
  margin: 0;
  padding: 0;
}

.social-icon {
  color: var(--color-primary);
  height: 2em;
  opacity: 0.6;
  transition: all 0.8s ease;
}

#socials-container {
  display: flex;
  flex-direction: row;
  margin-top: 2em;
  gap: 1.5em;
}

#socials-container a:hover > .social-icon {
  opacity: 1;
  color: var(--color-socials);
}

.scrolling-container {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  grid-auto-rows: 1fr;
  overscroll-behavior-inline: contain;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
}

.scrolling-container > a {
  height: 100%;
}

.snaps-inline {
  scroll-snap-type: inline mandatory;
}

.snaps-inline > * {
  scroll-snap-align: start;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-secondary);
  border-radius: 12px;
  padding: 2em;
  margin-bottom: 2em;
}

.card h2 {
  padding: 0 0 0.5em 0;
  margin: 0;
  font-family: ThirdStreet;
  color: var(--color-socials);
  font-size: 1.5em;
  word-wrap: break-word;
}

.card article {
  color: var(--color-primary);
  padding: 0;
  margin: 0;
  font-size: 1em;
  font-weight: 700;
}

@media screen and (orientation: portrait) {
  body {
    margin: 1em;
    overflow-x: hidden;
  }
  .post-left {
    text-align: left;
  }

  .glowing-title {
    width: 60vw;
    word-wrap: break-word;
    font-size: 3em;
    text-orientation: upright;
  }

  #sidenav {
    margin: 0.5em;
  }
  .section {
    /* adjusting height here butchers front page... don't do it...*/
    /* overflow-y: auto; /* */
  }

  .section-container {
    /* adjusting height here has no effect for long posts... don't mess with it */
    width: 60vw; /**/
    min-width: 0;
    min-height: 0;
    /*overflow-y: auto; /* */
    /* MIXED RESULTS WITH THIS...*/
    /* height: auto */
    /*width: 80%; **/
  }
  .section-article {
    /* adjusting height here has no effect for long posts... don't mess with it */
    /* /*GOOD SIZE FOR MOBILE /**/
    /*font-size: 0.75em; /**/
    font-size: 12px;
    min-width: 0;
    min-heght: 0;
    /*height: auto; /**/
    overflow-y: auto;/**/
  }

  .section-header {
    font-size: min(2em, 10vw);
    min-width: 0;
  }

  #socials-container {
    display: inline-block;
    /*box-sizing: border-box; /**/
  }

  #socials-container a {
    margin-right: 0.6em;
  }

  .social-icon {
    margin-top: 0.8em;
  }
}