:root {
  --base-color: #fcfbfa;
  --base-variant: #070605;
  --text-color: #070605;
  --highlight-text: rgb(0, 0, 255);
  --shadow-color: #29292b;
  --accent-color: rgb(0, 255, 0);
}

.darkmode {
  --base-color: #070605;
  --base-variant: #fcfbfa;
  --text-color: rgb(255, 255, 255);
  --highlight-text: rgb(21, 0, 255);
  --shadow-color: rgb(220, 220, 226);
  --accent-color: rgb(255, 255, 0);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: var(--base-color);
  hyphens: auto;
  height: 100%;
  margin: 0; 
  padding: 10.5px;
}

body {
  background-color: var(--base-color);
  color: var(--text-color);
  width: 100%;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  /* font-family: 'Courier New', Courier, monospace; */
  font-size: 100%;
  border: 3px dotted var(--base-variant);
}

@font-face {
  font-family: terminal;
  src: url(./assets/fonts/terminal-grotesque.ttf);
}

footer {
  font-family: terminal;
  font-size: 1em;
  height: 3%;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  position: fixed;
  bottom: 15px;
  z-index: 2;
}



/* ------- Sections ------- */

section {
  margin-right: auto;
  margin-left: auto;
  padding: 2em 5vw 2vw 5vw;
  border-bottom: 3px dotted var(--base-variant);
  max-width: 750px;
  top: 0;
  display: flex;
  flex-direction: column;
}

section p {
  max-width: 750px;
  margin-bottom: 1.2em;
  line-height: 1.5em;
  font-size: 1em;
}

section h1 {
  font-size: 1.2em;
  margin: 0 0 1em 0;
}

section img {
  margin: 0 auto;
}




/* theme-switch */

#theme-switch {
  cursor: grab;
  border: 0px;
  width: 40px;
  padding: 0;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
}

#theme-switch svg {
  fill: var(--text-color);
}

#theme-switch svg:last-child {
  display: none;
}

.darkmode #theme-switch svg:first-child {
  display: none;
}

.darkmode #theme-switch svg:last-child {
  display: block
}

/* (Phone) Menu
---------------------------------------------------------*/
header {
  border: 0px dotted var(--text-color);
  background-color: var(--base-color);
  padding-top: 3em;
  left: 47.5%;
  transform: translateX(-50%);
  position: relative;
  width: 90%;
  z-index: 2;
}

nav {
  position: fixed;
  width: 100%;
  top: 12px;
  display: flex;
  flex-direction: row-reverse;
  font-weight: bold;
  z-index: 1;
  pointer-events: none;
  font-family: terminal;
}

nav a {
  border: 0px dotted var(--text-color);
  pointer-events: all;
  text-decoration: none;
  color: var(--text-color);

}

nav a:first-child {
  margin: auto;
}

main {
  margin-top: 1em;
  height: auto;
  max-height: 82.5%;
  border: 3px dotted var(--text-color);
  overflow: scroll;
}

.grid-rgb {
  position: relative;
  display: grid;
  grid-gap: 4vmin;
  grid-template-columns: repeat(2, minmax(150px, 1fr)); /* 150px = minimum image size */
  grid-auto-flow: dense;
  padding: 0em;
  overflow: none;  
}

.grid {
  display: grid;
  grid-gap: 6vmin;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));/* 150px = minimum image size */
  grid-auto-flow: dense;
  padding: 2em 2.5em;
}

.grid a:nth-child(-n+6) {
  box-shadow: 10px 10px 7px  rgb(255, 0, 0, 0.5);
}

.grid a:nth-child(n+7) {
  box-shadow: 10px 10px 7px 0 rgb(0, 255, 0, 0.5);
}

.grid a:nth-child(n+13){
  box-shadow: 10px 10px 7px rgb(0, 0, 255, 0.5);
}

#theme-switch {
  scale: 0.75;
  top: 0px;
  right: -30px;
}

.wrapper {
  pointer-events: none;
}

text-c {
  display: flex;
  pointer-events: none;
  height: 80%;
  width: 100%;
  line-height: 1.3;
  z-index: 1;
  /* font-size: 2.5vh; */
}

