/**
Variables
**/
:root {
  --color--black: 0, 0, 0;
  --color--blue-light: 88, 199, 234;
  --color--blue-dark: 26, 118, 147;
  --color--pink-light: 255, 106, 169;
  --color--pink-dark: 206, 29, 104;
  --color--very-dark-grey: 34, 34, 34;
  --color--ultra-dark-grey: 18, 18, 18;
  --color--ultra-light-grey: 239, 239, 239;
  --color--white: 255, 255, 255;
  
  /* Synthvibe Colors */
  --color--midnight-blue: 0, 5, 32;
  --color--not-quite-white: 219, 221, 220;
  --color--mid-grey: 103, 103, 103;
  --color--cornflower: 73, 114, 252;
  --color--cyan: 60, 255, 253;
  --color--teal: 11, 255, 213;
  --color--pink: 245, 99, 234;
  --color--neon-pink: 255, 18, 175;
  --color--purple: 180, 66, 254;
  /* End Snythvibe */
  
  /* Synthvibe extensions */
  --color--cornflower-dark: 38, 110, 227;
  --color--deep-night-blue: 0, 0, 11;
  --color--purple-dark: 154, 54, 219;
  /* End Synthvibe extensions */
  
  --body-color--light-mode: var(--color--very-dark-grey);
  --body-color--dark-mode: var(--color--ultra-light-grey);

  --body-bg--light-mode: var(--color--ultra-light-grey);
  --body-bg--dark-mode: var(--color--midnight-blue);
  
  --header-bg: var(--color--ultra-dark-grey);
  --header-color: var(--color--white);
  --header-link: var(--color--pink);
  --header-link-active: var(--color--white);
  
  --link-color--light-mode: var(--color--pink-dark);
  --link-color-active--light-mode: var(--color--blue-dark);
  --link-color--dark-mode: var(--color--pink-light);
  --link-color-active--dark-mode: var(--color--blue-light);
  
  /* Type Styles */
  --type--family--monospace: 'Fira Code', monospace;
}

/**
Type Styles
**/

h1,
h2,
h3 {
  color: rgb(var(--color--purple-dark));
  font-family: var(--type--family--monospace);
}

a { color: rgb(var(--link-color--light-mode)); }
a:active,
a:focus,
a:hover {
  color: rgb(var(--link-color-active--light-mode));
}

[aria-current="page"]::before{
  content: "➤";
  padding-right: 3px;
}

code {
  background: #cacaca;
  border-color: #ababab;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  font-family: var(--type--family--monospace);
  margin: 0 4px;
  padding: 2px 4px;
}

.cursor {
  animation-delay: 1s;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: cursor-blink;
  color: rgb(var(--color--purple-dark));
  font-size: 1.3em;
  opacity: 100%;
}

.prompt {
  color: rgb(var(--color--cornflower-dark));
  margin-right: 5px;
}

@keyframes cursor-blink {
  0% { opacity: 100%; }
  60% { opacity: 100%; }
  80% { opacity: 0%; }
  100% { opacity: 0%; }
}

.underline {
  border-bottom: 1px solid rgb(var(--color--cornflower-dark));
  padding-bottom: 10px;
}

/**
Page Structure
**/
html, body { height: 100%; }
body {
  background: rgb(var(--body-bg--light-mode));
  color: rgb(var(--body-color--light-mode));
  font-family: sans-serif;
  font-size: 18px;
  line-height: 1.6em;
  margin: 0;
}

.grid-wrapper {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
}

header {
  background-color: rgb(var(--color--midnight-blue));
  color: rgb(var(--header-color));
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  padding: 20px;
}

header .site-name {
  font-family: var(--type--family--monospace);
  font-weight: 500;
  grid-column: 1;
}

header nav {
  grid-column: 2 / 3;
}

header nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: right;
}

header nav ul li {
  display: inline;
  margin: 0 0 0 30px;
  padding: 0;
}

header nav ul li a {
  color: rgb(var(--header-link));
  font-family: var(--type--family--monospace);
  font-weight: 500;
  text-decoration: none;
}

header nav ul li a:hover,
header nav ul li a:active,
header nav ul li a:focus {
  color: var(--header-link-active);
}

.wrapper {
  margin-top: 15px;
  padding: 20px;
}

.wrapper.page,
.wrapper.home .content {
  max-width: 800px;
  margin: 15px auto 0;
}

footer {
  font-family: var(--type--family--monospace);
  grid-row: 3;
  margin-top: 100px;
  padding: 20px;
}

