@import url("general.css");

/* BASE 375 px */
/* HEADER */
header {
  background-color: var(--grey1);
  height: var(--header-height);
  padding-inline: var(--mobile-side-spacing);
}

header > a {
  overflow: hidden;
  border-radius: 0.8rem;
  aspect-ratio: 1 / 1;
}

header .logo {
  width: 4.2rem;
  transform: scale(1.5);
}

header .logo-link {
  transition: transform 0.5s ease-in-out;
  transform: rotateY(0);
}

header .logo-link:hover {
  transform: rotateY(180deg);
}

header .nav-container {
  position: absolute;
  top: var(--header-height);
  left: 0;
  width: 100%;
  bottom: 0;
  overflow: hidden;
}

header nav {
  position: absolute;
  bottom: calc(100vh - var(--header-height));
  left: 0;
  width: 100%;
  top: calc(-100vh + var(--header-height));
  padding-top: 4.2rem;
  transition: transform 0.5s ease-in-out;
  background-color: #171717;
  z-index: 10;
}

header nav.active {
  transform: translateY(100%);
}

header nav ul {
  gap: 3rem;
}

header nav ul li {
  width: 100%;
  text-align: center;
  padding: 0.8rem 0;
}

header nav a {
  transition: var(--transition-color-ease), var(--transition-bg-ease);
  font-size: 3rem;
  width: 100%;
}

header nav ul li:hover a {
  background-color: rgba(255, 255, 255, 0.615);
  color: #171717;
}

header nav ul li:last-child {
  background-color: white;
}

header nav ul li:last-child a {
  color: #171717;
}

header .nav-icon {
  font-size: 4.2rem;
  color: rgba(255, 255, 255, 0.748);
}

/* SOCIAL LINKS (ADDITIONAL CONTAINER) */
.nav-other {
  margin-top: 6rem;
  color: #fff;
  gap: 0.8rem;
}

.nav-other p:first-child {
  font-size: 1.8rem;
  font-family: var(--p-family);
  font-weight: var(--light);
}

.nav-other p:nth-child(2) {
  font-size: 2rem;
  font-family: var(--h-family);
  text-align: center;
}

.nav-other .social-links {
  gap: 3rem;
  margin-top: 1.8rem;
  i {
    font-size: 4rem;
  }
}

/* HERO */
/* .hero-s,
.hero-s * {
} */

.hero-s {
  height: calc(100vh - var(--header-height));
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.hero-s video {
  height: calc(110vh - var(--header-height));
  position: absolute;
  bottom: 0;
  z-index: -10;
}

.hero-s .overlay {
  width: 150%;
  height: 350px;
  background-color: rgba(0, 0, 0, 0.678);
  position: absolute;
  bottom: 0;
  transform: translate(-50px, 50%) rotate(15deg);
  z-index: -9;
}

.hero-s .container {
  align-items: start;
  gap: 1.2rem;
  width: 100%;
  padding-inline: var(--mobile-side-spacing);
}

.hero-s .text {
  font-family: var(--h-family);
  font-size: 1.8rem;
}

/* scroller */
.scroller {
  width: 100%;
}

.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent 0%,
    white 30%,
    white 70%,
    transparent 100%
  );

  mask: linear-gradient(
    90deg,
    transparent 0%,
    white 30%,
    white 70%,
    transparent 100%
  );
}

.scroller[data-animated="true"] .inner-scroller {
  animation: scroll 10s linear infinite;
  width: max-content;
}

.scroller[data-animated="true"] .inner-scroller:hover {
  animation-play-state: paused;
}

.inner-scroller {
  display: flex;
  div {
    white-space: nowrap;
    font-size: 1.6rem;
    font-family: var(--h-family);
    font-weight: var(--light);
  }
}

.hero-s .links-container {
  width: 100%;
  margin-bottom: 3rem;
  z-index: 10;
}

.hero-s .cta-btn {
  font-size: 1.8rem;
  background-color: #171717;
  padding: 0.8rem 1.8rem;
  transition: var(--transition-transform-ease), box-shadow 0.3s ease-in-out;
}

