:root {
  --yellow: #f5c32c;
  --orange: #f2a222;
  --orangee: #fca61f;
  --black: #242d49;
  --gray: #788097;
  --blueCard: #ddf8fe;
  --purple: rgb(238 210 255);
  --boxShadow: 0px 19px 60px rgb(0 0 0 / 8%);
  --orangeCard: rgba(252, 166, 31, 0.45);
  --smboxShadow: -79px 51px 60px rgba(0, 0, 0, 0.08);
}

* {
  padding: 0;
  margin: 0;
  transition: 0.3s;
  font-family: "Gill Sans", "Gill Sans MT", "Trebuchet MS", sans-serif;
}
body {
  color: var(--black);
  /* color: #fff;
    background-color: var(--black); */
}

/* ------------toggle-switch-------------- */
.toggle-switch {
  position: relative;
  width: 200px;
}
.dark-mode {
  color: #fff;
  background-color: var(--black);
}

label {
  position: absolute;
  width: 32%;
  height: 32px;
  background-color: white;
  border: 2px solid var(--yellow);
  border-radius: 50px;
  cursor: pointer;
}

input {
  position: absolute;
  display: none;
}

.slider {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  transition: 0.3s;
}

input:checked ~ .slider {
  background-color: var(--black);
}

.slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 28px -4px 0px 0px var(--yellow);
  background-color: var(--black);
  transition: 0.3s;
}

input:checked ~ .slider::before {
  transform: translateX(26px);
  background-color: var(--yellow);
  box-shadow: none;
}

/* ----------navbar------------------ */
.nav-list {
  width: 100vw;
  height: 10%;
  margin: auto;
}
nav ul {
  list-style: none;
  display: flex;
  /* justify-content: space-around; */
  align-items: center;
  /* padding: 15px; */
}

nav ul .left,
nav ul .right {
  display: flex;
  /* justify-content: space-around; */
  align-items: center;
  padding: 15px;
}
nav ul .left {
  flex: 2;
  align-items: flex-start;
}
nav ul .right {
  margin-left: 250px;
  flex: 8;
  align-items: flex-end;
}
nav ul li {
  text-decoration: none;
  margin-left: 16px;
}
nav ul li a {
  text-decoration: none;
  padding: 4px 10px;
  color: black;
  font-size: 22px;
  margin-right: 5px;
}
nav ul li a:hover {
  color: var(--yellow);
}

.logo a {
  text-decoration: none;
  outline: none;
  font-size: 36px;
  color: #242d49;
  padding: 30px;
  font-weight: bold;
}

/* ------------------------Home--------------------------------- */
#home {
  display: flex;
  height: 100vh;
  width: 100vw;
  margin-top: 54px;
}
.home-left {
  flex: 4;
  padding: 24px;
  margin-top: 90px;
}
.home-right {
  flex: 5;
  position: relative;
  top: 80px;
  right: 150px;
}
#vector1 {
  z-index: -2;
  width: 450px;
  position: absolute;
  right: 50px;
  filter: drop-shadow(34px 34px 24px rgba(238, 210, 255, 0.7));
}
#vector2 {
  z-index: -5;
  width: 530px;
  position: absolute;
  right: 0;
  filter: drop-shadow(-34px -34px 24px rgba(245, 195, 44, 0.5));
}
#me-coding {
  width: 320px;
  height: 420px;
  position: absolute;
  right: 120px;
}
#glasses-rot {
  position: absolute;
  top: -100px;
}
.card {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: 2px solid var(--yellow);
  width: 25%;
  height: 100px;
  background-color: #fff;
  border-radius: 18px;
  color: var(--black);
}
.card img {
  width: 60px;
  height: 60px;
}
.card-one {
  position: absolute;
  top: 320px;
  left: 200px;
  filter: drop-shadow(-35px 35px 55px rgba(0, 128, 128, 0.5));
}
.card-two {
  /* z-index: 50; */
  position: absolute;
  top: -50px;
  left: 650px;
  filter: drop-shadow(35px -35px 35px var(--purple));
}

/* ------------services------------------ */
#services {
  height: 100vh;
  /* width: 100vw; */
  margin-top: 14px;
  padding: 64px;
  display: flex;
}
/* .services-left{
    filter:drop-shadow(-35px 35px 75px rgb(154, 2, 248));
  } */
