@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&family=Montserrat:wght@400;500;600&display=swap');

:root {
   --body-font: "Montserrat", sans-serif;
   --second-font: "Unbounded", sans-serif;
   --font-semi-bold: 600;
   --font-medium: 500;

   --body-color: #0e0e0e;
   --surface-color: #161616;
   --white-color: #fff;
   --first-color: #247bfd;
   --text-color: #888;
   --text-color-light: #bbb;
   --title-color: #e8e8e8;
   --border-color: rgba(7, 164, 255, 0.15);

   --z-fixed: 100;
   --header-height: 3.5rem;
   --transition: 0.3s ease;
}

body:has(#theme-toggle:checked) {
   --body-color: #f5f5f5;
   --surface-color: #ffffff;
   --white-color: #111;
   --first-color: #1a6fe8;
   --text-color: #555;
   --text-color-light: #333;
   --title-color: #111111;
   --border-color: rgba(7, 100, 210, 0.18);
}

/*Base*/
*, *::before, *::after { 
  box-sizing: border-box; 
  padding: 0; 
  margin: 0; 
}

html { 
  scroll-behavior: smooth; 
}

body {
   font-family: var(--body-font);
   font-size: 1rem;
   background-color: var(--body-color);
   color: var(--text-color);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

button { 
  font-family: var(--body-font);
  outline: none; 
  border: none; 
  cursor: pointer;
}

h1, h2, h3 { 
  color: var(--title-color); 
  font-family: var(--second-font); 
  font-weight: var(--font-semi-bold); 
}

ul { 
  list-style: none; 
}

a { 
  text-decoration: none;
 }

img { 
  display: block; 
  max-width: 100%; 
  height: auto; 
}

/*Layout*/
.container { 
  max-width: 1120px; 
  margin-inline: auto; 
  padding-inline: 1.5rem; 
}
.main { 
  flex: 1; 
  overflow: hidden;
}

/*fill viewport*/
.page-main {
   flex: 1;
   display: flex;
   align-items: center;
   padding-block: calc(var(--header-height) + 2rem) 2rem;
   min-height: 100vh;
}

.page-main .container {
   width: 100%;
}

/*Button*/
.btn {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   background-color: var(--first-color);
   color: #fff;
   font-family: var(--second-font);
   font-size: 0.72rem;
   font-weight: var(--font-semi-bold);
   padding: 0.8rem 1.6rem;
   border-radius: 4px;
   border: 2px solid var(--first-color);
   transition: var(--transition);
   cursor: pointer;
}

.btn:hover { 
  background-color: transparent; 
  color: var(--first-color); 
}

.btn--outline { 
  background-color: transparent; 
  color: var(--first-color); 
}

.btn--outline:hover { 
  background-color: var(--first-color); 
  color: #fff; 
}

/*Theme toggle*/
.theme__toggle {
   font-size: 1.25rem;
   cursor: pointer;
   color: var(--text-color-light);
   display: flex;
   align-items: center;
   transition: color var(--transition);
   user-select: none;
   background: none;
   border: none;
   padding: 0;
   outline: none;
}
.theme__toggle:hover {
   color: var(--first-color);
}


.theme__toggle .ri-sun-line { display: none; }
#theme-toggle:checked ~ * .theme__toggle .ri-moon-line {
   display: none;
}
#theme-toggle:checked ~ * .theme__toggle .ri-sun-line {
   display: block;
}



header {
   position: fixed;
   width: 100%;
   top: 0; left: 0;
   background-color: var(--body-color);
   z-index: var(--z-fixed);
   border-bottom: 1px solid var(--border-color);
}

