/* --- general classes --- */

:root {
  /* --main-bg-col: #150323; */
  --main-bg-col: #19141c;
  --light-blue: #3271e7;
  --dark-blue: #1858cd;
  --text-wall-col: #80dbf2;
  --lighter-blue: #32b7e7;
}

.hov-float {
  transition: transform 0.2s ease-in-out;
}

.hov-float:hover {
  transform: translate(0, -5px);
}

/* just slap on a class cos I lazy */
body.lightmode *:not(.img) {
  filter: invert(100%);
}

.colors {
  transition: background-color 1s ease;
}

/* this should work better than js style.display = none */
.nodisp {
  display: none;
}

.disp-toggle {
  transition: 0.5 ease;
}

.margin-auto {
  margin-top: auto;
}

.pad-left {
  padding-left: 16px;
}

.mini-icon {
  width: 50%;
  height: auto;
}

.inline-a {
  display: inline;
  cursor: pointer;
  color: var(--lighter-blue);
  color: inherit;
  text-decoration: underline;
}

.inline-a:hover {
  font-weight: semibold;
  color: var(--light-blue);
}

.custom-font {
  font-family: "JetBrains Mono", sans-serif, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: normal;
}

.text-wall {
  font-family: 'IBM Plex Serif', Georgia, 'Times New Roman', Times, serif;
}

.simple-h3 {
  margin: 0.5rem;
  line-height: 2rem;
  font-size: 2rem;
  font-weight: 400;
}

/* --- Cover --- */
.cover-text {
  text-shadow: 0px 0px 8px black;
  color: #FFF;
}

.cover-text > p {
  text-shadow: 0px 0px 8 white;
  display: inline;
  font-family: 'Protest Revolution';
  font-style: italic;
  margin: 1rem;
  /* color: Crimson; */
}

#cover-headings {
  left: calc(-50%);
  transform: translate(50%, 0);
  position: relative;
  text-align: left;
}

#cover-headings > a {
  text-decoration: none;
  width: max-content;
  height: max-content;
}

.big-heading {
  font-size: 250%;
  /* font-size: 4rem; */
  font-weight: 400;
  line-height: 1;
  margin: 4rem;
}

.github-link {
  border-radius: 8px;
  border-width: 2px;
  border-style: none none solid none;
  border-color: white;
  padding: 4px;

  background: linear-gradient(
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.2)
  )
}

.github-link:hover {
  border-style: inset;
}

.bot-left-note {
  position: absolute;
  right: 5vw;
  bottom: 2.5vh;
  width: 42vh;
}

.bot-left-note > h6 {
  font-size: 16px;
  font-weight: 200;
  line-height: 20px;
}

/* --- button --- */
button {
  font-size: inherit;
  line-height: 0.8;
  font-weight: inherit;

  appearance: button;
  background: white;
  background-image: none;
  color: inherit;
  border: 0px solid #32a1ce;
  border-radius: 0.5rem;

  width: 8rem;
  height: 2rem;

  margin: 0px;
  padding: 5px;
}

.openbutton {
  color: white;
  border-radius: 5px;
  padding: 5px;
  display: inline-block;
  border: 1px solid white;
  width: calc(100% - 6px * 2);

  transition-duration: 0.4s;
}

.openbutton::before {
  content: "";
  /* IMPORTANT */

  background-image: url('data:image/svg+xml,%3Csvg width%3D"32" height%3D"32" version%3D"1.1" viewBox%3D"0 0 6.4 6.4" xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%3E%0A %3Cg stroke%3D"%23fff" stroke-width%3D".2"%3E%0A%20 %3Cpath d%3D"m5.6 5.3v-3.4c0-0.84-0.27-1.1-1.1-1.1h-3.4" fill%3D"%23fff0"%2F%3E%0A%20 %3Cpath d%3D"m5.3 1.1-5.2 5.2"%2F%3E%0A %3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
  background-repeat: no-repeat;

  position: relative;
  left: calc(100% - 1em - 5px);
  /* padding-right:                    calc(0.75em + 0.375rem); */
  padding-right:                    1em;
  background-position: center;
  /* background-size:                  calc(0.75em + 0.375rem)  */
                                    /* calc(0.75em + 0.375rem); */
  background-size: 1em 1em;
}

.openbutton > p {
  display: inline;
  position: relative;
  left: -1em;
  text-decoration: underline;
}

.openbutton:hover {
  cursor: pointer;
  background: #360a50;
}

button:hover {
  background: #EEE;
}

button:active {
  border: 2px inset #EEE;
}

/* Programming languages widgets */
.minicontainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  align-content: flex-start;

  width: inherit;
  /* height: 6rem; */
}

