@import "shared.css";

/* #region main content */

/* Sub regions listed below */
/* #region buttons */
.nav-button,
.hamburger {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  align-items: center;
  appearance: none;
  background-color: var(--main-color-extra-light);
  border-radius: 4px;
  border-width: 0;
  box-shadow: rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, var(--main-color) 0 -2px 0 inset;
  box-sizing: border-box;
  color: var(--main-color-extra-dark);
  cursor: pointer;
  display: inline-flex;
  font-family: "JetBrains Mono", monospace;
  font-size: 4vmin;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  list-style: none;
  min-height: var(--button-height);
  overflow: hidden;
  padding: var(--nav-spacing);
  text-decoration: none;
  touch-action: manipulation;
  transition: box-shadow .15s, transform .15s;
  user-select: none;
  white-space: nowrap;
  will-change: box-shadow, transform;
  z-index: 100;
}

.visuallyHidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.hamburger {
  height: var(--button-height);
  left: 10px;
  padding: unset;
  position: absolute;
  top: 10px;
  width: var(--button-height);
  z-index: 100;
}

.hamburger .bar {
  background-color: var(--main-color-extra-dark);
  border-radius: 1em;
  display: block;
  height: 0.2vmax;
  padding: 0;
  pointer-events: none;
  position: absolute;
  transition: transform 0.3s ease-in-out, background-color 0.2s ease-in-out;
  width: 2vmax;
}

.bar1 {
  top: 39%;
}

.bar2,
.bar3 {
  top: 50%;
}

.bar4 {
  top: 60%;
}

.hide-nav:checked+label>.hamburger>.bar1 {
  background-color: transparent;
}

.hide-nav:checked+label>.hamburger>.bar2 {
  transform: rotate(45deg);
}

.hide-nav:checked+label>.hamburger>.bar3 {
  transform: rotate(-45deg);
}

.hide-nav:checked+label>.hamburger>.bar4 {
  background-color: transparent;
}

/* #endregion */
/* #region waves */
.wave {
  animation: turn-clock 90s infinite linear, morph 20s infinite ease-in-out;
  background: #3881c6;
  border-radius: 42%;
  box-shadow: 0 0 50px 0 rgb(0 0 0 / 50%);
  height: 1300px;
  left: 10%;
  margin-left: -200px;
  margin-top: -200px;
  opacity: 1;
  position: fixed;
  top: 3%;
  transform-origin: 50% 50%;
  width: 1500px;
  will-change: transform, border-radius
}

.wave-wrapper {
  left: 0;
  position: fixed;
  top: 50%;
  transform: rotate(45deg);
  z-index: -1000
}

.wave.three {
  animation: turn-clock 35s infinite linear, morph 15s infinite ease-in-out;
  background-color: #73a7d7;
  margin-left: 0;
  margin-top: 0
}

.wave.two {
  animation: turn-counter-clock 60s infinite linear, morph 10s infinite ease-in-out;
  background: #2868a3;
  margin-left: -100px;
  margin-top: -100px
}

/* #endregion */
/* #region scrollbar */

::-webkit-scrollbar {
  width: 2.5em;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
  margin-top: 5px;
}

::-webkit-scrollbar-thumb {
  border: 12px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 9999px;
  background-color: var(--main-color-dark);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--main-color-extra-dark);
}

/* #endregion */
/* #region main page formatting */
body {
  all: unset;
  background-color: var(--main-color);
  font-size: 4vmin;
  /* color: var(--main-color-dark); */
}

.content {
  animation: fadeIn ease 4s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  margin: 10vh 0 0 10vw;
  width: calc(100% - 20vw);
}

#filler {
  height: 500vh;
}

.hidden#nav {
  opacity: 0;
  transition: opacity ease-in-out .4s, visibility ease-in-out .4s;
  visibility: hidden;
  /* width: 0; */
}

#hide-nav {
  float: left;
  left: var(--nav-spacing);
  position: fixed;
  top: var(--nav-spacing);
  z-index: 101;
}

html {
  font-family: "JetBrains Mono", monospace;
  height: auto;
  scroll-behavior: smooth;
}

#nav {
  border-bottom-right-radius: .5vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: auto;
  opacity: 1;
  position: fixed;
  transition: opacity ease-in-out .4s, visibility ease-in-out .4s;
  visibility: visible;
  z-index: 100;
}

#nav * {
  margin-left: var(--nav-spacing);
  margin-top: var(--nav-spacing);
  /* min-width: var(--nav-width); */
}

#nav :first-child {
  visibility: hidden;
}

.splash {
  display: block;
  height: auto;
  margin-bottom: 3vh;
  text-align: justify;
  text-align-last: center;
  word-spacing: -5px;
}

.splash .background {
  background-color: var(--default-shadow-color);
  box-shadow: var(--default-shadow-full-width);
  margin: -10vh 0 0 -10vw;
  padding: 5vh 10vw 5vh 10vw;
  width: 100%;
}

.wrapper {
  display: flex;
  height: auto;
  width: calc(100% + 10px);
}

.footer {
  background-color: var(--default-shadow-color);
  box-shadow: var(--default-shadow-full-width);
  display: flex;
  justify-content: center;
  margin: 10vh 0 0 -10vw;
  padding: 5vh 10vw 5vh 10vw;
  width: 100%;
}

