@import url('https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&display=swap');

:root{
  --color-primary: #4151ea;
  --color-primary-accent: #242f9a;
  --color-secondary: #EBC542;
  --color-light: #EDEFFF;
  --color-dark: #2B2B2B;

  --color-light-purplish-blue: #5B63AB;
  --color-dark-purplish-blue: #2E2B4B;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Reddit Mono", monospace;
}
body{
  background: var(--color-primary);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-accent) 100%);
}

.section-1{
  height: 100dvh;
}

.left-home img{
  height: 350px;
  width: 275px;
  object-fit: cover;
  border-radius: 42px;
}

.right-home .title h1, .right-home .title h3{
  color: var(--color-light);
}
.right-home .title h1{
  font-weight: 600;
}
.right-home .title h3{
  font-weight: 400;
}

.right-home .button .project-btn{
  background-color: var(--color-secondary);
  color: var(--color-dark);
  font-weight: 800;
  text-decoration: none;
  border: 2px solid var(--color-dark);
  border-radius: 16px;

  &:hover{
    background-color: rgba(206, 174, 60, 1);
  }

  &:active{
    background-color: rgba(206, 174, 60, 0.9);
    
  }
}
.right-home .button .certificate-btn{
  background-color: var(--color-light-purplish-blue);
  color: var(--color-light);
  font-weight: 800;
  text-decoration: none;
  border: 2px solid var(--color-light);
  border-radius: 16px;

  
  &:hover{
    background-color: rgb(78, 86, 153, 1);
  }

  &:active{
    background-color: rgb(78, 86, 153, 0.8);
  }
}

.right-home .contact-icons i{
  color: var(--color-light);

  &:hover{
    color: #edefffd5;
  }
}








.section-2{
  height: 50dvh;
  background-color: var(--color-light);
}
.section-2 h2{
  color: var(--color-primary);
}


@keyframes slider {
  0%{
    transform: translateX(0%);
  }
  100%{
    transform: translateX(-100%);
  }
}

.skills{
  overflow: hidden;
  white-space: nowrap;
  
}
.skills:hover{
  animation-play-state: paused;
}


.skills:before, .skills::after{
  position: absolute;
  top: 0;
  width: 300px;
  height: 100%;
  content: "";
  z-index: 2;
}
.skills:before{
  left: 0;
  background: linear-gradient(90deg, var(--color-light) 0%,rgba(255, 255, 255, 0) 100%);
}
.skills:after{
  right: 0;
  background: linear-gradient(270deg, var(--color-light) 0%,rgba(255, 255, 255, 0) 100%);
}

.skills-slide{
  display: inline-block;
  animation: slider 15s infinite linear;
}
.skills-slide img{
  height: 100px;
  padding: 0 30px;
}









.section-3 h2{
  color: var(--color-light);
}
.about-content{
  width: 50%;
  background-color: var(--color-dark-purplish-blue);
  margin: 0 auto;
}
.about-text p{
  color: var(--color-light);
  text-align: justify;
}
.about-owner img{
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
}
.owner-name{
  font-weight: 800;
}
.owner-occupation{
  font-weight: 300;
}



footer{
  height: 50px;
  background-color: var(--color-light);
}