:root {
  --bg: #F5F7F2;
  --primary: #1E1E1E;
  --accent: #F4A261;
  --accent-soft: #FFD6A5;
  --card: #FFFFFF;
  --text: #2A2A2A;
  --muted: #6B6B6B;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: "Roboto", sans-serif;
}

h2, p {
  margin: 10px;
}

.Ui {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--primary);
  position: fixed;
  z-index: 1001;
  width: 100%;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.Ui .Li a {
  float: right;
  font-weight: bold;
  font-size: 18px;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
}

.Ui .Li a:hover {
  color: var(--accent);
}

.Ui .Li p {
  float: left;
  font-size: 22px;
  font-weight: bold;
}

.one {
  background-image: linear-gradient(to right, #FFD166, #F4A261);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.two {
  color: #E76F51;
}

.content, .home {
  display:flex;
  justify-content:center;
  align-items:center;
}

.image {
  width:200px;
  height:200px;
}

#one {
  border-top-left-radius: 20px;
}

#two {
  border-top-right-radius: 20px;
}

#three {
  border-bottom-left-radius: 20px;
}

#four {
  border-bottom-right-radius: 20px;
}

.holder { 
  display:flex;
  flex-direction:column;
  border-radius:20px;
  align-items:center;
}

.contents {
  display:flex;
  flex-direction:column;
  margin-right:75px;
}

.title {
  font-weight: bold;
  font-size: 45px;
}

.par {
  width:400px;
  color: var(--muted);
  margin-top:-20px;
}

.buttons {
  margin-top:10px;
}

.button {
  text-decoration:none;
  padding:10px 14px;
  border-radius:12px;
  font-weight: bold;
  transition: 0.25s;
}

.button1 {
  background-color: var(--accent);
  color: white;
}

.button1:hover {
  background-color: var(--primary);
  color:white;
}

.button2, .button3 {
  border: 1px solid var(--primary);
  color: var(--primary);
}

.button2:hover, .button3:hover {
  background-color: var(--primary);
  color: white;
}

#transition {
  position: relative;
}

.certifications {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  overflow:hidden;
  z-index: 0;
  filter: blur(1px); 
}

.certcontainer {
  position: relative;
  z-index: 1;
  display:flex;
  flex-direction:column;
  align-items:center;
}

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



.rowcert {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 15px 0;
}

.certholder {
  background: var(--card);
  padding: 10px;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: 0.3s;
}

.cert {
  width: 170px;
  border-radius: 10px;
  transition: 0.3s;
}

.certholder:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.certholder:hover .cert {
  transform: scale(1.02);
}

.fly { width:100px; }

.flying1, .flying2, .flying3,
.flying4, .flying5, .flying6, .flying7 {
  position:relative;
  width:100vh;
}

.flying1 { animation: rotate 10s linear infinite; }
.flying2 { animation: rotate2 14s linear infinite; }
.flying3 { animation: rotate 12s linear infinite; }
.flying4 { animation: rotate2 17s linear infinite; }
.flying5 { animation: rotate 11s linear infinite; }
.flying6 { animation: rotate2 15s linear infinite; }
.flying7 { animation: rotate 13s linear infinite; }

.outerSpinner1 { animation: slide 10s linear infinite; }
.outerSpinner2 { animation: slide2 14s linear infinite; }
.outerSpinner3 { animation: slide 12s linear infinite; }
.outerSpinner4 { animation: slide2 17s linear infinite; }
.outerSpinner5 { animation: slide 11s linear infinite; }
.outerSpinner6 { animation: slide2 15s linear infinite; }
.outerSpinner7 { animation: slide 13s linear infinite; }

@keyframes slide {
  0% { transform: translateX(-100px); }
  25% { transform: translateX(2000px); }
  50% { transform: translateX(-2000px); }
  75% { transform: translateX(2000px); }
  100% { transform: translateX(-2000px); }
}