text {
  font-family: terminal;
  font-weight: bold;
  text-transform: uppercase;
  bottom: 0px;
  font-size: 1em;
  position: fixed;
  height: 10%;
  width: 95%;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  z-index: 1;
  left: 50%;
  transform: translate(-50%, 0%);
}

.wrapper {
  position: absolute;
}

.marquee {
  animation: marquee 10s linear infinite;
}

.marquee2 {
  animation: marquee2 10s linear infinite;
  position: absolute;
  top: 0;
}

ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  overflow: hidden;
}

li {
  margin: 8px;
}

@keyframes marquee {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes marquee2 {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0%);
  }
}

.page-rb {
  margin-top: 3em;
  height: 80%;
}

.page-header-rb {
  position: fixed;
  font-size: 12px;
  padding: 1em 3em 0em 0em;
  transform: translate(0em, -5em);
}

.page-g {
  margin-top: 5em;
  height: 77.5%;
}

.page-header-g {
  position: fixed;
  font-size: 12px;
  padding: 1em 3em 0em 0em;
  transform: translate(0em, -6em);
}

/* 640px
--------------------------------------------------------- */

@media (min-width: 640px) {
  main {
    height: auto;
    border: 2px dotted var(--base-variant);
    overflow: scroll;
  }

  article {
    bottom: 0%;
  }

  footer {
    width: 90%;
  }

  #theme-switch {
    top: 5px;
    right: 0px;
  }

  .grid {
    display: grid;
    grid-gap: 5vmin;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));/* 150px = minimum image size */
    grid-auto-flow: dense;
    padding: 2em 3em;
  }

  .page-g {
    height: 80%;
    margin-top: 4em;
  }

  .page-header-rb {
    transform: translate(0em, -5em);
    padding: 1em 3em 0em 0em;
}
  .page-rb {
    height: 82.5%;
    margin-top: 3em;
  }
  .page-header-g {
    transform: translate(0em, -5em);
    padding: 2em 3em 0em 0em;
}
}

/* 768px - Menu goes to the left
--------------------------------------------------------- */

@media (min-width: 768px) {
  body {
    display: flex;
    justify-content: center;
  }

  footer {
    text-align: right;
    bottom: 2em;
    z-index: 1;
  }

  .grid a:nth-child(-n+6) {
   box-shadow: 10px 10px 3.3px var(--shadow-color) ;
  }

  .grid a:nth-child(n+7) {
    box-shadow: 10px 10px 3.3px 0 var(--shadow-color);
  }

  .grid a:nth-child(n+13){
    box-shadow: 10px 10px 3.3px var(--shadow-color);
  }

  header {
    left: 50%;
    height: 95%;
    position: absolute; 
    width: 100%;
    z-index: 0;
    background: none;
  }

  main {
    margin-top: 4em;
    position: fixed;
    border: 2px dotted var(--base-variant);
    width: 80%;
    height: 75vh;
    overflow-x: hidden;
    z-index: 0;
  }

  nav {
    top: 10px;
    bottom: 20px;
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    left: 35px;
    width: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    z-index: 1;
  }

  nav a {
    display: block;
    transition: transform 0.28s ease;
  }

  nav a:first-child {
    margin: 0;
  }

  nav a:hover {
    transform: translateX(10px);
    transition: transform 0.28s ease;
    text-decoration: underline;
  }

  text {

    font-family: terminal;
    font-weight: lighter;
    text-transform: uppercase;  
    position: absolute;
    width: 100%;
    height: 100%; 
    background: none;
    font-size: 10em;
    overflow: visible;
  }
  
  text-c {
    font-size: 0.92em;
    position: absolute;
    display: flex;
    transform: translate(0%, 0%);
    pointer-events: none;
    white-space: nowrap;
    width: 80%;
    height: 80%;
    mix-blend-mode: darken;
  }

  .wrapper {
    position: absolute;
  }

  .marquee {
    animation: marquee 20s linear infinite;
  }

  .marquee2 {
    animation: marquee2 20s linear infinite;

  }

  ul {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  li {
    margin: 0px;
  }

  @keyframes marquee {
    from {
      transform: translateX(0%);
    }

    to {
      transform: translateX(-100%);
    }
  }

  @keyframes marquee2 {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0%);
    }
  }

  .grid {
    display: grid;
    grid-gap: 4vmin;
    grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 150px = minimum image size */
    grid-auto-flow: row;
    padding: 1em;
  }

  #theme-switch {
    top: 0px;
    right: 30px;
  }

  .page-rb {
    height: 75%;
    margin-top: 5em;
  }
  
  .page-header-g {
    padding: 0em 10em 0em 0em;
    transform: translate(0em, -5em);
  }
  
  .page-g {
    height: 72.5%;
    margin-top: 6em;
  }

  .page-header-g {
    padding: 2em 10em 0em 0em;
    transform: translate(0em, -5em);
  }
}