/**
Theme Switcher
**/

.toggler {
  position: relative;
  display: inline-block;
  height: 34px;
  width: 60px;
}
.toggler .change-theme {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggler .slider {
  background-color: #aaa;
  border-radius: 2px;
  bottom: 1.1rem;
  content: "";
  cursor: pointer;
  display: block;
  height: 6px;
  left: 1.2rem;
  position: absolute;
  width: 24px;
}

.toggler .slider:before {
  background-color: rgb(var(--color--white));
  border-radius: 7px;
  bottom: -.2rem;
  content: "";
  height: 14px;
  left: 0;
  position: absolute;
  width: 14px;
}

.big-image {
  width: 100%;
}

.to-top {
  display: none;
  visibility: hidden;
}

/**
Now Page Formatting
**/

.wrapper.now {
  margin: 0 auto;
  max-width: 800px;
}

.wrapper.now h1 {
  font-size: 3rem;
}

.wrapper.now h2 {
  font-size: 2rem;
  margin-top: 4rem;
}

.wrapper.now ul.now-grid {
  display: flex;
  flex-wrap: wrap;
/*   display: inline-grid; */
/*   grid-template-columns: repeat(4,minmax(0,1fr)); */
  gap: .7rem;

  margin-left: 0;
  padding: 0;
}

.wrapper.now ul.now-grid li.grid-item {
  flex-basis: 24%;
  list-style: none;
  position: relative;
}

.wrapper.now ul.now-grid li.grid-item .item-link {
  display: block;
  color: rgb(var(--color--white));
  border: 1px solid;
  border-color: rgb(var(--color--neon-pink));
}

.wrapper.now ul.now-grid li.grid-item .item-link:hover {
  color: rgb(var(--color--cyan));
  border-color: rgb(var(--color--cyan));
}

.wrapper.now ul.now-grid li.grid-item .item-image {
  display: block;
  width: 100%;
  z-index: 50;
}

.wrapper.now ul.now-grid li.grid-item .item-meta {
  display: block;
  position: absolute;
  bottom: 1px;
  padding: 10px 0 10px;
  z-index: 100;
  text-shadow: 0px 0px 8px rgb(var(--color--black));
  font-weight: bold;
  width: calc(100% - 2px);
/*   background-color: rgba(0, 0, 0, .6); */
}

.wrapper.now ul.now-grid li.grid-item .item-title {
  font-size: 1rem;
  line-height: 1.2rem;
  display: block;
  padding-bottom: 6px;
  padding-left: 10px;
}

.wrapper.now ul.now-grid li.grid-item .item-author {
  font-size: .8rem;
  display: block;
  line-height: 1rem;
  padding-left: 10px;
}

/**
Dark Mode
**/

@media (prefers-color-scheme: dark) {
  body {
    background: rgb(var(--color--midnight-blue));
/*     background: linear-gradient(0deg,
      rgba(var(--color--black),1) 0%,
      rgba(var(--color--deep-night-blue),1) 20%,
      rgba(var(--color--deep-night-blue),1) 60%,
      rgba(3,12,62,1) 100%
    ); */
    color: rgb(var(--color--not-quite-white));
  }
  
  header,
  footer {
    background: rgb(var(--color--deep-night-blue));
  }

  body a { color: rgb(var(--color--pink)); }
  body a:active,
  body a:focus,
  body a:hover {
    color: rgb(var(--color--teal));
  }
  
  h1,
  h2,
  h3 {
    color: rgb(var(--color--purple));
    text-shadow: 0 0 8px rgba(var(--color--white), .1);
  }

  .prompt {
    color: rgb(var(--color--teal));
  }
  
  .underline {
    border-bottom-color: rgb(var(--color--teal));
  }
  
  code {
    background: rgb(var(--color--deep-night-blue));
    border-color: rgb(var(--color--pink));
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    color: rgb(var(--color--neon-pink));
    padding: 2px 4px;
  }
}

/**
Mobile Devices
**/

@media only screen and (max-device-width: 600px) {
  .to-top {
    display: block;
    visibility: visible;
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1000;
    background-color: rgb(var(--color--purple));
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(var(--color--white), .3);
    width: 26px;
    height: 26px;
    text-align: center;
    vertical-align: middle;
  }
}

/**
Reduced Motion
**/

@media (prefers-reduced-motion) {
  .cursor {
    animation-name: none;
  }
}