.nav {
   height: var(--header-height);
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.nav__logo {
   color: var(--white-color);
   font-family: var(--second-font);
   font-weight: var(--font-semi-bold);
   font-size: 1rem;
   transition: color var(--transition);
}
.nav__logo:hover { 
  color: var(--first-color); 
}

.nav__toggle, .nav__close {
   font-size: 1.5rem;
   cursor: pointer;
   color: var(--white-color);
   display: none;
}

.nav__list {
   display: flex;
   column-gap: 2.5rem;
   font-family: var(--second-font);
   font-size: 0.68rem;
}

.nav__link {
   position: relative;
   color: var(--text-color-light);
   font-weight: var(--font-medium);
   transition: color var(--transition);
}
.nav__link:hover, .nav__link.active-link { 
  color: var(--first-color); 
}

.nav__link::after {
   content: '';
   width: 0;
   height: 2px;
   background-color: var(--first-color);
   position: absolute;
   left: 0; bottom: -0.4rem;
   transition: width var(--transition);
}
.nav__link:hover::after, .nav__link.active-link::after { 
  width: 100%; 
}

/*Home*/
.home__container {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-block: calc(var(--header-height) + 2rem) 2rem;
}

.home__content {
   position: relative;
   display: grid;
   grid-template-columns: max-content 1fr;
   column-gap: 5rem;
   align-items: center;
   padding-left: 3.5rem;
}

.home__image {
   width: 260px; height: 260px;
   border-radius: 50%;
   overflow: hidden;
   display: flex; align-items: flex-end; justify-content: center;
   border: 4px solid var(--first-color);
   box-shadow: 0 0 40px rgba(7,164,255,0.15);
   flex-shrink: 0;
}

.home__social {
   position: absolute;
   left: 0; top: 50%;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   row-gap: 1.25rem;
}

.home__link {
   color: var(--text-color);
   font-size: 1.4rem;
   display: flex;
   transition: color var(--transition), transform var(--transition);
}
.home__link:hover { 
  color: var(--first-color); 
  transform: translateY(-3px); 
}

.home__data { 
  display: flex; 
  flex-direction: column; 
  gap: 1rem; 
}

.home__subtitle { 
  color: var(--text-color-light); 
  font-size: 0.95rem;
}
.home__subtitle span { 
  color: var(--first-color); 
  font-weight: var(--font-semi-bold); 
}

.home__title { 
  font-size: 2.5rem; 
  line-height: 1.2; 
}

.home__description { 
  color: var(--text-color); 
  line-height: 1.8; 
  max-width: 400px; 
  font-size: 0.9rem; 
}

/*Heading*/
.page__sub {
   font-family: var(--second-font);
   font-size: 0.65rem;
   color: var(--first-color);
   letter-spacing: 2px;
   text-transform: uppercase;
   margin-bottom: 0.6rem;
   text-align: center;
}

.page__title {
   font-size: clamp(1.75rem, 4vw, 3rem);
   line-height: 1.15;
   margin-bottom: 2.5rem;
   text-align: center;
}
.page__title span { 
  color: var(--first-color); 
}

/*About*/
.about__layout {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.about__body {
   display: flex;
   flex-direction: column;
   gap: 1.1rem;
   max-width: 800px;
}

.about__role { 
  font-size: 1.4rem; 
}

.about__role span { 
  color: var(--first-color); 
}

.about__text { 
  color: var(--text-color); 
  line-height: 1.85; 
  font-size: 0.95rem; 
}

/*Projects*/
.projects__layout {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
}

.projects__layout .page__heading {
   width: 100%;
   max-width: 800px;
}

.projects__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1rem;
   width: 100%;
   max-width: 800px;
}

.project__card {
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
   padding: 1.5rem;
   background-color: var(--surface-color);
   border: 1px solid var(--border-color);
   border-radius: 10px;
   transition: border-color var(--transition), transform var(--transition);
   cursor: pointer;
}
.project__card:hover {
   border-color: var(--first-color);
   transform: translateY(-4px);
}

.project__icon {
   font-size: 1.6rem;
   color: var(--first-color);
}

.project__name {
   font-size: 0.85rem;
   color: var(--title-color);
}

/*Contact*/
.contact__layout {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.contact__form {
   display: flex;
   flex-direction: column;
   gap: 0.85rem;
   max-width: 800px;
}

.contact__row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0.85rem;
}

.contact__field {
   position: relative;
   display: flex;
   align-items: center;
}

.contact__field i {
   position: absolute;
   left: 1rem;
   color: var(--text-color);
   font-size: 1rem;
   pointer-events: none;
}

.contact__input {
   width: 100%;
   background-color: var(--surface-color);
   border: 1px solid var(--border-color);
   border-radius: 8px;
   padding: 0.85rem 1rem 0.85rem 2.7rem;
   color: var(--title-color);
   font-family: var(--body-font);
   font-size: 0.875rem;
   transition: border-color var(--transition);
   outline: none;
}
.contact__input::placeholder {
   color: var(--text-color);
  }
.contact__input:focus { 
  border-color: var(--first-color); 
}

.contact__field:has(textarea) { 
  align-items: flex-start;
}

.contact__field:has(textarea) i { 
  top: 0.9rem;
}

.contact__textarea {
   resize: none;
   height: 130px;
   padding-top: 0.85rem;
}

/*Footer*/
.footer {
   background-color: var(--surface-color);
   border-top: 1px solid var(--border-color);
   padding-block: 1.5rem;
}

.footer__container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
}

