* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}
:root {
  --color-1: #0d1b2a;
  --color-2: #1b263b;
  --color-2-75: #1b263bbf;
  --color-2-50: #1b263b80;
  --color-2-25: #1b263b40;
  --color-3: #415a77;
  --color-3-50: #415a7780;
  --color-3-25: #415a7740;
  --color-4: #778da9;
  --color-w-1: #f8f9fa;
  --color-w-1-75: #f8f9fabf;
  --color-w-1-50: #f8f9fa80;
  --color-w-1-25: #f8f9fa40;
  --color-w-2: #e9ecef;
  --color-w-3: #dee2e6;
  --color-w-4: #ced4da;
  --color-w-5: #adb5bd;
  --collor-accent: var(--color-4);
  --basic-border-style: 0.1rem solid var(--color-w-4);
  --basic-border-radius: 0.25rem;
  --basic-transition: 0.3s;
  --medium-border-radius: 0.75rem;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Nunito', sans-serif;
  color: var(--color-1);
  background-color: var(--color-w-1);
  transition: var(--basic-transition);
}
li::marker {
  color: var(--color-1);
}
a {
  text-decoration: none;
  color: inherit;
}
p {
  font-size: 1.25rem;
  color: var(--color-2);
}
h1,
h2 {
  font-weight: 800;
}
h1 {
  font-size: 3rem;
}
.container {
  padding: 8rem 2rem;
  padding-left: 7.125rem;
}
.wrapper {
  max-width: 80rem;
  width: 100%;
  margin-inline: auto;
}
.button {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--color-3);
  color: #fff;
  font-weight: 500;
  border-radius: var(--basic-border-radius);
  cursor: pointer;
  transition: var(--basic-transition);
  font-size: 1rem;
}
.button:hover {
  background-color: var(--color-2);
}
.button-disabled {
  background-color: var(--color-w-5);
  color: var(--color-w-1);
  cursor: not-allowed;
}
.button-disabled:hover {
  background-color: var(--color-w-5);
}
.icon-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: 1rem;
  justify-items: center;
}
.icon {
  width: 5rem;
  height: 4rem;
  filter: grayscale(100%);
  transition: var(--basic-transition);
  object-fit: contain;
}
.icon:hover {
  filter: grayscale(0%);
}
#home {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100svh;
  height: -webkit-fill-available-;
  gap: 1rem;
}
#home::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5.125rem;
  width: 20rem;
  height: 20rem;
  z-index: -1;
  background-image: url('assets/imgs/blob.svg');
  background-size: cover;
  background-position: center;
}
#home::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20rem;
  height: 20rem;
  z-index: -1;
  background-image: url('assets/imgs/blob-2.svg');
  background-size: cover;
  background-position: center;
}
#home img {
  width: 12.5rem;
  height: 12.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}