.minicontainer-elm,
.minicontainer > div {
  height: 2rem;
  margin: 1rem;
  padding: 1rem;

  border-radius: 1rem;
  /* flex: 1 1 max-content; */
  width: max-content;

  background-color: lightsalmon;
}

.language-name {
  color: var(--main-bg-col);
  margin: auto;
}

.microdivs > div {
  height: 2rem;
  margin: 0.5rem;
  padding: 0.5rem;
  padding: 0.1rem 1rem 0.3rem 1rem;
}

.microdivs > div > h6 {
  font-size: 1.5rem;
}

.inline-svg-container {
  display: flex;
  align-items: center;
}

/* --- Cards --- */
.cardcontainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: stretch;

  /* width: max-content; */
  width: 100%;
  height: 100%;
}

.floating-card,
.cardcontainer>div {
  /* border-radius: 1rem; */
  /* background: linear-gradient(49deg, #2d4de0 0, #9f71f0 30%, #fc6277 58%, #f8ef6f 95%); */
  border: solid 4px white;
  background-color: var(--main-bg-col);
  padding: 2.5rem;
  margin: 1.5rem;
  /* min-width: 30rem; */

  flex: 1 1 27rem;

  transition: 0.3s ease-in-out;
}

.floating-card,
.cardcontainer>div:hover {
  border: double 4px white;
  box-shadow: 0px 0px 1.5rem 0px rgba(95, 113, 195, 80);
  /* background: linear-gradient(49deg, #2d4de0 0, #9f71f0 30%, #fc6277 58%, #f8ef6f 95%), rgba(0, 0, 0, 0.8); */
  /* background-blend-mode: multiply; */
}

.floating-card>h6,
.cardcontainer>div>h6 {
  margin: 0;
  padding-bottom: 10px;
  padding-top: 10px;
}

.floating-card>p,
.cardcontainer>div>p {
  color: var(--text-wall-col);
  margin: 0;
  padding: 0;
}

/* Floating cards */

#floating-divs {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100vw;
  z-index: 29;
  backdrop-filter: blur(10px);
}

.floating-card {
  margin: 0px;
  position: fixed;
  z-index: 30;
  height: 60vh;
  width: 60vw;
  bottom: 50%;
  right: 50%;
  transform: translate(50%, 50%);
}

.sidebyside {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-around;
  align-items: center;
}

p.sideleft,
p.sideright {
  flex: 1 0 50%;
  /* grow shrink basis */
}

div.sideleft,
div.sideright {
  flex: 1 0 30%;
  max-height: 200px;
}

.sidebyside img {
  position: relative;
  width: 100%;
  height: 200px;
  object-fit: cover;
  bottom: 0;
  object-position: bottom;
}

/* flex col for inside of card */
.flex-col {
  display: flex;
  flex-flow: column nowrap;
}

/* scroll hints */
.scroll-hint {
  position: absolute;
  top: 95vh;
  left: 50%;
  transform: translate(-50%, 0);
  width: 10vh;

  transition: transform 0.3s ease-in-out;
}

.scroll-hint:hover {
  transform: translate(-50%, -50%);
}

.scroll-hint:hover>div {
  background: rgba(255, 255, 255, 0.5)
}

.scroll-hint>div {
  height: 0.5vh;
  margin-top: 1vh;
  border-radius: 5vh;
  background: #FFF;

  transition: background 0.3s;
}



/* --- applies to entire document --- */
body {
  font-size: 1.5rem
    /* 24px */
  ;
  line-height: 2rem
    /* 32px */
  ;
  margin: 0;
  /* background-color: #000; */
  /* background-color: #1b042b; */
  background-color: var(--main-bg-col);
  color: black;
}