/* 900px
--------------------------------------------------------- */

@media (min-width: 900px) {
  main {
    border: 2px dotted var(--base-variant);
    margin-top: 4em;
    padding: 0;
    width: 80%;
    height: 75vh;
  }

  .grid {
    display: grid;
    grid-gap: 4vmin;
    grid-template-columns: repeat(4, minmax(120px, 1fr));/* 150px = minimum image size */
    grid-auto-flow: dense;
    padding: 2em;
  }

  text-c {
    position: absolute;
    height: 80%;
    z-index: 1;
  }

  text {
    overflow: visible;
    position: absolute;
    line-height: 1.35em;
    width: 100%;
  }

  #theme-switch {
    top: 0px;
    right: 35px;
  }

  .page-rb {
    margin-top: 5em;
  }

  .page-header-rb {
    transform: translate(0em, -5em);
}
  .page-g {
    margin-top: 6em;
  }

  .page-header-g {
    transform: translate(0em, -5em);
  }
}

/* 1200px------------------------ */

@media (min-width: 1200px) {
  main {
    border: 2px dotted var(--base-variant);
    margin-top: 4em;
    padding: 0%;
    width: 95%;
    height: 75vh;
  }

  .grid {
    display: grid;
    grid-gap: 4vmin;
    grid-template-columns: repeat(6, minmax(150px, 1fr)); /* 150px = minimum image size */
    grid-auto-flow: dense;
    padding: 2em;
    overflow: visible;
  }

  text-c {
    width: 95%;
    transform: translate(0%, 0%);
  }

  #theme-switch {
    top: 0px;
    right: 30px;
  }

  .page-header-g {
    transform: translate(0em, -4em);
  }
}


/* Typography
-------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
  text-rendering: optimizelegibility;
  font-weight:300;
  /* font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
  font-family: "terminal";
}

h1 {
  font-size: 2.3em;
  margin-bottom: 1em;
  text-transform: none;
}

h2 {
  font-size: 1.2em;
  margin-bottom: 0.8em;
}

h3 {
  font-size: 1em;
  margin-bottom: 11px;
}

h4 {
  font-size: 15px;
  line-height: 26px;
}

li {
  position: relative;
}

header p{
  font-size: 12px;
}


main p {
  margin-bottom: 1.2em;
  line-height: 1.5em;
  font-size: 0.8em;
}

/* About
---------------------------------------------------------*/

#about {
  padding: 2.5%;
  height: 75vh;
}

#about ul {
  margin: 0;
  padding-left: 20px;
}

#about ul li {
  margin-bottom: 5px;
}

#about-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
}

/* ------- General ------- */

a {
  color: var(--text-color)
}

main a {
  color: var(--text-color);
  text-decoration: underline;
}

main a:hover {
  color: var(--highlight-text);
}

main a:hover .hover-cat-img {
  max-width: 80%;
  position: fixed;
  display: block;
  opacity: 0.3;
  pointer-events: none;
}

main a:hover .hover-img {
  display: inline-block;
}

h3,
h4 {
  font-size: 1em;
  font-weight: 600;
}

ul,
li {
  list-style-type: none;
}

b,
strong {
  font-weight: 300;
}

small {
  font-size: .85em;
}