@keyframes slide2 {
  0% { transform: translateX(2100px); }
  25% { transform: translateX(-2000px); }
  50% { transform: translateX(2000px); }
  75% { transform: translateX(-2000px); }
  100% { transform: translateX(2000px); }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes rotate2 {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

.ResumePage {
  display:flex;
  align-items:center;
}

.ColumnInfo {
  display:flex;
  flex-direction:column;
  margin:40px;
  width:500px;
  background-color: var(--accent-soft);
  border-radius:15px;
  padding:20px;
  align-items:center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.Resume {
  height:600px;
  margin:40px;
  border-radius:10px;
}

.linkPDF {
  text-decoration:none;
  color: var(--primary);
  background-color:white;
  border: 1px solid var(--primary);
  padding:10px;
  border-radius:12px;
  font-weight:bold;
  width:150px;
  text-align:center;
  transition:0.3s;
}

.linkPDF:hover {
  background-color: var(--primary);
  color:white;
}

.certtitle {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 30px;
  color: var(--primary);
  z-index: 1;
}

.project-card {
  width: 400px;
  height: 250px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.project-card:hover {
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.project-card:hover img {
  transform: scale(1.05);
}

.overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px;
  background: rgba(0,0,0,0.6);
  color: white;
  text-align: center;
  font-size: 14px;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);

  z-index: 9999; 
}

.modal-content {
  width: 80%;
  height: 80%;
  margin: 5% auto;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.modal-content iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}

.projectContainer {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.projectTitle {
  text-align:center;
}

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

.dmockups {
  margin-top:20px;
  color: var(--primary);
  background-color:white;
  border: 1px solid var(--primary);
  padding:10px;
  border-radius:12px;
  font-weight:bold;
  width:150px;
  text-align:center;
  transition:0.3s;
}

.dmockups:hover {
  background-color: var(--primary);
  color:white;
}

.sub {
  margin:10px;
}

    @media screen and (max-width: 900px) {
      html {
        scroll-snap-type: none !important;
      }

      .section {
        scroll-snap-align: none !important;
        scroll-snap-stop: normal !important;
      }

      main {
        padding-top: 72px;
      }

      .content, .home {
        position: static !important;
        overflow: visible !important;
        inset: auto !important;
        animation: none !important;
        flex-direction: column;
        padding: 20px 16px;
      }

      .section {
        position: relative;
        height: auto !important;
        min-height: 100vh;
        padding: 80px 0 40px;
      }

      .contents {
        margin-right: 0;
        align-items: center;
      }

      .title {
        font-size: 34px;
        text-align: center;
      }

      .par {
        width: min(100%, 360px);
        margin-top: 0;
        text-align: center;
      }

      .buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
      }

      .button {
        padding: 10px 16px;
      }

      .image {
        width: 160px;
        height: 160px;
      }

      .ResumePage {
        flex-direction: column;
        gap: 20px;
      }

      .ColumnInfo,
      .ResumeContainer {
        width: min(100%, 520px);
        margin: 0 auto;
      }

      .Resume {
        width: min(100%, 520px);
        height: 520px;
        margin: 0 auto;
      }

      .projectContainer {
        flex-direction: column;
      }

      .project-card {
        width: min(100%, 420px);
        height: 240px;
      }

      .projectTitle {
        margin-bottom: 14px;
      }

      .rowcert {
        flex-direction: column;
        gap: 14px;
      }

      .cert {
        width: 150px;
      }
    }

    @media screen and (max-width: 640px) {
      main {
        padding-top: 88px;
      }

      .Ui {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding: 10px 0;
      }

      .Ui .Li {
        float: none;
        margin: 0;
      }

      .Ui .Li a,
      .Ui .Li p {
        float: none;
        display: block;
        text-align: center;
        padding: 10px 8px;
      }

      .Ui .Li p {
        font-size: 18px;
      }

      .title {
        font-size: 28px;
      }

      .content, .home {
        position: static !important;
        overflow: visible !important;
        inset: auto !important;
        animation: none !important;
        padding: 10px 12px;
      }

      .section {
        position: relative;
        height: auto !important;
        min-height: 100vh;
        padding: 90px 0 30px;
      }

      .par {
        width: 100%;
        max-width: 320px;
      }

      .image {
        width: 120px;
        height: 120px;
      }

      .ColumnInfo {
        width: min(100%, 100%);
        margin: 16px;
        padding: 16px;
      }

      .Resume {
        height: 420px;
        margin: 0 16px 16px;
      }

      .project-card {
        width: min(100%, 360px);
        height: 220px;
      }

      .projectContainer {
        flex-direction: column;
        gap: 14px;
      }

      .overlay {
        font-size: 12px;
      }

      .modal-content {
        width: 95%;
        height: 85%;
        margin: 8% auto;
      }

      .close {
        top: 8px;
        right: 10px;
      }

      .rowcert {
        gap: 12px;
      }

      .cert {
        width: 130px;
      }
    }








/* DO NOT MESS WITH SECTION */

@layer base, rhythm, layout, components, default, overwrites;

html {

  scroll-snap-type: y mandatory;


  timeline-scope: --section, --main, --site-header;
}


body,
.content {
  background-color: var(--color-background, #F9FAF4);
  width:100%;
}

main {
  view-timeline: --main;
}

.section {

  scroll-snap-align: start;
  scroll-snap-stop: always;


  view-timeline: --section;


  height: 100dvh;
}

.content {

  overflow: hidden;
  position: fixed;
  inset: 0;


  --contrast: 4;
  --blur: 0.5rem;

  animation: blink ease-in-out both;
  animation-timeline: --section;
}

@keyframes blink {
  0%,
  100% {
    filter: blur(var(--blur)) contrast(var(--contrast));
    opacity: 0;
    visibility: hidden;
  }

  50% {
    filter: blur(0) contrast(1);
    opacity: 1;
    visibility: visible;
  }
}


.indicator::before {
  animation: indicate linear both;
  animation-timeline: --main;
  animation-range: contain;
}


@keyframes indicate {
  0% {
    --color-indicator: var(--color-primary);
    transform: translateY(0);
  }

  25% {
    --color-indicator: var(--color-yellow);
  }

  50% {
    --color-indicator: var(--color-secondary);
  }

  75% {
    --color-indicator: var(--color-red);
  }

  100% {
    --color-indicator: var(--color-purple);
    transform: translateY(
      calc(var(--indicator-total-height) - var(--indicator-size))
    );
  }
}



.site-header label:last-of-type {
  view-timeline: --site-header inline;
}

.site-header::after {
  animation: fade-scroll ease-in-out both;
  animation-timeline: --site-header;
  animation-range: entry-crossing;
}

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

  100% {
    opacity: 0;
  }
}


body:has([value="horizontal-scroll"]:checked) .content {
 
  animation: horizontal-scroll ease-in-out both;
  animation-timeline: --section;
}

body:has([value="backwards-scroll"]:checked) .content {
  animation: backwards-scroll ease-in-out both;
  animation-timeline: --section;
}

body:has([value="zoom-scroll"]:checked) .content {
  animation: zoom-scroll ease-in-out both;
  animation-timeline: --section;
}


@keyframes horizontal-scroll {
  0% {
    transform: translate3d(100%, 0%, 0);
  }

  50% {
    transform: none;
  }

  100% {
    transform: translate3d(-100%, 0%, 0);
  }
}


@keyframes backwards-scroll {
  0% {
    transform: translate3d(0%, -100%, 0);
  }

  50% {
    transform: none;
  }

  100% {
    transform: translate3d(0%, 100%, 0);
  }
}


@keyframes zoom-scroll {
  0% {
    filter: blur(5rem);
    transform: scale(0);
    opacity: 0;
    visibility: hidden;
  }

  50% {
    filter: blur(0);
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  100% {
    filter: blur(3rem);
    transform: scale(1.5);
    opacity: 0;
    visibility: hidden;
  }
}