@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

/**GLOBAL**/
:root {
  --width: 480px;
  --dark-0: #091A19;
  --dark-1: #10211E;
  --dark-2: #162722;
  --dark-3: #1C2E26;
  --primary-1: #304334;
  --primary: #6B825C;
  --accent-0: #90D889;
  --accent-1: #8FC973;
  --accent-2: #B8DAA6;
  --text: #E0EAD9;
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Lato", sans-serif;
}

body {
  margin: 0;
  position: relative;
  height: 100%;
  background: linear-gradient(135deg,
      var(--dark-3) 0%,
      var(--dark-2) 39%,
      var(--dark-1) 61%,
      var(--dark-0) 100%);
  background-size:
    300% 100%,
    cover;
  animation: background-fade 5s linear infinite;
  animation-direction: alternate;
  background-attachment: fixed;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li {
  color: var(--text);
}

h1 {
  font-size: clamp(4rem, 5vw, 10rem);
  font-weight: 600;
  letter-spacing: 2px;
  width: max-content;
}

h2,
h3 {
  font-weight: 500;
  letter-spacing: 2px;
  width: max-content;
}

h2 {
  font-size: clamp(3rem, 4vw, 7rem);
}

h3 {
  font-size: clamp(2rem, 3rem, 6rem);
}

h4 {
  font-weight: 400;
  line-height: 1.5;
}

h5,
h6 {
  font-weight: 300;
}

h4 {
  font-size: clamp(1rem, 1.5vw, 4rem);
}

h5 {
  font-size: clamp(1rem, 1.25vw, 3.5rem);
}

h6 {
  font-size: clamp(1rem, 1.125vw, 2rem);
}

p,
li {
  font-weight: 300;
  font-size: clamp(1rem, 1.1vw, 1.5rem);
  color: var(--text);
}

.material-icons {
  font-variation-settings:
    "FILL" 0,
    "wght" 200,
    "GRAD" 0,
    "opsz" 24;
  font-size: 5vw;
  color: var(--text);

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

.shadow {
  box-shadow:
    0 13px 27px -5px var(--dark-0),
    0 8px 16px -8px hsla(0, 0%, 0%, 0.3),
    0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);
}

.center-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.center-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.text-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80%;
}

/**SWIPER PAGES**/
.swiper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slide-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.mySwiper {
  width: 100%;
  height: 100%;
}

/**ACTIVE PAGE ANIMATIONS**/
.header,
#skill-cards,
#project-section,
#project-cards-section,
#contact-section {
  opacity: 0;
}

.swiper-slide-active .header,
#slcc-splash .header,
.swiper-slide-active #skill-cards,
.swiper-slide-active #project-section,
.swiper-slide-active #project-cards-section,
.swiper-slide-active #contact-section {
  opacity: 0;
}

.swiper-slide-active .header,
#slcc-splash .header,
.swiper-slide-active #skill-cards,
.swiper-slide-active #project-section,
.swiper-slide-active #project-cards-section,
.swiper-slide-active #contact-section,
.down-indicator {
  animation: moveDown 0.8s ease-in forwards;
}

.swiper-slide-active .header,
#slcc-splash .header,
.swiper-slide-active #project-section,
.down-indicator {
  animation-delay: 0.2s;
}

.swiper-slide-active #skills-cards,
.swiper-slide-active #project-cards-section {
  animation-delay: 0.8s;
}

/**SWIPER BULLETS**/
.swiper-pagination-bullet {
  width: 18px;
  height: 18px;
  background-color: var(--accent-0);
  border-radius: 50%;
  transition: all 0.6s ease-in-out;
}

.swiper-pagination-bullet-active {
  height: 36px;
  background-color: var(--accent-2);
  border-radius: 14px;
}

/**PRIMARY PAGE**/
#primary {
  width: 100%;
  margin-top: 4vh;
  display: grid;
  height: 100vh;
  grid-template-columns: 100%;
  grid-template-rows: 40% 40% 10%;
  column-gap: 5%;
}

.header {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: 100%;
}

.header-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.header-image {
  height: 40vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.header-image img {
  width: calc(var(--width) / 2);
  filter: drop-shadow(5px 6px 5px rgba(36, 36, 42, 0.5));
  user-select: none;
  z-index: 1;
  animation: imgMoveDown 0.8s ease-in forwards 0.2s;
  border-radius: 50%;
}

#skill-cards {
  width: 100%;
}

#card-grid {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/**SKILL CARDS**/
.card {
  text-align: center;
  background-color: var(--text);
  border-radius: 20px;
  min-width: 20vw;
  max-width: 50vw;
  margin: 1vw;

  transition-duration: 500ms;
}

.skill-card-header {
  display: grid;
  grid-template-columns: 20% 60%;
  grid-template-rows: 100%;
  column-gap: 10%;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 1vw 2vw 1vw 2vw;
  margin: 0;
  background-color: var(--primary-1);
  border-radius: 18px 18px 0 0;
}

