@import url("https://fonts.googleapis.com/css2?family=Nunito&family=Open+Sans:wght@300&display=swap");

/* LVL: 1 - PRECONFIG & BODY */

:root {
  --bg-color: #000012;
  --bg-color-2: #221d30;
  --bg-color-footer: rgb(11, 16, 38);

  --primary-text: #fff;
  --primary-colored-text: #efd758;
  --secondary-text: #979797;

  --highlight-color: #c475df;

  --primary-font: "Nunito", sans-serif;
  --secondary-font: "Open Sans", sans-serif;
}

html {
  scroll-behavior: smooth;
}

.maintenance {
  background: var(--bg-color);
  color: var(--primary-text);

  margin: 0;
  width: 100vw;
  height: 100vh;

  z-index: 2;
  position: absolute;

  display: flex;
  justify-content: center;
  align-items: center;
}

.maintenance p {
  font-size: 1.5rem;
  text-align: center;
  margin: 20px;
  margin-bottom: 100px;
}

body {
  background: var(--bg-color);
  color: var(--primary-text);

  margin: 0;

  font-family: var(--primary-font);

  /* TODO: TEMPORARY */
  height: 200vh;
  overflow-x: hidden;
  /* overflow-y: hidden; */
}

/* LVL: 2 - OVERRIDES & CUSTOMIZED TAGS*/

a {
  color: var(--primary-text);
  text-decoration: none;
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;

  margin: 15px 50px;

  font-size: 1.5em;
}

/* LVL: 3 - NAVBAR */

nav a {
  margin: 0 20px;
  font-size: 1.2rem;

  transition-duration: 250ms;
  position: relative;
}

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

nav a::before {
  content: "";
  position: absolute;
  bottom: -10px;
  height: 3px;
  width: 100%;
  opacity: 0;
  background-color: var(--highlight-color);

  transition-duration: 500ms;
}

nav a:hover::before {
  content: "";
  opacity: 1;
}

/* LVL: 4 - INTRODUCTION SECTION */

section.intro {
  margin: 3% 30% 10% 5%;
}

section.intro > h1 {
  font-size: 3em;
  margin: 14% 0 2% 0;
}

section.intro h2 {
  color: var(--secondary-text);
  font-family: var(--secondary-font);

  font-size: 1.2em;
  margin-top: 0;
}

/* LVL: 5 - PROJECTS SHOWCASE SECTION */

section.projects {
  width: 100%;
}

section.projects > h1 {
  text-align: center;
  font-size: 3em;
  margin-bottom: 0;
}

section.projects > :nth-child(3) {
  display: flex;
  justify-content: center;
  align-items: baseline;
}

section.projects-animate .mob-area > * {
  animation: entry-mob-dev 500ms ease 1s both;
}

section.projects-animate .web-area > * {
  animation: entry-web-dev 500ms ease 1s both;
}

section.projects-exit .mob-area > * {
  animation: exit-mob-dev 500ms ease both;
}

section.projects-exit .web-area > * {
  animation: exit-web-dev 500ms ease both;
}

section.projects-animate .line {
  animation: height-change 1s ease forwards;
}

section.projects-exit .line {
  height: 630px;
  animation: exit-height-change 1s ease 500ms forwards;
}

/* LVL: 5.1 - TECHNOLOGIES SHOWCASE SECTION */

section.tech {
  margin-top: 45px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  font-size: 2em;
}

section.tech .icon-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  align-items: center;
  justify-content: center;
}

section.tech .icon-container .break {
  flex-basis: 100%;
  height: 0;
}

section.tech .icon-container .icon {
  margin: 10px;

  /* TEMPORARY */
  width: 70px;
  height: 70px;

  image-rendering: crisp-edges;

  /* filter: sepia(100%) saturate(300%) brightness(25%) hue-rotate(170deg); */
}

footer .icon-container .icon {
  width: 45px;
  height: 45px;

  margin: 0 10px 10px 0;

  image-rendering: crisp-edges;
}

section.tech h1,
section.tech .icon-container {
  opacity: 0;
}

section.tech-animate h1 {
  animation: entry-mob-dev 500ms ease both;
}

section.tech-exit h1 {
  animation: exit-mob-dev 500ms ease both;
}

section.tech-animate .icon-container {
  animation: fadeIn 500ms ease both;
}

section.tech-exit .icon-container {
  animation: fadeOut 500ms ease both;
}

