* {
  box-sizing: border-box;
}


.icons a {
  transition: 400ms;
}

.icons a:hover {
  transform:scale(1.2);
}

.icons a:active {
  transform:scale(1.2);
  
}

input {outline: none;}



.tailwind {
  animation-name:tailwind-text;
  animation-duration:500ms;
/*   animation-iteration-count:infinite; */
  display:inline-block;
}


@keyframes logos {
  0%  {transform:translateY(0%);}
  50%  {transform:translateY(-20%);}
  100%  {transform:translateY(0%);}
}

@keyframes tailwind-text {
  0% {transform:scale(1);}
  25% {transform:scale(0.98);}
  50% {transform:scale(1.02);}
  100% {transform:scale(1);}
}

.hide {
  animation:hide_logo  1s 500ms  1;
 
}



@keyframes hide_logo {
  from {opacity:1;}
  to {opacity:0; }
}

.float_html {
  animation:float 1s infinite;
  animation-direction:alternate;
}




.float_html:nth-child(3){
  animation-delay:250ms;
}

.float_html:nth-child(4){
  animation-delay:500ms;

}

.skill:checked + label {
  color:#4e6585;
  border: 2px solid #64748b;
}




@keyframes float {
  from {transform:translateY(0%);}
  to {transform:translateY(30%);}
}

@media (max-width:768px) {
  
  #float i {
    animation:right 1s infinite alternate;
  }

  #float i:nth-child(3){
  animation-delay:250ms;
}

#float i:nth-child(4){
  animation-delay:500ms;

}

  @keyframes right {
  from {transform:translateX(0);}
  to {transform:translateX(8px);}
}

}

@media (max-width:225px) {
  #float{display: none;}
}



.blur {
  filter:blur(4px);
}



/* ----------------CSS COMPONENTS-------------- */

    /* --------------navbar------------ */
.navbar {
  width: 100%;
  max-width:100%;
  display:flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  border: 1px solid #c0c0c0;
  border-radius: 5px;
  background: #f7f7f7;
}

.mobile-nav {
  display: none;
}

.navbar i:first-child {
  width: 20%;
  color:rgb(102, 86, 86);
}

.navbar ul {
 
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 40%;
}

.navbar ul li {
  cursor: pointer;
  border-bottom:1.5px solid  transparent;
  position: relative;
}

.navbar ul li:hover {
  border-bottom:1.5px solid rgb(108, 50, 155);
}

.navbar ul li:first-child {
  position: relative;
}
.navbar ul li:first-child:hover {
  border-bottom-color:transparent ;
}

.show {
  opacity: 0;
  position: absolute;
  left:10px;
  top: 110%;
  background: rgb(238, 238, 238);
  padding:5px 10px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border:1px solid black;
  z-index: -1;
  transition: 450ms;
}



.show p {
  border-bottom: 1px solid transparent;
}

.show p:hover {
    border-bottom: 1px solid black;

}



.navbar ul li:first-child:hover .show  {
  opacity: 1;
  z-index: 0;
} 


.search {
  width:30%;
  display: flex;
  max-width: 100%;
  padding: 0 5px;
  
  align-items: center;
}

.navbar input {
  max-width: 100%;
 width: 80%;
 padding: 2px 4px;
 border-radius: 3px;
  margin-right: 4px;
    border: 1.5px solid silver;
  transition: 350ms;
}
.navbar input:focus {
  border: 1.5px solid rgb(83, 82, 82);
  outline: none;
}
.search i {
   max-width: 100%;
   width: 20%;
   display: block;
  transition: 350ms;
  color: rgb(110, 109, 109);
}

.search i:hover {
  cursor: pointer;
  transform: scale(1.1);
  color: rgb(10, 10, 10);
}


@media (max-width:640px) {

  .navbar {
    display: none;
  }

  .mobile-nav {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    justify-content: space-evenly;
    background: rgb(247, 247, 247);
    border: 1px solid rgb(192, 192, 192);
    border-radius: 5px;
    padding: 0 10px;
  }

 

  .mobile-search {
    margin-right: auto;
    
   
  }

  

  .mobile-search input {
    padding: 0 5px;
    border-radius: 3px;
    border: 1.5px solid rgb(155, 153, 153);
  }
  .mobile-search input:focus {
    border: 1.5px solid rgb(37, 37, 37);
  }

  .mobile-pop {
    
    position: absolute;
   
    top: 100%;
    right:100%;
    background: rgb(236, 236, 236);
    padding: 5px 15px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border: 1.3px solid rgb(167, 167, 167);
    opacity: 0;
    transition:350ms;
    z-index: -1;
  }


  .mobile-pop li {
    margin: 5px 0;
    cursor: pointer;
    color:rgb(90, 87, 87);
    font-weight: 600;
  }

  .mobile-pop li:active {
      color:rgb(15, 15, 15);
  }

  .mobile-nav input[type='checkbox'] {display: none;}

  .mobile-nav i {
    margin-right: auto;
  }

  .burger {
    position: relative;
    
  }
  .burger i {
    
    cursor: pointer;
  }

  #burger {
    display: none;
    
  }
  #burger:checked ~ .mobile-pop {
    opacity: 1;
    z-index: 1;
  }
  .burger i {
        cursor: pointer;

  }

}