.skill-card-header h4 {
  font-weight: 700;
  text-align: right;
}

.skill-symbol {
  font-variation-settings:
    "FILL" 0,
    "wght" 200,
    "GRAD" 0,
    "opsz" 24;
  font-size: 5vw;
  text-align: left;
}

.card ul {
  padding: 1vw;
}

.card ul li {
  list-style: none;
  color: var(--dark-0);
}

/**PROJECTS PAGE**/
#project-section {
  height: 90vh;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 5vw;
}

#project-grid-container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 20% 80%;
}

#projects-header-row {
  display: flex;
  align-items: top;
}

#projects-nav-buttons {
  margin-top: 1.5vw;
  display: flex;
  flex-direction: row;
  align-items: bottom;
  justify-content: left;
  width: 100%;
}

.slider-nav-button {
  margin-left: 2vw;
  margin-right: 2vw;
  transition-duration: 500ms;
}

#projects-header-row div span {
  color: var(--accent-2);
}

#project-grid-container h1 {
  margin-left: 5vw;
  text-align: left;
}

#project-cards-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Tooltip container */
.tooltip .tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: var(--dark-0);
  color: var(--text);
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltip-text {
  visibility: visible;
}

/**PROJECT CARDS**/
.project-card {
  display: grid;
  grid-template-columns: 35% 65%;
  grid-template-rows: 100%;
  column-gap: 5%;
  overflow: hidden;
  height: 90%;
  width: 100%;
  transition-duration: 1s;
}

.project-card .img-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-left: 1vw;
}

.project-card img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 18px;
}

.project-text-column {
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2vw;
  background-color: var(--primary-1);
  border-radius: 18px;
}

.project-text {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 100%;
  grid-template-rows: 10% 35% 40% 15%;
}

.project-text h3 {
  font-weight: 600;
}

.project-text p {
  font-weight: 400;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.row {
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.feature-list {
  display: flex;
  flex-direction: column;
  color: var(--text);
  height: 100%;
  padding-left: 4vw;
}

.feature-list li {
  color: var(--text);
}

.button {
  width: 80%;
  color: var(--dark-0);
  background-color: var(--text);
  border: 3px solid var(--text);
  outline: none;
  border-radius: 18px;
  font-size: clamp(1rem, 1.5vw, 2rem);

  text-decoration: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 1vw;

  transition-duration: 0.5s;
}

.button:hover {
  background-color: var(--primary);
  color: var(--text);
}

/**Contact Section**/
#contact-section {
  height: 90vh;
  width: 100%;
  margin: 0 5vw 5vw 5vw;

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

#contact-section form {
  width: 80vw;
  height: 80%;
}

#contact-section input,
#contact-section textarea {
  width: 100%;
  padding: 2vw;
  margin: 2vw;
  border-radius: 18px;
  background-color: var(--text);
  color: var(--primary);
  outline: none;
  border: none;
  font-size: clamp(0.75rem, 1.1rem, 2rem);
}

#contact-section textarea {
  min-height: 30vh;
}

#contact-section input:valid,
#contact-section textarea:valid {
  background-color: var(--text);
}

#contact-section input:focus,
#contact-section textarea:focus {
  outline: none;
  border: none;
}

#contact-section .button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

#resume-section {
  margin: 2vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/**PDF Viewer**/
.pdf-container {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 90% 10%;
}

.pdf-document {
  overflow: hidden;
  object-fit: scale-down;
}

.pdf-buttons {
  width: 100%;
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 50% 50%;
}

.pdf-button {
  width: 100%;
  background-color: var(--text);
  outline: none;
  border: none;
  padding: 1vw;
  transition-duration: 500ms;
}

.pdf-button span {
  height: 100%;
  width: 100%;
  color: var(--primary);
  font-size: clamp(1rem, 2rem, 3rem);
  transition-duration: 500ms;
}

.pdf-button:hover,
.pdf-button:hover span {
  background-color: var(--primary);
  color: var(--text);
}

/**SLCC Navigation Bar**/
.nav {
  width: 90%;
  margin-top: 3vw;
}

.nav-list {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 25% 25% 25% 25%;
}

.nav-item {
  border-left: 2px solid var(--primary);
  border-right: 2px solid var(--primary);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  list-style: none;
  padding: 2vw;
  color: var(--primary);
  background-color: var(--text);
  transition-duration: 500ms;
}

.nav-item:hover,
.nav-item-active {
  background-color: var(--primary);
  color: var(--text);
}

/**SLCC Course View**/
#course-view-container {
  height: 70vh;
  width: 90%;
  display: grid;
  grid-template-columns: 10% 90%;
  grid-template-rows: 100%;

  margin: 50px auto;

  border: 1px solid white;
}

#course-view-selector {
  display: grid;
  grid-template-rows: repeat(13, 7.15%);
}

