/* 
Jadnell H. Reyes Pérez 
March 13th, 2025 
Version: 1.5 
Style Sheet
*/

/* Color Palette */
:root {
  /* Primary Colors */
  --color-primary-light: #1a7452;
  --color-primary-dark: #347b56;

  /* Neutral Colors */
  --color-background-light: #f8f8ff;
  --color-background-medium: #eeeef5;
  --color-background-dark: #111812;

  /* Text Colors */
  --color-text-light: #f8f8ff;
  --color-text-dark: #111812;
  --color-text-accent: #347b56;

  /* Accent Colors */
  --color-accent-yellow: #fbcc18;
  --color-accent-blue-light: #7bd5f5;
  --color-accent-blue-medium: #79a9f5;
  --color-accent-blue-dark: #787ff6;

  /* Action Colors */
  --color-action-youtube: #b2071d;
  --color-action-gray: #e3e1e3;

  transition: all 0.3s ease;
}

/* GLOBAL DESIGN */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-family: "Quicksand", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

*:focus,
*:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--color-background-light);
  min-height: 100vh;
  text-size-adjust: auto;
  margin: 0;
  padding: 0;
  width: 100%;
}

/*Buttons*/
button {
  transition: 0.3s ease-in;
}

.primaryButtons {
  padding: 0.5rem;
}

.primaryButtons button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.primaryButtons button {
  border: none;
  border-radius: 50px;
  box-shadow: 1px 1px 1px var(--color-primary-dark);
  font-size: large;
  font-weight: bold;
  color: var(--color-text-light);
  padding: 0.75rem 1rem;
  background: var(--color-primary-light);
  background: linear-gradient(
    180deg,
    var(--color-primary-light) 55%,
    var(--color-primary-dark) 100%
  );
  cursor: pointer;
}

.secondaryButtons {
  border-style: solid;
  border-color: var(--color-primary-dark);
  border-radius: 20px;
  background-color: transparent;
  padding: 0.25rem;
  color: var(--color-primary-dark);
  text-align: center;
}

button.secondaryButtons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

button.secondaryButtons:active {
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.secondaryButtonText {
  padding: 0.1rem;
  font-weight: bold;
}

#software-development,
#data-analysis,
#pm-and-others,
#techStackContainer {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.5rem;
  padding: 0.5rem;
}

#hardware {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.5rem;
  padding: 0.5rem;
}

/*End Buttons*/

/* Wrappers */
.wrapper {
  max-width: 1440px;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pictureWrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
  padding-bottom: 1rem;
}

#navBarWrapper {
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem;
  box-sizing: border-box;
}

.projectWrapper {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}
/* End Wrappers */

/*Navigation Bar*/
#newNavBar {
  width: 100%;
  height: 75px;

  background: linear-gradient(
    40deg,
    var(--color-primary-light) 44%,
    var(--color-primary-dark) 100%
  );
  border-radius: 0px 0px 20px 20px;
  box-shadow: 0px 2px 3px var(--color-background-dark);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/*Menu Button*/
#menu {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 0.5rem;
  transition: 0.3s ease-in;
}

#menu:active {
  transform: translateY(2px); /* Move button down */
}

#menuButton img,
#goBackButton img {
  width: 50px;
  height: 50px;
}

#menuButton,
#goBackButton {
  border: none;
  background-color: transparent;
  padding: 0;
  align-items: center;
  display: flex;
  cursor: pointer;
}

/*My Name (Home "Button")*/
#myName {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  transition: 0.3s ease-in;
}

#myName:active {
  transform: translateY(2px);
}

.myName,
.navBarTitles {
  text-decoration: none;
  color: var(--color-text-light);
  font-size: large;
  font-weight: bold;
  line-height: 1.2;
  white-space: nowrap;
}

/*Theme Changer Button*/
#themeChanger {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 0.5rem;
}

#themeChanger img {
  width: 35px;
  height: 35px;
}

#themeButton:active {
  transform: translateY(2px);
}

#themeButton {
  border: none;
  background-color: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}

#navBarItems {
  width: 20%;
  display: flex;
  padding: 1rem 1.5rem;
  list-style-type: none;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  position: fixed;
  z-index: 20;
}

.hide {
  opacity: 0;
  transition: 0.3s ease;
  visibility: hidden;
  display: none;
}

.navBarItem {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0.75rem 1rem;
  background: linear-gradient(
    40deg,
    var(--color-primary-light) 44%,
    var(--color-primary-dark) 100%
  );
  border-radius: 50px;
  box-shadow: 0px 2px 3px var(--color-background-dark);
  text-decoration: none;
  transition: 0.3s ease-in;
}