/* LVL 5.2 - ABOUT ME */
section.aboutme {
  margin: 10px;
}

/* LVL: 5.3 - FOOTER */
footer {
  width: 100%;
  height: 10em;

  padding: 20px;
  margin-top: 50px;
  background-color: var(--bg-color-footer);
}

/* LVL: 6 - CLASSES SECTION */

.line {
  background-color: var(--primary-text);

  position: absolute;
  left: 0;
  right: 0;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;

  width: 4px;
}

.mob-area,
.web-area {
  width: 50%;
  margin: 10px;

  font-size: 1.5em;
}

.mob-area > *,
.web-area > * {
  opacity: 0;
}

.mob-area > h2 {
  text-align: left;
}

.web-area > h2 {
  text-align: right;
}

.proj-btn {
  display: none;

  position: fixed;
  z-index: 2;

  border: none;
  text-decoration: none;
  border-radius: 50% 50% 0 50%;

  height: 70px;
  width: 70px;

  bottom: 0;
  right: 0;

  background-color: #753a88;
  color: var(--primary-text);

  transition: 1s ease;
}

span.job {
  color: var(--primary-colored-text);
  animation: color-change-by 500ms ease-in infinite;
}

span.highlight {
  color: var(--primary-colored-text);
}

.text-card,
.text-card-2 {
  border-radius: 10px;

  display: flex;

  transition: 500ms ease;
}

.tc-container,
.tc-container-2 {
  width: 85%;
  margin: 40px 0;
}

.mob-area .tc-container,
.mob-area .tc-container-2 {
  margin-right: auto;
}

.web-area .tc-container,
.web-area .tc-container-2 {
  margin-left: auto;
}

.mob-area .text-card,
.mob-area .text-card-2 {
  flex-direction: row;
}

.web-area .text-card,
.web-area .text-card-2 {
  flex-direction: row-reverse;
}

.text-card:hover,
.text-card-2:hover {
  cursor: pointer;
}

.text-card h2,
.text-card-2 h2 {
  font-size: 0.8em;
  margin: 7px 0px;
}

.text-card h1,
.text-card-2 h1 {
  font-size: 1.2em;
  margin: 10px 7px;
}

.text-card > figure,
.text-card-2 > figure {
  width: 80%;

  margin: 15px;

  display: grid;
  align-content: center;
}

.text-card > figure > img,
.text-card-2 > figure > img {
  width: 100%;
  height: 200px;
  object-fit: contain;
}