.footer__logo { 
  color: var(--first-color); 
  font-family: var(--second-font); 
  font-size: 0.95rem; 
  font-weight: var(--font-semi-bold); 
}

.footer__copy { 
  font-size: 0.8rem; 
  color: var(--text-color);
 }

.footer__social { 
  display: flex; 
  gap: 1rem;
}

.footer__link { 
  color: var(--text-color);
  font-size: 1.2rem;
  transition: color var(--transition), transform var(--transition);
}

.footer__link:hover { 
  color: var(--first-color);
  transform: translateY(-3px);
}

/*Responsive*/
@media screen and (min-width: 1150px) {
   .nav { 
    height: calc(var(--header-height) + 2rem); 
  }
   .home__image { 
    width: 300px; 
    height: 300px; 
  }
   .home__title { 
    font-size: 3rem; 
  }
}

@media screen and (max-width: 1150px) {
   .nav { 
    padding-inline: 1rem; 
   }
   .nav__toggle { 
    display: block; 
   }

   .nav__close { 
    display: block; 
    position: absolute; 
    top: 1rem; 
    right: 1.5rem; 
   }

   .nav__menu {
      position: fixed;
      top: -120%; left: 0;
      width: 100%;
      background-color: var(--body-color);
      padding: 5rem 2rem 4rem;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
      border-radius: 0 0 1.5rem 1.5rem;
      transition: top var(--transition);
   }
   #nav-toggle:checked ~ .nav__menu {
    top: 0; 
  }
   .nav__list { 
    flex-direction: column; row-gap: 1.5rem; 
  }

   .projects__grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
}

@media screen and (max-width: 768px) {
   .page-main { 
    padding-block: calc(var(--header-height) + 1.5rem) 1.5rem; 
    min-height: auto;
   }

   .home__container { 
    min-height: auto; 
    padding-block: calc(var(--header-height) + 2rem) 3rem; 
   }

   .home__content {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      padding-left: 0;
      row-gap: 2rem;
   }
   .home__social {
      position: static; 
      transform: none;
      flex-direction: row; 
      justify-content: center;
      column-gap: 1.5rem; 
      order: 3;
   }
   .home__image { 
    order: 1; 
   }
   .home__data { 
    order: 2; 
    align-items: center; 
   }
   .home__description {
     max-width: 100%; 
    }

   .projects__grid { 
    grid-template-columns: repeat(2, 1fr); 
   }
   .contact__row {
     grid-template-columns: 1fr; 
   }
   .footer__container { 
    flex-direction: column; text-align: center; 
   }
}

@media screen and (max-width: 480px) {
   .projects__grid { 
    grid-template-columns: 1fr; 
  }
}

@media screen and (max-width: 320px) {
   .home__image { 
    width: 200px; 
    height: 200px; 
  }
   .home__title { 
    font-size: 2rem; 
  }
}