.navBarItem:active {
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/*End Navigation Bar*/

/*Sections*/
section {
  padding: 5rem 0;
}

#landingSection,
#projectsSection {
  background-color: var(--color-background-light);
}

#aboutMeSection,
#contactSection {
  background-color: var(--color-background-medium);
}

.HEADINGS {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 2rem;
  width: fit-content;
  margin: 0 auto;
  border-bottom: 3px solid var(--color-primary-dark);
  color: var(--color-text-dark);
}

.headingsDescriptions {
  padding: 0.5rem;
  text-align: center;
  color: var(--color-text-dark);
}

.animatedSection {
  opacity: 0;
}

#landingSection .smallBlock,
#projectsSection .smallBlock {
  background-color: var(--color-background-medium);
}

#contactSection .smallBlock {
  border: solid var(--color-primary-dark);
  background-color: transparent;
}

#contactSection .primaryButtons {
  float: none;
  margin: auto;
  width: 30%;
}

#socialMediaSection {
  background-color: #000000;
  border: none;
  padding: 1rem 0;
}
/*End Sections*/

/* ANIMATIONS */
/*1. Fading animation */
.fade {
  animation: fade 2s ease 0s 1 normal forwards;
}

@keyframes fade {
  0% {
    opacity: 50%;
  }

  to {
    opacity: 1;
  }
}

/*2. Left Slide */
.leftSlide {
  animation: leftSlide 0.8s ease-out 0s 1 normal forwards;
  opacity: 1;
}

@keyframes leftSlide {
  0% {
    opacity: 0;
    transform: translateX(-250px);
  }

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

/*3. Scale */
@keyframes scale {
  100% {
    transform: scale(1);
  }
}

/*4. Fade-in */
@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
/* END ANIMATIONS */

/*END GLOBAL DESIGN*/

/* LANDING SECTION */
#mainPicture {
  border-radius: 100%;
  box-shadow: 2px 2px 3px var(--color-background-dark);
  transition: 0.3s ease-in;
  width: 95%;
  max-width: 350px;
  height: auto;
  aspect-ratio: 1/1;
  align-self: center;
  object-fit: cover;
}

#landing2 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

#intro {
  text-align: justify;
  font-size: large;
  color: var(--color-text-dark);
}

#intro > h3 {
  color: var(--color-primary-dark);
}

.smallBlock {
  width: 90%;
  height: fit-content;
  border-radius: 20px;
  margin: 1rem 0;
  padding: 1rem;
  font-size: large;
  background-color: var(--color-background-light);
  text-align: justify;
  color: var(--color-text-dark);
}

.smallBlock h5 {
  font-size: larger;
  padding: 0 0 0.5rem 0;
}
/*END LANDING SECTION*/

/*ABOUT ME SECTION*/
#education,
#techStack1,
#techStack2 {
  display: flex;
  flex-direction: column;
}

.blockTitles {
  text-align: center;
  padding: 0.25rem;
  color: var(--color-primary-dark);
}

.inBlockTitles {
  text-align: center;
  padding: 0.5rem;
  color: var(--color-text-dark);
}

.educationBlock {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.educationDates {
  flex: 1;
  padding: 0.5rem;
  font-size: medium;
}

.credentials {
  flex: 2;
  padding: 0.5rem;
  text-align: justify;
  font-size: medium;
}

.educationLists {
  display: flex;
  padding: 0.1rem;
  flex-direction: row;
  justify-content: space-evenly;
  list-style-type: none;
}

.educationLists li {
  padding: 0.1rem 0.5rem;
  border-radius: 20px;
  border-style: dashed;
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
/*END ABOUT ME SECTION*/

/*PROJECTS SECTION*/
img.projectPictures {
  height: auto;
  width: 95%;
  max-width: 750px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.projectTitle {
  color: var(--color-primary-dark);
  text-align: left;
}

.projectContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2.5rem;
}

.projectContainer2 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*INDIVIDUAL PROJECTS*/
.projectDetailsTitle,
.typeOfProject,
.projectStatus {
  display: flex;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0;
  gap: 0.25rem;
  color: var(--color-text-dark);
}

#projectDescriptionBlock.smallBlock {
  background-color: var(--color-background-medium);
}

.projectDetailsTitle {
  font-size: x-large;
  padding: 0.75rem 0;
}

.sourceVideo {
  display: flex;
  width: 100%;
  padding: 1rem 0;
  justify-content: space-evenly;
}

.sourceCodeButton {
  border-radius: 200px;
  box-shadow: 1px 1px 1px var(--color-background-dark);
  border: none;
  background-color: #000000;
  transition: 0.3s ease-in;
  color: #f8f8ff;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
}

.sourceCodeButton:active {
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.youtubeButton {
  border-radius: 200px;
  box-shadow: 1px 1px 1px var(--color-background-dark);
  padding: 0 0.5em;
  min-width: 100px;
  border: none;
  background-color: var(--color-action-youtube);
  transition: 0.3s ease-in;
  color: #f8f8ff;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0.75rem 1rem;
  cursor: pointer;
}

.youtubeButton:active {
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.projectType {
  color: var(--color-action-gray);
  background-color: var(--color-background-dark);
  width: fit-content;
  transition: 0.3s ease;
  padding: 0.2em 0.5em;
  display: flex;
  justify-content: center;
}

#inProgress {
  border-radius: 200px 0px 0px 200px;
  width: fit-content;
  min-width: 7.5rem;
  color: var(--color-action-gray);
  background-color: var(--color-background-dark);
  box-shadow: 2px 2px 3px var(--color-background-dark);
  padding: 0.2em 0.5em;
  display: flex;
  justify-content: center;
}

#complete {
  border-radius: 0px 200px 200px 0px;
  width: fit-content;
  min-width: 7.5rem;
  color: var(--color-action-gray);
  background-color: var(--color-background-dark);
  box-shadow: 2px 2px 3px var(--color-background-dark);
  padding: 0.2em 0.5em;
  display: flex;
  justify-content: center;
}

#personal {
  border-radius: 200px 0px 0px 200px;
}