#contact h2 {
  text-align: center;
}

#contact ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  list-style-type: none;
  padding: unset;
}

.contact-logo {
  height: 8vmax;
  margin: 0 0.5vh;
}

/* #endregion */
/* #region experience and projects */
#projects ul,
#experience ul {
  padding-left: 0;
}

#projects>div,
#experience>div {
  margin-bottom: 4vh;
}

#projects img,
#experience img {
  height: 80%;
  width: 10vmax;
  border-radius: 100%;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, .1);
}

.project-title,
.experience-title {
  font-weight: bold;
  font-size: 3vmax;
}

.project-description,
.experience-description {
  list-style-type: none;
  text-align: center;
  text-size-adjust: 100%;
}

.resume {
  grid-column: 1 / span 3;
}

.resume a {
  pointer-events: all;
}

/* #endregion */
/* #region cards */
.card {
  list-style-type: none;
  text-align: center;
  transition: background-color ease-in-out .4s, box-shadow 0.15s;
  width: 100%;
}

.card * {
  pointer-events: none;
}

.card-inner {
  align-items: center;
  background-color: var(--main-color-mid-light);
  border-radius: 0.5em;
  box-shadow: rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, var(--main-color) 0 -4px 4px inset;
  display: flex;
  transform-style: preserve-3d;
  transition: transform 0.5s, background-color 0.5s ease-in-out;
  width: 100%;
  will-change: transform;
}

.flipped .card-inner,
.card-back {
  transform: rotateY(180deg);
}

.card-front {
  position: absolute;
}

.card-front,
.card-back {
  margin: 2vmax;
  align-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: calc(100% - 4vmax);
}

.grid>div {
  margin-bottom: 2vh;
}

/* #endregion */
/* #region media queries */
/* Landscape Mobile */
@media (orientation: landscape) {
  .splash {
    word-spacing: unset;
  }
}

/* Mobile only */
@media (max-width: 1000px){
  .focus {
    /* background-color: var(--baby-powder);
    color: var(--forest-green-web); */
    background-color: var(--main-color-extra-light);
  }
}

/* Desktop */
@media (min-width: 1000px) {
  body {
    font-size: 1.5vmax;
  }

  .splash {
    word-spacing: unset;
  }

  .grid {
    display: grid;
    grid-template: auto / auto auto auto;
    gap: 2% 1%;
  }

  .grid>div {
    margin-bottom: unset;
  }

  .card:hover .card-inner,
  .card.flipped:hover .card-inner {
    box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, var(--main-color) 0 -5px 5px inset;
    transform: translateY(-0.5vh);
    background-color: var(--main-color-extra-light);
  }

  .card.flipped:hover .card-inner {
    transform: translateY(-0.5vh) rotateY(180deg);
  }

  .card-inner {
    height: 100%;
  }

  #projects>div,
  #experience>div {
    margin-bottom: 2vh;
  }
  .nav-button:hover,
  .hamburger:hover {
    box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, var(--main-color) 0 -3px 0 inset;
    transform: translateY(-0.25vh)
  }

  .nav-button:active,
  .hamburger:active {
    box-shadow: var(--main-color) 0 3px 7px inset, rgba(45, 35, 66, .3) 0 7px 13px -3px;
    transform: translateY(0.25vh);
  }

  .nav-button,
  .hamburger {
    -webkit-user-select: none;
    align-items: center;
    appearance: none;
    background-color: var(--main-color-extra-light);
    border-radius: 4px;
    border-width: 0;
    box-shadow: rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, var(--main-color) 0 -2px 0 inset;
    box-sizing: border-box;
    color: var(--main-color-extra-dark);
    cursor: pointer;
    display: inline-flex;
    font-family: "JetBrains Mono", monospace;
    font-size: 2vmin;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    list-style: none;
    height: 5vmin;
    min-height: unset;
    overflow: hidden;
    padding: var(--nav-spacing);
    text-decoration: none;
    touch-action: manipulation;
    transition: box-shadow .15s, transform .15s;
    user-select: none;
    white-space: nowrap;
    will-change: box-shadow, transform;
    z-index: 100;
  }
  
  .hamburger {
    width: 5vmin;
  }

  .hamburger .bar {
    height: 0.2vmin;
    width: 2.5vmin;
  }
}

/* Ultrawide desktop */
@media (min-width: 2560px) {
  body {
    font-size: 0.75vmax;
  }

  .content {
    margin: 10vh 0 0 20vw;
    width: calc(100% - 40vw);
  }

  .splash .background {
    margin: -10vh 0 0 -20vw;
    padding: 10vh 20vw 10vh 20vw;
  }

  .footer {
    margin: 10vh 0 0 -20vw;
    padding: 5vh 20vw 5vh 20vw;
  }

  .project-title,
  .experience-title {
    font-size: 1vmax;
  }

}

/* #endregion */

/* #endregion */

/* #region animations */
@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes turn-counter-clock {
  from {
    transform: rotate(0)
  }

  from {
    transform: rotate(360deg)
  }
}

@keyframes turn-clock {
  from {
    transform: rotate(0)
  }

  from {
    transform: rotate(-360deg)
  }
}

@keyframes morph {
  0% {
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%
  }

  50% {
    border-radius: 30% 60% 70% 40%/50% 60% 30% 60%
  }

  100% {
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%
  }
}

/* #endregion */