.text-card > div,
.text-card-2 > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.text-card {
  background: -o-linear-gradient(to right, #cc2b5e, #753a88);
  background: -moz-linear-gradient(to right, #cc2b5e, #753a88);
  background: -webkit-linear-gradient(to right, #cc2b5e, #753a88);
  background: linear-gradient(to right, #cc2b5e, #753a88);

  padding: 15px;
  color: var(--primary-text);
}

.text-card-2 {
  background: -o-linear-gradient(to right, #42275a, #734b6d);
  background: -moz-linear-gradient(to right, #42275a, #734b6d);
  background: -webkit-linear-gradient(to right, #42275a, #734b6d);
  background: linear-gradient(to right, #42275a, #734b6d);

  padding: 15px;
  color: var(--primary-text);
}

.chips {
  font-size: 0.6em;
  background-color: #b752e6;
  padding: 2px 10px;
  border-radius: 1em;
  margin-left: 10px;
  color: white;
}

.link-move {
  transition: 50ms;
}

.link-move:hover {
  margin-left: 10px;
  color: #b752e6;
}

.link-move:active {
  color: #9841c0;
}

/* LVL: 6 - MEDIA QUERIES SECTION */
@media screen and (pointer: fine) and (min-width: 1300px) {
  .mob-area .text-card:hover,
  .mob-area .text-card-2:hover {
    transform: translateX(20px);
  }

  .web-area .text-card:hover,
  .web-area .text-card-2:hover {
    transform: translateX(-20px);
  }
}

@media screen and (max-width: 1300px) {
  section.projects-animate .line {
    animation: height-change-lg 1s ease forwards;
  }

  section.projects-exit .line {
    height: 990px;
    animation: exit-height-change-lg 1s ease 500ms forwards;
  }
}

@media not screen and (pointer: fine), screen and (max-width: 1300px) {
  .mob-area > h2,
  .web-area > h2 {
    text-align: center;
  }

  .text-card,
  .text-card-2 {
    text-align: center;
    flex-direction: column !important;
  }

  .tc-container,
  .tc-container-2 {
    width: 70%;
    margin: 50px auto;
  }

  .text-card > figure,
  .text-card-2 > figure {
    width: 60%;

    margin: 15px auto;
  }
}

@media only screen and (max-width: 890px) {
  nav {
    font-size: 1em;
    margin: 15px 20px;
  }

  nav a {
    margin: 0 2vw;
    font-size: 1rem;
  }

  section.intro {
    margin: 3% 20% 10% 5%;
  }

  section.intro > h1 {
    font-size: 1.5em;
  }

  section.intro > h2 {
    margin-right: 30%;
  }
}

@media only screen and (min-width: 650px) {
  nav a:first-of-type {
    margin-left: auto;
  }
}

@media only screen and (max-width: 650px) {
  nav {
    flex-wrap: wrap;
    font-size: 1.3em;
  }

  nav > p {
    flex-basis: 100%;
    text-align: center;
    margin: 20px 0 5% 0;
  }

  nav a {
    font-size: 1.2rem;

    margin: 0 2vw 3vh 2vw;
  }

  nav a::before {
    opacity: 1;
    background-color: var(--primary-text);

    transition-duration: 250ms;
  }

  nav a:hover::before {
    background-color: var(--highlight-color);
  }

  section.intro {
    margin: 20% 10% 20% 5%;
  }

  section.intro > h1 {
    font-size: 1.7em;
  }

  .mob-area,
  .web-area {
    display: none;

    width: 100%;
  }

  .mob-area > h2,
  .web-area > h2 {
    text-align: center;
  }

  .web-area.active,
  .mob-area.active {
    display: block;
  }

  section.projects-animate .mob-area > * {
    animation: entry-mob-dev 500ms both;
  }

  section.projects-animate .web-area > * {
    animation: entry-web-dev 500ms both;
  }

  section.projects-exit .mob-area > * {
    animation: exit-mob-dev 500ms both;
  }

  section.projects-exit .web-area > * {
    animation: exit-web-dev 500ms both;
  }

  .line {
    display: none;
  }

  .proj-btn {
    display: block;

    right: 0;
  }

  .proj-btn.web {
    background-color: #cc2b5e;
    color: var(--bg-color);
    border-radius: 50% 50% 50% 0;
    right: calc(100% - 70px);
  }

  .proj-btn.web.hidden {
    right: 100%;
  }

  .proj-btn.hidden {
    right: -70px;
  }

  .text-card > figure,
  .text-card-2 > figure {
    width: 100%;

    margin: 15px auto;
  }

  /* Temporarily commented out due to errors with the mobile-friendly version */
  /* .tc-container,
  .tc-container-2 {
    height: 19em;
  } */
}

@media only screen and (max-width: 300px) {
  section.intro {
    text-align: center;
    margin: 20% 5% 20% 5%;
  }

  section.intro > h2 {
    margin-right: 0;
  }

  nav a {
    margin-top: 20px !important;
  }

  .tc-container,
  .tc-container-2 {
    height: 100%;
  }
}

/* LVL: 7 - ANIMATIONS & KEYFRAMES SECTION */

@keyframes color-change-by {
  50% {
    color: var(--primary-colored-text);
  }
  100% {
    color: var(--primary-text);
  }
}

/* Single use animations */

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes height-change {
  0% {
    height: 0;
  }
  100% {
    height: 830px;
  }
}

@keyframes height-change-lg {
  0% {
    height: 0;
  }
  100% {
    height: 990px;
  }
}

@keyframes entry-web-dev {
  0% {
    transform: translateX(100px);
  }

  100% {
    opacity: 1;
    transition: 1s ease;
  }
}

@keyframes entry-mob-dev {
  0% {
    transform: translateX(-100px);
  }

  100% {
    opacity: 1;
  }
}

/* Single use exit animations */

@keyframes exit-height-change {
  0% {
    height: 630px;
  }
  100% {
    height: 0;
  }
}

@keyframes exit-height-change-lg {
  0% {
    height: 990px;
  }
  100% {
    height: 0;
  }
}

@keyframes exit-web-dev {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(100px);
  }
}

@keyframes exit-mob-dev {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(-100px);
  }
}

.clickable {
  cursor: pointer;
}