#professional {
  border-radius: 0px 200px 200px 0px;
}

.persActive {
  background-color: var(--color-accent-blue-light);
  color: var(--color-background-dark);
  box-shadow: 2px 2px 3px var(--color-background-dark);
}

.uniActive {
  background-color: var(--color-accent-blue-medium);
  color: var(--color-background-dark);
  box-shadow: 2px 2px 3px var(--color-background-dark);
}

.profActive {
  background-color: var(--color-accent-blue-dark);
  color: var(--color-background-dark);
  box-shadow: 2px 2px 3px var(--color-background-dark);
}

/* Image Slideshow */
.projectImages {
  border-radius: 20px;

  box-shadow: 2px 2px 3px var(--color-background-dark);
  transition: 0.3s ease-in;
  width: 100%;
  max-width: 600px;
  height: auto;
  border: none;
}

.slideshow-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
}

/* Next & previous buttons */
.prev,
.next {
  padding: 0.25rem;
  margin: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: fit-content;
  cursor: pointer;
  color: var(--color-text-light);
  transition: 0.3s ease;
  border-radius: 20px;
  border: none;
  user-select: none;
  background: -webkit-linear-gradient(
    top,
    var(--color-primary-dark),
    var(--color-primary-light)
  );
  box-shadow: 2px 2px 3px var(--color-background-dark);
}

/* Dot indicators */
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  background-color: var(--color-action-gray);
  box-shadow: 2px 2px 3px var(--color-background-dark);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s ease;
  opacity: 75%;
  padding: 0.1rem;
  margin: 0.1rem;
}

#imageDots {
  position: relative;
  bottom: 4%;
  z-index: 10;
  width: fit-content;
  margin: auto;
  padding: 1rem;
}

.active,
.dot:hover {
  background: -webkit-linear-gradient(
    top,
    var(--color-primary-dark),
    var(--color-primary-light)
  );
  box-shadow: 0px 2px 5px var(--color-primary-dark);
  transform: translateY(-2px);
  transition: ease 0.5s;
}

/* CONTACT SECTION */
#contactForm {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1rem;
  width: 90%;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pageclip-form__submit::after {
  border-color: var(--color-background-dark);
  border-left-color: var(--color-primary-dark);
}

.pageclip-form__success {
  background: var(--color-background-medium);
  width: 100%;
  border-radius: 20px;
}

#fullName {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  justify-content: space-between;
}

.formButtons {
  background: var(--color-background-light);
  border: none;
  border-radius: 20px;
  color: var(--color-text-dark);
  padding: 0.75rem;
  margin: 0.5rem 0;
  resize: none;
  width: 95%;
  font-size: 1em;
  transition: 0.3s ease-in;
}

::placeholder {
  padding: 5px;
  margin: auto;
  color: var(--color-primary-dark);
  font-size: 1em;
}

textarea {
  height: 150px;
}
/*END CONTACT SECTION*/

/*SOCIAL MEDIA SECTION*/
#socialMediaHeading {
  text-align: center;
  color: #f8f8ff;
}

#socialMediaItems {
  display: flex;
  list-style-type: none;
  padding: 0;
  flex-direction: row;
}

.socialMediaItem {
  display: flex;
  flex: 1;
  padding: 0.75rem;
  text-decoration: none;
  justify-content: center;
}