h6,
span.bigger {
  font-size: 2rem;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  color: white;
}

#about-me-img-container {
  position: relative;
  top: 0px;
  left: 40vw;

  height: 0px;
  width: 0px;
}

#about-me-img {
  position: absolute;
  top: 10vh;
  left: 3vh;
  
  height: 80vh;
  width: 25vw;
  
  background-image: url("img/website-js.png");
  background-size: cover;
  opacity: 0.7;

  border: inset 2px white;
}

#about-me-img:hover {
  opacity: 1;
}

/* --- splash cover --- */
#cover {
  height: 100vh;
  width: 100vw;
  max-width: 100%;
  /*if it works it works*/
  text-align: center;
  background-image: url("img/planet2.png");
  background-blend-mode: hard-light;
  background-color: #666;
  /* background-color: rgba(127, 127, 127, 1); */
  background-size: cover;
  z-index: 5;
}

#cover>div {
  display: inline-block;
}

#cover>img {
  /* on bigger screens */
  width: 100px;
  height: 100px;
  display: inline-block;
}


/* --- navigation --- */
.nav-list {
  list-style-type: none;
  text-align: left;
}

@media screen and (max-width: 700px) {
  #cover {
    background-position-x: -500px;
  }
}

@media screen and (max-width: 900px) {
  #cover {
    background-position-x: -250px;
  }
}

@media screen and (max-width: 1100px) {
  /* mobile. navbar should be on top */
  header {
    display: none;
    float: top;
  }

  li.nav-li {
    display: inline-block;
  }
}

@media screen and (min-width: 1100px) {
  /* desktop navbar */

  header {
    position: sticky;
    height: 0;
    overflow: visible;
    top: 100px;
    left: 100px;
    z-index: 19;
  }

  header::before {
    content: '';
    width: calc(14vw + 140px);
    height: calc(40vh + 40px);
    left: -100px;
    top: -20px;
    position: absolute;
    background: var(--main-bg-col);
    filter: blur(20px);
    backdrop-filter: opacity(0);
  }

  .nav-list {
    margin-left: calc(-9.6rem + 4vw);
    margin-left: -4.8rem;
    padding: 24px 24px 24px 24px;

    transition: background 1s;
    z-index: 20;
    width: 25vh;
    white-space: nowrap;
    border-radius: 25px;
    position: relative;
  }

  .nav-list>li {
    padding-left: 40px;
  }

  .nav-li {
    transition:
      font-size 0.2s,
      color 0.2s;
    position: relative;
  }

  .nav-li:hover {
    padding-left: 35px;
    border-left: 5px solid blue;
    font-size: 125%;
    cursor: pointer;
  }

  #nav-sep {
    width: 2px;
    height: 40vh;
    position: absolute;
    background: white;
    left: 14vw;
  }
}

.a-nav {
  color: var(--light-blue);
  text-decoration: inherit;
  font-size: inherit;
}

.a-nav:hover {
  color: var(--dark-blue);
  cursor: pointer;
}

button.a-nav {
  line-height: inherit;
  background: rgba(0, 0, 0, 0);

  padding: 0px;
  width: auto;
  height: auto;
}

button.a-nav:active {
  border: 0;
}

#nav-header {
  color: var(--dark-blue);
}

.header-element {
  height: 3.5rem;
}

/*
.row-of-items {
  display: table-column;
  box-sizing: border-box;
  table-layout: fixed;
}
*/


/* Main Page */

/* --- Page Sections --- */
.section {
  position: relative;
  left: 25vw;
  /* margin: auto; */
  height: min-content;
  min-height: 100vh;
  padding-bottom: 10rem;
  padding-top: 1rem;

  width: 100%;
}

.section::before {
  content: '';
  position: absolute;

  left: -25vw;
  top: 4rem;

  height: 2px;
  width: 100vw;

  backdrop-filter: blur(200px) brightness(5);
  clip-path: polygon(
    evenodd, 

    0%     0%,
    24.5%   0%,
    24.5%   2px,
    0%     2px,
    0%     0%

    /* 40% 0%, */
    /* 100% 0%, */
    /* 100% 100%, */
    /* 40% 100%, */
    /* 40% 0% */

    );
}