.hero-s .cta-btn:hover {
  transform: scale(110%);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.hero-s .social-links {
  font-size: 2.6rem;
  gap: 2.4rem;
}

.hero-s .social-links i {
  transition: var(--transition-transform-ease), text-shadow 0.3s ease-in-out;
  background-color: transparent;
}

.hero-s .social-links i:hover {
  transform: scale(110%);
  text-shadow: rgba(0, 0, 0, 0.5) 1.95px 1.95px 2.6px;
}

/* ABOUT ME */
.about-me-s {
  gap: 4.2rem;
  padding: 6rem var(--mobile-side-spacing);
}

.about-me-s p {
  font-size: var(--p-size);
  text-align: justify;
  line-height: 1.5;
  font-weight: var(--light);
}

/* SKILLS */
.skills-s {
  background-color: var(--white-bg);
  color: var(--black);
  padding: 6rem var(--mobile-side-spacing);
  gap: 4.2rem;
}

.skills-s .container {
  gap: 6rem;
}

.skills-s > h1 {
  border-color: var(--black);
}
.skills-s .value-box {
  position: relative;
  z-index: 5;
}

.skills-s i {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(0, -50%);
  font-size: 16rem;
  color: rgb(228, 227, 227);
  z-index: 0;
}

.skills-s .value-box h2 {
  font-size: 1.8rem;
  margin-bottom: 1.8rem;
  position: relative;
}

.skills-s .value-box p {
  font-size: 1.6rem;
  position: relative;
  text-align: justify;
}

/* TECHNOLOGIES */
.tech-s {
  padding: 12rem var(--mobile-side-spacing);
  background-color: var(--black);
}

.tech-s .inner-scroller img {
  height: 6rem;
}

.tech-s .scroller[data-animated="true"] .inner-scroller {
  animation: scroll-right 10s linear infinite;
  width: max-content;
  gap: 3rem;
  background-color: var(--white-bg);
  padding-block: 1.2rem;
}

.tech-s .scroller[data-animated="true"] .inner-scroller:hover {
  animation-play-state: paused;
}

.tech-s .scroller[data-animated="true"] h2 {
  color: var(--black);
  font-size: 1rem;
  margin-top: 1.2rem;
  text-align: center;
}

/* PROJECTS-SECTION */
.projects-s {
  padding: 6rem var(--mobile-side-spacing);
  position: relative;
}

.projects-s .h-primary {
  justify-self: center;
}

.bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url(../assets/projects.png);
  filter: blur(1px);
}

.bg-overlay {
  position: absolute;
  inset: 0;
  background-color: #1717175a;
  z-index: -1;
}

/* dropdown */
.dropdown {
  display: inline-block;
  width: 100%;
}

.dropdown-toggle {
  color: white;
  font-family: var(--p-family);
  background-color: rgba(0, 0, 0, 0.587);
  font-size: 3rem;
  padding: 0.8rem 1.8rem;
  transition: var(--transition-bg-ease);
}

.dropdown-toggle div {
  font-weight: var(--bold);
}

.dropdown-toggle:hover {
  cursor: pointer;
  background-color: black;
}

.dropdown-toggle i {
  transform: rotate(180deg);
  transition: var(--transition-transform-ease);
}

.dropdown-toggle i.active {
  transform: rotate(0deg);
}

.dropdown-menu {
  width: 100%;
  background-color: #171717;
  display: none;
}

.dropdown-menu li {
  font-size: 2.4rem;
  padding: 0.8rem 1.8rem;
  color: rgb(139, 139, 139);
  transition: var(--transition-color-ease);
}

.dropdown-menu li:hover {
  cursor: pointer;
  color: white;
}

/* websites container*/
.projects-container {
  padding-block: var(--mobile-side-spacing);
  padding-block: 6rem;
  gap: 3rem;
}

.project-box {
  width: 100%;
  background-color: #171717cd;
  gap: 1.8rem;
  padding: 1.2rem;
}

.img-container {
  position: relative;
}

.project-box .project-img {
  width: 100%;
  object-fit: cover;
}

.project-box .overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, #e6db7433, #31a4e233);
}

.project-box .project-title {
  font-size: 2.4rem;
}

.project-box .project-text {
  font-size: 1.8rem;
  font-weight: var(--light);
}

.project-box a {
  font-size: 1.8rem;
  text-align: center;
  background-color: white;
  color: #171717;
  padding: 0.8rem 2.4rem;
}