.socialMediaButton {
  background: #f8f8ff;
  width: 50px;
  height: 50px;
  padding: 0.25rem;
  border: none;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  max-width: 75%;
  cursor: pointer;
}

.socialMediaButton:active {
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/*END SOCIAL MEDIA SECTION*/

/* FOOTER */
footer {
  width: 100%;
  background-color: #000000;
  color: #f8f8ff;
  text-align: center;
  height: fit-content;
  border: none;
}
/*END FOOTER*/

/* @MEDIA */
@media screen and (width >= 768px) and (width <= 1023px) {
  /* Navigation Bar */
  #navBarItems {
    padding: 1rem 0;
  }
  /* End Navigation Bar */

  /* Landing & About Me Sections */
  #landing,
  #education {
    flex-direction: row;
    gap: 10px;
  }

  #landing2 > .smallBlock {
    width: 70%;
  }

  #techStack1,
  #techStack2 {
    align-items: center;
  }

  #software-development,
  #data-analysis,
  #pm-and-others {
    grid-template-columns: auto auto auto;
  }
  /* End Landing & About Me Sections */

  /* Projects Section */
  .typeStatus {
    display: flex;
    width: 100%;
    padding: 0.5rem 0;
  }

  #techStackContainer {
    grid-template-columns: auto auto auto auto;
  }
  /* End Projects Section */
}

@media screen and (width >= 1024px) {
  /*Navigation Bar*/
  #newNavBar {
    height: 50px;
  }

  #menu {
    display: none;
    visibility: none;
    opacity: 0;
  }

  #goBackButton:hover {
    transform: translateY(-4px);
  }

  #myName {
    align-items: baseline;
    padding: 0 1rem;
  }

  .myName {
    font-size: medium;
  }

  #navBarItems {
    flex-direction: row;
    width: 80%;
    align-items: center;
    justify-content: center;
    top: 0;
    z-index: 1000;
    padding-top: 0.15rem;
    position: fixed;
  }

  .primaryButtons button:hover {
    box-shadow: 0px 5px 10px var(--color-primary-dark);
    transform: translateY(-4px);
  }

  button.secondaryButtons:hover {
    box-shadow: 0px 2.5px 5px var(--color-primary-dark);
    transform: translateY(-4px);
  }

  #menu:hover {
    transform: translateY(-4px);
  }

  #myName:hover {
    transform: translateY(-4px);
  }

  #themeButton:hover {
    transform: translateY(-4px);
  }

  .navBarItem:hover {
    box-shadow: none;
    transform: translateY(-4px);
  }

  .sourceCodeButton:hover {
    box-shadow: 0px 5px 10px var(--color-background-dark);
    transform: translateY(-4px);
  }

  .youtubeButton:hover {
    box-shadow: 0px 5px 10px var(--color-action-youtube);
    transform: translateY(-4px);
  }

  .socialMediaButton:hover {
    box-shadow: 0px 5px 10px #f8f8ff;
    transform: translateY(-4px);
  }

  #navBarItemsLarge {
    display: flex;
    justify-content: center;
  }

  #navBarItems.hide {
    opacity: 1;
    visibility: visible;
    display: flex;
    background: transparent;
    border-radius: none;
    box-shadow: none;
    flex-direction: row;
  }

  .navBarItem {
    background: transparent;
    border-radius: none;
    box-shadow: none;
  }

  /*End Navigation Bar*/

  /*Landing Section*/
  #landing {
    display: flex;
    flex-direction: row;
  }

  #landing1 {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }

  #landing2 {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex: 3;
    align-items: center;
  }

  #landing2 > .smallBlock {
    width: 85%;
  }
  /*End Landing Section*/

  /*About Me Section*/
  #aboutMe {
    display: flex;
    flex-direction: row;
  }

  #educationLarge {
    flex: 2.5;
  }

  #techStackLarge {
    flex: 3;
  }

  #education,
  #techStack1,
  #techStack2 {
    flex-direction: column;
    gap: 5px;
  }

  #software-development,
  #data-analysis,
  #pm-and-others {
    grid-template-columns: auto auto auto;
  }

  #techStackContainer {
    grid-template-columns: auto auto auto auto auto auto;
  }
  /*End About Me Section*/

  /*Projects Section*/
  .projectContainer {
    flex-direction: row;
  }

  .projectContainer:nth-child(even) {
    flex-direction: row-reverse;
  }

  .projectContainer1 {
    flex: 3;
  }

  .projectContainer2 {
    display: flex;
    flex-direction: column;
    flex: 2.5;
    align-items: center;
  }

  .typeStatus {
    display: flex;
    width: 100%;
    padding: 0.5rem 0;
  }
  /*End Projects Section*/

  /* Contact Section */
  #fullName {
    width: 98%;
  }
}