.overflow-container {
  width: 70vw;
  overflow-x: scroll;
  height: 80%;
}

.width-container {
  width: 70vw;
  overflow-x: scroll;
  height: max-content;
}

main {
  position: relative;
  left: 100px;
  top: -1.5rem;
  width: min(900px, calc(100vw - 200px));
  margin: auto;
}


/* languages */
#languages>div.cardcontainer>div {
  object-fit: stretch;
  max-width: 150px;
}


@media screen and (max-width: 1200px) {
  main {
    margin-right: 0;
  }
}



/* Scroll Snap */
.snap-start {
  scroll-snap-align: start;
}

.scroll-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-behavior: smooth !important;
  /* scroll-behavior: auto; */
  scroll-snap-type: y proximity;
}

/* Slider text */
.slider {
  position: relative;
  width: max-content;
  /* overflow: hidden; */
  text-overflow: clip;
}

.slider > *:not(.slider-div) {
  animation: text-reveal .3s .5s linear both;
}

.slider > .slider-div {
  position: absolute;
  top: 0px;
  left: 4rem;
  width: calc(100% - 8rem);
  height: 106%;
  animation: slider-reveal 1s ease-in-out forwards;
}

.slider-hidden {
  background: #FFF;
}

@keyframes text-reveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slider-reveal {
  0% {
    width: 0px;
  }
  50% {
    width: calc(100% - 8rem);
    left: 4rem
  }
  100% {
    width: 0px;
    left: calc(100% + 4rem);
  }
}

/* Nav slider */
.slider > .nav-slider-div {
  position: absolute;
  top: 0px;
  left: 0rem;
  width: calc(100%);
  height: 106%;
  animation: nav-slider-reveal 1s ease-in-out forwards;

  background: var(--dark-blue);
}

@keyframes nav-slider-reveal {
  0% {
    width: 0px;
    opacity: 0;
  }
  40% {
    width: calc(100%);
    left: 2rem;
    opacity: 1;
  }
  100% {
    width: 0px;
    left: calc(100% + 2rem);
    opacity: 0.5;
  }
}

.fade-in {
  animation: fade-in 0.5s ease forwards;
}

.fade-out {
  animation: fade-out 0.5s ease forwards;
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Float in */
.float-in {
  animation: float-in 0.7s ease-in-out forwards;
}

.float-out {
  opacity: 0;
}

@keyframes float-in {
  0% { 
    translate: 0px 10px; 
    opacity: 0;
  }
  100% {
    translate: 0px 0px;
    opacity: 1;
  }
}

/* Credits? */
#credits {
  font-weight: 200;
  font-size: 20px;
  color: wheat;
}


/* "Folded" cards */
.folding-container {
  width: 70vw;
  height: 80%;

  position: relative;
}

.folding-container>div:not(.folding-menu) {
  border: solid 4px white;
  background-color: var(--main-bg-col);
  transition: 0.3s ease-in-out;

  width: 100%;
  height: 70vh;

  margin-top: 5vh;
  display: flex;
}

.folding-container>div:not(.folding-menu):hover {
  border: double 4px white;
  box-shadow: 0px 0px 1.5rem 0px rgba(95, 113, 195, 80);
}

.folding-container a {
  color: var(--light-blue);
  text-decoration: inherit;
  font-size: inherit;
}

.folding-container a:hover {
  color: var(--dark-blue);
  cursor: pointer;
}

.folding-menu {
  z-index: 100;
  position: absolute;
  width: 7vw;
  height: 15vh;

  translate: 0px -50%;
  top: 35vh;
  left: 1vw;

  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}

.folding-menu>* {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  cursor: pointer;

  transition: translate 0.3s ease-in-out;

  color: var(--light-blue);
  text-shadow: 0px 0px 2px white;
}

.folding-menu>*:hover {
  color: var(--dark-blue);
}

.folding-menu>a {
  color: var(--light-blue);
  font-size: 2rem;
  line-height: 2rem;
  font-weight: 400;
}

.folding-menu-open:hover {
  translate: 10% -10%;
}

.folding-menu-next:hover {
  translate: 10%;
}

.folding-menu-prev:hover {
  translate: -10%;
}

.cardcover {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}