hr {
  height: 1px;
  border: 0;
  background: currentColor;
  opacity: .1;
  margin: 1.2em 0;
}

abbr {
  text-decoration: none;
}

abbr[title]:hover {
  opacity: .7;
  cursor: help;
}

blockquote {
  padding-left: 2ch;
  opacity: .7;
  margin-bottom: .6em;
  position: relative;
}

blockquote:before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  bottom: .3em;
  width: 1px;
  opacity: .2;
}

img,
svg,
video,
audio {
  display: block;
  max-width: 100%;
  height: auto;
}


code,
textarea {
  font-family: ui-monospace, SF Mono, Menlo, Monaco, Andale Mono, monospace;
  font-size: 1em;
  opacity: .7;
}

a code {
  opacity: 1;
}

pre,
textarea {
  /* for code samples */
  font-size: .9em;
  color: inherit;
  line-height: inherit;
  padding: .6em .9em;
  margin: .8em 0 1em 0;
  position: relative;
  display: block;
  width: 100%;
  white-space: pre;
  border: 0;
  border-radius: 4px;
  background: rgb(255, 255, 100);
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .2), inset -1px -1px 0 rgba(0, 0, 0, .04);
}

/* Inline footnotes */

label {
  cursor: pointer;
  vertical-align: super;
  line-height: 1;
  font-size: .75em;
  padding-left: .1em;
}

label:hover {
  color: var(--secondary-text);
}

label:before {
  content: "[";
}

label:after {
  content: "]";
}

label+input,
label+input+small {
  display: none;
}

input:checked+small {
  display: block;
  padding: .8em 0 1em 2.5vw;
  ;
}

/* Figures */

figure {
  margin: 1.5em 0 1.5em 0;
  }

figure figcaption {
  margin: 0.8em 0 0 0;
  font-size: .85em;
  opacity: .7;
}

/* Responsive video embeds */

figure.video {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
  overflow: hidden;
}

/* External links */

a[href*="//"]:after {
  font-weight: 300;
  font-size: .85em;
  content: "\2197";
  /* top right arrow: ↗ */
  color: inherit;
  opacity: 1;
}

a[href*="//"]:hover:after {
  opacity: 1;
}

/* File links */

a:before {
  font-size: .7em;
  margin-right: .4em;
}

a[href$=".pdf"]:before {
  content: "PDF";
}

a[href$=".txt"]:before {
  content: "TXT";
}

a[href$=".mp3"]:before {
  content: "MP3";
}

a[href$=".zip"]:before {
  content: "ZIP";
}

a[href$=".rar"]:before {
  content: "RAR";
}

a[href$=".jpeg"]:before,
a[href$=".jpg"]:before,
a[href$=".gif"]:before,
a[href$=".png"]:before {
  content: "IMG";
}

/* ------- Images Grid ------- */

.grid nav {
  position: absolute;
}

.grid a {
  position: relative;
  box-shadow: 10px 10px var(--base-variant);
  transition-duration: 0.25s;
  cursor: zoom-in;
}

/* For a square ratio */
.grid a:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.default-img {
  display: block;
  opacity: 1;
}

.grid a img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.grid a:hover:nth-child(-n+6) {
  box-shadow: 10px 10px 10px rgb(255, 0, 0);
  scale: 1.125;
  z-index: 1;
}


.grid a:hover:nth-child(n+7) {
  box-shadow: 10px 10px 10px 0 rgb(0, 255, 0);
  scale: 1.125;
  z-index: 1;
}


.grid a:hover:nth-child(n+13){
  box-shadow: 10px 10px 10px rgb(0, 0, 255);
  scale: 1.125;
  z-index: 1;
}


.grid a:hover .default-img {
  display: none;
}

.hover-img,
.hover-cat-img {
  display: none;
  
}

.hover-img:hover {
  display: block;
  object-fit: cover;
  width: 100%;
}

.grid a:hover .hover-img {
  display: block;
  object-fit: cover;
}


#blue-grid {
  object-fit: contain;
  border: 0px dotted var(--base-variant);
  box-shadow: none;
  grid-gap: 4vmin;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 150px = minimum image size */
  grid-auto-flow: dense;
}