.project-box .git-btn {
  background-color: var(--yellow);
}

.project-box .git-btn:hover {
  background-color: var(--yellow-dark);
}

.project-box .git-btn,
.project-box .site-btn {
  transition: var(--transition-bg-ease);
}

.project-box .site-btn {
  background-color: #31a4e2;
}

.project-box .site-btn:hover {
  background-color: #298cc1;
}

/* CONTACTS SECTION */
.contacts-s {
  background-color: var(--white-bg);
  padding: 6rem var(--mobile-side-spacing);
  color: var(--black);
  position: relative;
  overflow: hidden;
}

.contacts-s .contacts-container {
  gap: 1.8rem;
  margin-bottom: 3rem;
  background-color: white;
  width: 100%;
  padding-block: 2.4rem;
  z-index: 10;
}

.contacts-s .contacts-container a {
  color: var(--blue);
  font-family: var(--h-family);
  font-size: 1.8rem;
}

.contacts-container a {
  transition: var(--transition-color-ease);
}

.contacts-container a:hover {
  color: var(--blue-dark);
}

.contacts-s .social-links {
  width: 100%;
  justify-content: space-evenly;
  margin-top: 2.4rem;
}

.contacts-s .social-links i {
  font-size: 3.4rem;
}

.contacts-circle-el {
  position: absolute;
  left: 15%;
  top: -20%;
  width: 70rem;
  height: 70rem;
  transform: rotate(45deg);
  background-color: rgba(0, 98, 255, 0.104);
}

.contacts-s h1 {
  border-color: var(--blue);
  color: var(--blue);
}

.contacts-s form {
  width: 100%;
  align-items: stretch;
  gap: 4.2rem;
}

.input-box {
  position: relative;
}

.contacts-s label {
  font-family: var(--p-family);
  font-size: 2.4rem;
  color: gray;
  left: 1.8rem;
  top: 1.8rem;
  position: absolute;
  pointer-events: none;
  transition: all 0.5s;
}

.contacts-s input,
.contacts-s textarea {
  font-family: var(--p-family);
  border: none;
  padding: 1.8rem;
  font-size: 2.4rem;
  width: 100%;
  transition: outline 0.3s ease-in 0.2s;
}

.contacts-s input:focus + label,
.contacts-s textarea:focus + label,
.contacts-s input:not(:placeholder-shown) + label,
.contacts-s textarea:not(:placeholder-shown) + label {
  font-size: 1.8rem;
  top: -2.4rem;
  color: var(--black);
  font-weight: 600;
}

.contacts-s input:focus,
.contacts-s textarea:focus {
  outline: none;
}

.contacts-s textarea:not(:placeholder-shown),
.contacts-s input:not(:placeholder-shown),
.contacts-s textarea:focus,
.contacts-s input:focus {
  outline: var(--blue) 4px solid;
}

.contacts-s form button {
  background-color: var(--blue);
  color: var(--white-bg);
  font-family: var(--h-family);
  font-size: 2.4rem;
  transition: var(--transition-bg-ease);
}

.contacts-s form button:hover {
  cursor: pointer;
  background-color: var(--blue-dark);
}

footer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  align-items: center;
  padding: 3rem var(--mobile-side-spacing);
  row-gap: 6rem;
}

/* footer .go-to-top {
  grid-column: 1/3;
  text-align: center;
}

footer .go-to-top h1 {
  display: inline-block;
  font-size: 1.8rem;
  padding-top: 1.2rem;
  border-top: solid 4px var(--white-bg);
  letter-spacing: 5px;
} */

.go-to-top {
  position: absolute;
  top: 100vh;
  left: 50%;
  color: var(--black);
  -webkit-text-stroke: 0.5px rgb(28, 238, 0);
  padding: 10px;
  border: none;
  cursor: pointer;
  z-index: 100;
  transition: top 0.5s ease-in-out;
  animation: float 3s ease-in-out infinite;
  font-size: 1.2rem;
}

.go-to-top i {
  font-size: 3rem;
}

footer ul {
  font-size: 1.8rem;
  gap: 1.8rem;
  width: 100%;
  a {
    text-transform: capitalize;
    font-weight: 700;
  }
}

footer .social-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2.4rem;
  a {
    color: #ffffffaa;
  }
}