@media (max-width:430px){
  .mobile-nav {
    
  }
    .mobile-search {display: none;}
    .logo {
      margin-left: auto;
    }
    .mobile-nav {
      padding:0 10px ;
    }
  }



  /* -------------second component----------- */

  .button {
    display: flex;
    width: 100%;
    max-width: 100%;
    
    justify-content: space-evenly;
    
  }

  .btn1,.btn2,.btn3 {
      border: 1.5px solid transparent;
      padding: 3px 20px;
      border-radius: 5px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      color:rgb(44, 43, 43);
      box-shadow: 0 0 4px 0 rgb(63, 61, 61);
      transition: 400ms;
  }
  .btn1:hover,.btn2:hover,.btn3:hover {
    box-shadow: none;
  }

  .btn1:active,.btn2:active,.btn3:active {
          box-shadow: 0 0 4px 0 rgb(63, 61, 61);

  }

  .btn1 {
    background: rgb(73, 221, 152);
  }
  .btn1:hover {
    animation: btn1 1s  1;
    
  }

  .btn2 {
    background: rgb(226, 91, 81);
    color:rgb(236, 235, 235);
  }
  .btn2:hover {
    color:white;
    animation: btn2 800ms  2 forwards;
    
  }

  .btn3 {
    background: rgb(236, 236, 236);
    
  }

  .btn3:hover {
    border: 1.5px solid rgb(177, 176, 176);
    animation:btn3 1s 1;
  }

  @media screen  and (max-width:395px) {
    .button {
      flex-direction: column;
      justify-content: space-between;
      
    }
     .btn1,.btn2,.btn3 {
       margin-bottom: 10px;
     }

     .btn1:hover,.btn2:hover,.btn3:hover{
       animation:none;
     }
     .

  }

  @keyframes btn1 {
    0% {transform:rotate(0deg)}
    30% {transform:rotate(10deg)}
    85% {transform:rotate(-10deg)}
    
    100% {transform:rotate(0deg)}
  }

  @keyframes btn2 {
    0% {transform:scale(1)}
     50% {transform:scale(1.1)}
     100% {transform:scale(1)}
  }

  @keyframes btn3 {
    0% {transform:rotate(0)}
     100% {transform:rotate(360deg)}
     /* 100% {transform:rotate(0)} */
    
  }

  /* -------------third component----------- */

  .form {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    padding: 2rem 0;
  }
  .form form {
    display: flex;
    /* border: 1.5px solid rgb(172, 172, 172); */
    padding: 4rem .5rem 2rem .5rem;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 15px;
    background: rgb(252, 252, 252);
    position: relative;
    transition: 350ms;
    
  }
  .form form:hover {
    box-shadow: 0 0 4px 2px silver;
  }

  .form form div {
    background: #2427ad;
    height: 10%;
    width: 100%;
    position: absolute;
    top: 0;
  }
  .form form * {
    margin-bottom: 10px;
  }

  .form form input[type='text']{
      width: 80%;
      padding: 0 .3rem;
      border: 2px solid rgb(165, 155, 155);
      border-radius: 3px;
      transition: 350ms;
      box-shadow: 0 0 4px 1px transparent;
  }
  .form form input[type='text']:focus {
    border: 2px solid transparent;
    box-shadow: 0 0 3px 1.4px rgb(31, 50, 224);
  }

  .bday {
    text-decoration: underline;
    
  }

  .form form input[type='date'] {
      margin-bottom: 2rem;
      padding: 0 .3rem;
      border: 2px solid rgb(165, 155, 155);
      border-radius: 3px;
      transition: 350ms;
  }
  .form form input[type='date']:focus {
    border: 2px solid rgb(17, 69, 240);
  }

  .form form input[type='button'] {
    background: #6ad2f1;
    border: 1.5px solid #000;
    padding: .2rem 2rem;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 600;
    transition: 350ms;
  }

  .form form input[type='button']:hover {
    background: #5ec0dd;
    color:white;
  }