.course-nav-selector {
  border-bottom: 1px solid var(--primary);
  background-color: var(--text);
  color: var(--primary);
  height: 100%;
  transition-duration: 500ms;
}

.course-nav-selector:hover,
.course-nav-selector-active {
  color: var(--text);
  background-color: var(--primary);
}

#course-view {
  height: max-content;
  width: 100%;
  border: 1px solid white;
}

.course-header {
  margin-left: 2vw;
}

.course-section {
  margin: 0 auto;
  width: 90%;
  display: grid;
  grid-template-columns: 47.5% 47.5%;
  column-gap: 5%;
  border: 1px solid white;
}

.course-section-text {
  border: 1px solid white;
  width: 100%;
}

.course-page-slider {
  width: 100%;
  height: max-content;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  color: var(--text) !important;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  color: var(--text) !important;
}

.swiper-button-prev.swiper-button-disabled {
  color: var(--text) !important;
}

.swiper-button-next.swiper-button-disabled {
  color: var(--text) !important;
}

.error-page {
  margin-top: 5vw;
  margin-left: 5vw;
}

.error-page a {
  width: 50%;
}

.jobs,
.education-section {
  border-top: 1px solid var(--accent-0);
  width: 100%;
}

.job,
.edu {
  width: 100%;
  padding: 0vw 1vw 1vw 1vw;
}

.job-header-row,
.edu-header-row {
  display: grid;
  grid-template-columns: 70% 30%;
  align-items: center;
}

.job-time,
.edu-time {
  justify-self: right;
}

.company-and-location,
.edu-and-degree {
  display: flex;
  align-items: center;
}

.company-and-location h6,
.edu-and-degree h6 {
  margin-left: .25vw;
}

.job-list {
  margin: 0 auto;
  width: 90%;
}

.job-list-item {
  font-weight: 300;
}

.resume-skills {
  border-top: 1px solid var(--accent-0);
  width: 100%;
}

.resume-skills-skill {
  display: flex;
  align-items: center;
}

.resume-skills-skill p {
  margin-left: .5vw;
  padding: 1vw;
}

/**Animations**/
@keyframes background-fade {
  from {
    background-position: right, center;
  }
}

@keyframes moveDown {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }

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

@keyframes moveCardsDown {
  0% {
    transform: translateY(-40px);
    opacity: 0;
  }

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

@keyframes imgMoveDown {
  0% {
    transform: translateY(calc(var(--width) / -5));
    opacity: 0;
  }

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

/**Responsiveness**/
@media (max-width: 1250px) {
  #header-text {
    padding-left: 90px;
  }
}

@media (max-width: 1075px) {
  :root {
    --width: 400px;
  }

  .swiper-slide .slide-container {
    column-gap: 20px;
  }

  #header-text {
    padding-left: 60px;
  }
}

@media (max-width: 990px) {
  :root {
    --width: 360px;
  }

  #header-text {
    padding-left: 60px;
  }
}

@media (max-width: 900px) {

  #primary,
  #slcc-splash {
    width: 100%;
    display: grid;
    grid-template-rows: 40% 40% 5%;
    grid-template-columns: 100%;
  }

  .header {
    height: 100%;
    width: 100%;

    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 35% 65%;
  }

  .header .header-image {
    max-height: 15vh;
    width: 100%;

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

  .header .header-text {
    width: 100%;
  }

  h1 {
    font-size: clamp(2.5rem, 2.75vw, 3rem);
    margin-bottom: 16px;
    width: unset;
    line-height: 1.1;
  }

  h2 {
    padding-bottom: 0;
  }

  h3 {
    font-size: clamp(1.5rem, 2vw, 2.5rem);
  }

  .project-text p,
  .project-text ul li {
    font-size: clamp(0.5rem, 0.8rem, 1rem);
  }

  .skill-card-header {
    border-radius: 18px 18px 18px 18px;
  }

  .card {
    min-width: 40vw;
    margin: 1vw;
  }

  .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
  }

  .swiper-pagination-bullet-active {
    height: 28px;
  }

  .material-symbols-outlined {
    font-size: 10vw;
  }

  #project-grid-container {
    height: 90vh;
    grid-template-rows: 10% 80%;
  }

  .project-card {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 35% 55%;
    row-gap: 10%;
    overflow: hidden;
    height: 100%;
    width: 100%;
    padding: 2vw;
  }

  .project-text {
    padding: 2vw;
  }

  .project-text-column {
    margin-left: 5vw;
  }

  #card-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .button {
    border-radius: 10px;
  }

  #projects-header-row h1 {
    margin-top: .2vw;
  }

  #projects-nav-buttons {
    margin-top: 0;
  }

  .slider-nav-button {
    height: max-content;
  }

  .project-nav-icon {
    font-size: clamp(2rem, 3rem, 4rem);
  }
}

@media (max-width: 485px) {
  :root {
    --width: 280px;
  }
}