footer .social-links i {
  font-size: 6rem;
  aspect-ratio: 1/1;
  transition: var(--transition-color-ease), var(--transition-transform-ease);
}

footer .social-links i:hover {
  color: var(--white-bg);
  transform: scale(110%);
}

footer > p {
  display: block;
  text-align: center;
  font-weight: var(--light);
  grid-column: 1/3;
  font-size: 1.4rem;
}

/* MEDIA QUERIES */
@media screen and (min-width: 768px) {
  :root {
    --mobile-side-spacing: calc((100vw - 700px) * 0.5);
  }

  .h-primary {
    margin-bottom: 9rem;
  }

  /* HEADER */
  header {
    justify-content: space-between;
  }

  header nav {
    position: static;
    transform: initial;
    padding-top: 0;
    background-color: transparent;
    width: auto;
  }

  header .nav-container {
    position: static;
  }

  header nav ul {
    flex-direction: row !important;
    gap: 2.4rem;
    a {
      font-size: 1.8rem;
      white-space: nowrap;
      padding: 0.8rem 1.8rem;
    }
  }

  header .nav-icon,
  header .nav-other {
    display: none;
  }

  /* HERO make change acording to design */
  .hero-s {
    flex-direction: row;
    color: var(--black);
    padding-inline: var(--mobile-side-spacing);
    justify-content: space-between;
  }

  .hero-s .main-text-box {
    width: 50%;
    align-items: center;
    .container {
      padding: 0;
    }
  }

  .hero-s video {
    position: static;
    display: inline-block;
    height: 100%;
  }

  .hero-s .overlay {
    background-color: var(--white-bg);
    left: -10vw;
    top: 50%;
    width: 110vw;
    height: 150vw;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%) rotate(15deg);
  }

  .hero-s .scroller {
    width: 70%;
    transition: var(--transition-color-ease), var(--transition-bg-ease),
      var(--transition-transform-ease);
  }

  .hero-s .scroller:hover {
    cursor: pointer;
    color: var(--white-bg);
    background-color: var(--black);
    transform: scale(120%);
  }

  .hero-s .links-container {
    margin-top: 6rem;
  }

  .hero-s .links-container {
    width: auto;
    flex-direction: column;
    gap: 2.4rem;
    .social-links a {
      color: var(--black);
    }
  }
  /* TECH SECTION */
  .tech-s .inner-scroller img {
    height: 12rem;
  }

  .tech-s .inner-scroller:hover {
    cursor: pointer;
  }

  .tech-s .scroller[data-animated="true"] h2 {
    font-size: 1.8rem;
    margin-top: 1.8rem;
  }

  /* PROJECTS */
  .projects-s .projects-container {
    grid-template-columns: repeat(2, 1fr);
    justify-content: stretch;
    align-items: stretch;
    /* ALIgn BUTTONS AND OTHER ELEMENTS for same lever represenation */
  }

  .projects-s .projects-container .project-box {
    justify-content: space-between;
    img {
      aspect-ratio: 16 / 8;
    }
    p {
      height: 12rem;
    }
    .project-title {
      height: 6rem;
    }
  }
}

@media screen and (min-width: 1024px) {
  :root {
    --mobile-side-spacing: calc((100vw - 700px) * 0.5);
  }

  /* SKILS */
  .skills-s .container {
    flex-direction: row;
    align-items: start;
    gap: 3rem;
  }

  /* TECH */
  .tech-s .inner-scroller img {
    height: 25vh;
  }
}

@media screen and (min-width: 1440px) {
  :root {
    --mobile-side-spacing: calc((100vw - 1000px) * 0.5);
  }

  /* SKILS */
  .skills-s .container {
    flex-direction: row;
    align-items: start;
    gap: 3rem;
  }

  /* TECH */
  .tech-s .inner-scroller img {
    height: 25vh;
  }
}

/* BACKLOG */
/* also scroll up first so if user clicks on hamburger lower then then top page*/
/* ADD filter icon to better recognition */
/* Add hover effects for all interactive elements */

/* COMPLETED */
/* MOBILE NAV BUG: when screen is square it moves nav to view (POSIBLE SOLUTION: CREATE PARENT CONTAINER, make overflow of container: hidden)*/
/* TO FIX mobile nav make hwight responsive. Issue: children element keep static height and goes aout of parent el */