@import url('https://fonts.googleapis.com/css2?family=Freckle+Face&family=Passion+One&family=Concert+One&family=Monoton&amily=Archivo+Narrow:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Concert+One&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root{
    --main-bg-color : #5628ee;
    --Archivo-Narrow-font : 'Archivo Narrow', sans-serif;
    --passion-font : 'Passion One', cursive;
}

body,html {
  font-family: Roboto, Arial;
  overflow-x: hidden;
  background: linear-gradient(var(--main-bg-color), #be58d3,#be58d3, #ecdd4e,#ecdd4e,#4eec95, #1ecfcf)
}


/* animated ham-menu  */

.icon-menu {
  height: 100vh;
  width: 250px;
  transform: translate(-150px, 0);
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: 1.4s;
  font-size: 2rem;
  font-family: "Times New Roman", Times, serif;
  opacity: 0;
  z-index: 10;
}

.icon-menu > li {
  list-style: none;
  padding: 14px 5px;
  font-size: 1.5rem;
}

.icon-menu > li > a {
    font-family: 'Concert One', cursive;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.685);
}

.icon-menu-active {
  transform: translate(0, 0);
  opacity: 1;
  border-right: 2px solid rgb(251, 255, 0);
  border-bottom-right-radius: 70%;
  border-top-right-radius: 30%;
  background-image: radial-gradient(circle at 73% 14%, rgba(160, 160, 160,0.05) 0%, rgba(160, 160, 160,0.05) 50%,rgba(27, 27, 27,0.05) 50%, rgba(27, 27, 27,0.05) 100%),radial-gradient(circle at 22% 0%, rgba(251, 251, 251,0.05) 0%, rgba(251, 251, 251,0.05) 50%,rgba(219, 219, 219,0.05) 50%, rgba(219, 219, 219,0.05) 100%),radial-gradient(circle at 89% 57%, rgba(49, 49, 49,0.05) 0%, rgba(49, 49, 49,0.05) 50%,rgba(206, 206, 206,0.05) 50%, rgba(206, 206, 206,0.05) 100%),linear-gradient(90deg, rgb(238, 131, 122),rgb(184, 12, 194));
}



#icons-for-menu{
  /* width: 50px;
  height: 50px; */
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

section {
  width: calc(100vw-19px) !important;
}


/* This is the first  section */


.my-profile-sec {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  height: 100vh;
}

.hello-parent{
  display: flex;
  flex-direction: column;
}

.me-me{
  margin-top: -100px;
  /* display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; */
}


.me{

  height: 500px;
  /* width: 80%; */
  /* height: 70vh; */
  filter: grayscale(100%);
}

.me:hover{
  filter: none;
}

.name{
    position: relative;
    font-size: 2rem;
    color: #000;
    word-spacing: 5px;
    letter-spacing: 3px;
    font-family: var(--Archivo-Narrow-font);
    text-shadow: 2px 4px 5px #000 ;
    /* word-break: break-all; */
}

@media screen and (max-width:600px){

  .me-me{
    margin-top: auto;
  }
  .me-me > img{
    width: 80vw;
    height: 399px;
    margin-bottom: 50px;
  }

  .my-profile-sec{
    margin-top: 50px;
    height: 100%;
  } 

  .my-profile-sec  >  .hello-parent{
    position: relative;
    left : 0 !important;
    transition: none !important;
  }
  .hello-word{
    width: 250px;
    height: 250px; 
    margin-left: 25%;
    transition: none !important;
    margin-top: 35px;
  }

  .name{
    font-size: 1.5rem;
    margin:0  10px;
    margin-top: -20px;
    text-align: center;
  }

}



/* footer */

.footer {
  width: 100vw;
  height: 250px;
  background-color: #292429;
}

.footer-text{
  font-size: 1.7rem;
  font-weight: 500;
  font-family: var(--passion-font);
  letter-spacing: 5px;
  display: flex;
  justify-content: center;
  padding: 1rem;
  color: #fff;
}

.footer-icons{
  padding: 2rem;
  display: flex;
  justify-content: space-evenly;
}

/* .footer-icons {
  color: rgba(243, 243, 243, 0.986);
  box-shadow: 4.1px 2px 4px    #6f7070, -5.5px -4.2px 3px  1px #0f0e0e;
} */

@media only screen and (max-width: 600px) {
  .fa-github{
    background: linear-gradient(#000000,#f004a9);
    -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-box-reflect: below 10px linear-gradient(transparent,#0005);
  }
  .fa-instagram{
    background: -webkit-radial-gradient(33% 100% circle, #FED373 4%, #F15245 30%, #D92E7F 62%, #9B36B7 85%, #515ECF);
      background: radial-gradient(circle at 33% 100%, #FED373 4%, #F15245 30%, #D92E7F 62%, #9B36B7 85%, #515ECF);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-box-reflect: below 5px linear-gradient(transparent,#0005);
  }
  .fa-facebook{
    background: #2f20fc;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-reflect: below 5px linear-gradient(transparent,#0005);
  }
  .fa-envelope-open-text{
    background: linear-gradient(#10ebbb,#f004a9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-reflect: below 5px linear-gradient(transparent,#0005);
  }
}

.fa-github:hover{
  background: linear-gradient(#000000,#f004a9);
  -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-reflect: below 10px linear-gradient(transparent,#0005);
}
.fa-instagram:hover{
  background: -webkit-radial-gradient(33% 100% circle, #FED373 4%, #F15245 30%, #D92E7F 62%, #9B36B7 85%, #515ECF);
    background: radial-gradient(circle at 33% 100%, #FED373 4%, #F15245 30%, #D92E7F 62%, #9B36B7 85%, #515ECF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-reflect: below 5px linear-gradient(transparent,#0005);
}
.fa-facebook:hover{
  background: #2f20fc;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-reflect: below 5px linear-gradient(transparent,#0005);
}
.fa-envelope-open-text:hover{
  background: linear-gradient(#10ebbb,#f004a9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-reflect: below 5px linear-gradient(transparent,#0005);
}

.footer-credit{
  text-align: center;
  color: rgb(52, 228, 228);
  margin-top: 30px;
  font-family: var(--Archivo-Narrow-font);
}


/* styling the scroll bar */
::-webkit-scrollbar {
  width: 19px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgb(185, 175, 175);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(#029bb0, #cbe91f, #e27115);
  border-radius: 10px;
}