.services-card {
  border: 7px solid rgba(255, 165, 0, 0.3);
  width: 220px;
  height: 200px;
  text-align: center;
}
.services-card img {
  width: 100px;
}
.web {
  position: relative;
  left: 450px;
  top: 0px;
  filter: drop-shadow(35px -35px 65px rgb(154, 2, 248));
}
.video {
  position: relative;
  left: 150px;
  top: -28px;
  filter: drop-shadow(-65px -65px 65px rgba(0, 128, 128, 0.5));
}
.photo {
  position: relative;
  left: 450px;
  top: -120px;
  filter: drop-shadow(-85px 85px 65px rgba(0, 128, 128, 0.5));
  /* bottom: 70px; */
}

/* -------portfolio--------- */
#portfolio {
  height: 100vh;
  width: 100vw;
  text-align: center;
}
.projects {
  margin: 60px 20px 60px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(-85px 85px 65px rgba(0, 128, 128, 0.1));
}
.projects img {
  height: 350px;
  width: 370px;
  margin: 20px;
  border-radius: 24px;
  filter: drop-shadow(-10px 10px 15px rgba(36, 45, 73, 0.6));
}
.projects img:hover {
  scale: 1.1;
  cursor: pointer;
}

/* -------------About---------------- */
#about {
  height: 100vh;
  /* width: 100vw; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  margin-top: 64px;
}
.skills {
  margin-top: 30px;
  font-size: 28px;
  display: flex;
  justify-content: center;
  /* align-items: center; */
}
.skills ul {
  /* list-style: none; */
  margin: 24px 34px;
}
.skills ul li {
  font-size: 24px;
  margin: 14px;
  filter: drop-shadow(25px 25px 35px rgba(36, 45, 73, 0.6));
}
.shadow {
  filter: drop-shadow(35px 35px 45px var(--yellow));
}

/* -----contact----------- */
#contact {
  height: 100vh;
  width: 100vw;
  /* margin-top: 84px; */
}
.contact-div {
  /* height: 100vh; */

  display: flex;
  justify-content: space-around;
  align-items: center;
}
.contact-left {
  margin: 30px;
}
.contact-right form {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.contact-right form textarea {
  width: 450px;
  height: 24px;
  padding: 12px;
  margin: 16px;
  font-size: 18px;
  border: 3px solid var(--orangee);
  border-radius: 24px;
}
.contact-right form textarea:active {
  border: 3px solid var(--orangee);
}
.button {
  padding: 12px;
  border-radius: 24px;
  border: none;
  color: #fff;
  background-color: var(--orangee);
  width: 100px;
  font-size: 18px;
  box-shadow: inset 15px 15px 25px var(--yellow);
  margin: 6px;
  cursor: pointer;
}

/* ---------------footer------------ */
.footer-design img {
  height: 350px;
  width: 100%;
}
.footer-txt {
  display: block;
  position: relative;
  bottom: 160px;
  text-align: center;
}

/* --------------primary---------- */
.socials-div {
  position: relative;
  left: -34px;
  display: flex;
}
.socials {
  width: 60px;
  height: 60px;
  color: var(--orange);
  font-size: 64px;
  margin: 16px;
  filter: drop-shadow(14px 14px 48px var(--yellow));
}
.fa-instagram {
  font-size: 58px;
  position: relative;
  top: 4px;
  left: 22px;
}
.bold-big {
  font-size: 64px;
  font-weight: 900;
}
.txt-yellow {
  color: var(--yellow);
}
.txt-orange {
  color: var(--orange);
}
.txt-gray {
  color: var(--gray);
  font-size: 20px;
}

/* ---------------------phone--------------- */

@media (max-width: 1100px) {
  #home, #services, #portfolio, #about, #contact{
    height: auto;
    width: auto;
  }
  /* *{
    height: auto;
    width: auto;
  } */
  .bold-big {
    font-size: 45px;
  }
  /* nav ul, nav ul .left, nav ul .right{
    display: flex;
    flex-direction: column;
  } */
  /* #home{
    flex-direction: column;
  } */
  #vector1{
    width: 250px;
    left: 450px;
  }
  #vector2{
    width: 300px;
    left: 400px;
  }
  #me-coding{
    width: 200px;
    height: 280px;
    left: 450px;
  }
  #glasses-rot{
    width: 200px;
  }
  .card{
    flex-direction: column;
    width: 40%;
  }
  .card img{
    width: 40px;
    height: 40px;
  }
  .home-left{
    flex: 5;
    padding-left: 40px;
  }
  .home-right{
    flex: 5;
  }
  .services-card{
    width: 195px;
    height: 180px;
  }
  .services-card img{
    width: 80px;
  }
  .projects{
    /* flex-direction: column; */
    /* justify-content: flex-start; */
    /* flex-wrap: wrap; */
    
    margin-left: 540px;
  }
  .projects img{
    /* margin: 0; */
  }
  #about{
    margin-left: 400px;    
  }
  .skills{
    
  }

}