#about {
  background-color: var(--color-w-2);
  display: grid;
  row-gap: 4rem;
  transition: var(--basic-transition);
}
#projects {
  background-color: var(--color-w-2);
  transition: var(--basic-transition);
}
#contact {
  background-color: var(--color-w-2);
  transition: var(--basic-transition);
}
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
}
.project {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: var(--medium-border-radius);
  border: 0.25rem solid var(--color-w-3);
  transition: var(--basic-transition);
  overflow: hidden;
  background-color: var(--color-w-1);
  height: fit-content;
}
.project img {
  filter: grayscale(100%);
  transition: var(--basic-transition);
}
.project:hover {
  border-color: var(--collor-accent);
}
.project:hover img {
  filter: grayscale(0%);
}
.project-text {
  padding: 1rem;
  display: grid;
  row-gap: 1rem;
}
.project-text .icon-wrapper {
  grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
}
.action-wrapper {
  display: flex;
  gap: 0.5rem;
}
.project-text .icon {
  width: 2rem;
  height: 2rem;
  aspect-ratio: 1;
}
.about {
  background-color: var(--color-w-2);
  transition: var(--basic-transition);
  max-width: 50rem;
  margin-inline: auto;
}
.about-image {
  display: block;
  background-color: var(--color-4);
  border-radius: 50%;
  width: 17.5rem;
  height: 17.5rem;
  aspect-ratio: 1;
  overflow: hidden;
  float: left;
  margin-right: 3rem;
  margin-bottom: 2rem;
}
.about-image img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(50%) brightness(105%);
}
.about .about-text-wrapper p {
  text-align: justify;
  margin-bottom: 1.25rem;
}
.timeline-wrapper {
  display: grid;
  row-gap: 2rem;
  width: 100%;
  padding-left: 2rem;
  position: relative;
  overflow: hidden;
}
.timeline-wrapper::before {
  content: '';
  display: block;
  width: 0.125rem;
  height: 100%;
  left: calc(1rem - 0.125rem / 2);
  background-color: var(--color-3-25);
  position: absolute;
  margin-block-start: 1rem;
  transition: var(--basic-transition);
}
.timeline {
  line-height: 2rem;
  position: relative;
}
.timeline p {
  color: var(--color-3);
}
.sub-title::before {
  content: '';
  display: inline-block;
  position: absolute;
  width: 1rem;
  height: 1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  top: 0;
  left: -1.5rem;
  background-color: var(--collor-accent);
  margin-block: 0.5rem 0;
}
header nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-w-1-25);
  z-index: -1;
  backdrop-filter: blur(10rem);
  transition: var(--basic-transition);
}
header nav {
  border-right: 0.1rem solid var(--color-w-5);
  transition: var(--basic-transition);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 0 1rem;
  margin-inline: auto;
  height: 100%;
}
header nav a {
  display: flex;
  padding: 0.5rem;
  border-radius: var(--basic-border-radius);
  border: var(--basic-border-style);
  border-color: var(--color-w-5);
  transition: var(--basic-transition);
}
header nav a:hover {
  background-color: var(--color-2-25);
}
header nav a.active {
  background-color: var(--color-2);
  border-color: var(--color-2);
}
header nav a.active img {
  filter: invert(100%);
}
header nav a img {
  width: 2rem;
  height: 2rem;
  aspect-ratio: 1;
}
.hero-text {
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-items: start;
  text-align: center;
}
.hero-button {
  margin-block-start: 1rem;
  padding: 1rem;
}
.code-text {
  font-family: 'Jetbrains Mono', monospace;
}
.tag {
  color: var(--collor-accent);
}
h1.title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 2.5rem;
}
h2.title {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}
.sub-title {
  font-size: 1.5rem;
  font-weight: 700;
}
.sub-sub-title {
  color: var(--color-3);
}
.italic {
  font-style: italic;
}
.list {
  margin-left: 1.5rem;
}
.skills-wrapper {
  display: grid;
  row-gap: 2rem;
}
.certifications .button {
  padding: 0.25rem 1rem;
  display: flex;
  align-items: center;
  width: fit-content;
  gap: 1rem;
}
.certifications .button img {
  filter: invert(100%);
}
.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.contact-info {
  display: grid;
  row-gap: 2rem;
}
.contact {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.contact .contact-logo {
  width: 2rem;
  height: 2rem;
  aspect-ratio: 1;
  transition: var(--basic-transition);
}
.contact-form {
  display: grid;
  column-gap: 0.5rem;
  row-gap: 1rem;
  grid-template-areas: 'name email' 'message message' 'submit submit';
  grid-template-rows: 3rem auto 3rem;
}
.contact-form input,
.contact-form textarea {
  padding: 1rem;
  border-radius: var(--basic-border-radius);
  border: var(--basic-border-style);
  border-color: var(--color-w-5);
  outline: none;
  color: var(--color-1);
  outline: 0.25rem solid transparent;
  transition: var(--basic-transition);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--color-3);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline-color: var(--color-3-25);
}
.contact-form input[type='text'] {
  grid-area: name;
}
.contact-form input[type='email'] {
  grid-area: email;
}
.contact-form textarea {
  grid-area: message;
  resize: vertical;
}
.contact-form button {
  grid-area: submit;
  outline: 0.25rem solid transparent;
}
.contact-form button:focus {
  outline-color: var(--color-3-50);
}
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-w-2);
  flex-direction: column;
  transition: var(--basic-transition);
}
footer .container {
  width: 100%;
  padding-block: 4rem;
}
footer .wrapper {
  width: 100%;
}
.footer-wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
}
.footer-wrapper .links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  row-gap: 2rem;
  column-gap: 4rem;
}
.footer-wrapper .copyright {
  display: flex;
  justify-content: end;
  align-items: end;
}
.footer-wrapper .links > * {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-wrapper .links a {
  font-size: 1.25rem;
  color: var(--color-4);
  width: fit-content;
  cursor: pointer;
  transition: var(--basic-transition);
}
.footer-wrapper .links a:hover {
  color: var(--color-1);
}
.copyright {
  display: grid;
  place-content: end;
}
.dark {
  background-color: var(--color-2);
}
.dark .hero-text h1,
.dark h1.title,
.dark h2.title,
.dark .sub-title,
.dark li::marker {
  color: var(--color-w-1);
}
.dark p {
  color: var(--color-w-5);
}
.dark #about,
.dark #projects,
.dark #contact,
.dark footer {
  background-color: var(--color-1);
}
.dark .about-image img {
  filter: drop-shadow(0px -2px 0px white) drop-shadow(0px 2px 0px white) drop-shadow(-2px 0px 0px white)
    drop-shadow(2px 0px 0px white) grayscale(20%) brightness(105%);
}
.dark .button {
  background-color: var(--color-4);
  color: var(--color-1);
}
.dark .button-disabled {
  background-color: var(--color-3);
  color: var(--color-1);
}
.dark .button:hover {
  background-color: var(--color-3);
}
.dark .icon-dark {
  filter: invert(100%);
}
.dark .footer-wrapper .links a:hover {
  color: var(--color-w-4);
}
.dark .timeline-wrapper::before {
  background-color: var(--color-3-50);
}
.dark .timeline p {
  color: var(--color-4);
}
.dark .project {
  background-color: var(--color-1);
  border-color: var(--color-3-50);
}
.dark .project:hover {
  border-color: var(--color-3);
}
.dark .certifications .button img {
  filter: invert(0%);
}
.dark .contact-logo {
  filter: invert(100%);
}
.dark .contact-form input,
.dark .contact-form textarea {
  color: var(--color-w-1);
  background-color: var(--color-2);
  border-color: var(--color-4);
}
.dark .contact-form input::placeholder,
.dark .contact-form textarea::placeholder {
  color: var(--color-w-5);
}
.dark header nav::before {
  background-color: var(--color-2-25);
}
.dark header nav,
.dark header nav a {
  border-color: var(--color-3);
}
.dark header nav a:hover {
  background-color: var(--color-3-50);
}
.dark header nav img {
  filter: invert(100%);
}
.dark header nav a.active {
  background-color: var(--color-3-50);
  border-color: var(--color-3);
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}