html,body{
  position:relative;
  overflow-x:hidden;
  box-shadow:inset 0px 0px 2px 2px rgb(0,0,0,0.4);
  width:100%;
  height:100%;
}
.super-container{
  position: relative;
  width:100%;
  height:100%;
  background-image:url("a.jpg");
}

.head{
  position:relative;
  width: 100%;
  height:45%;
  background-image:url("aa.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position-y:-80px;
  box-shadow:0px 0px 2px 2px rgb(0,0,0,0.5);
}
@media all and (min-width:600px)
{
.row-head{
  width:100%;
  height:100%;
  overflow: hidden;
}
.dp{
  position: absolute;
  display:flex;
  width:41%;
  height:60%;
  border-radius: 50%;
  border:2px solid rgba(251,251,251,1);
  margin: auto;
  z-index: 1;
  top:0px;
  left:0px;
  bottom:0px;
  right:0px;
}

.image-holder{
  position: relative;
  background-color: white;
  height:1px;
  box-shadow:0px 0px 2px 2px rgb(0,0,0,0.1);
  transform:rotate(90deg);
  top:160px;
}

.name{
font-family: 'Charm',cursor;
text-shadow: 2px 2px 2px #000,
               4px 4px 7px brown;
  font-size:2.9em;
  color:rgb(43, 1, 30);
  position: absolute;
  margin:auto;
  z-index: 1;
  top:35%;
  left:0px;
  bottom:0px;
  right:0px;
}

.data{
font-family: 'Charm',cursor;
  font-size:2.0em;
  color:rgb(1, 18, 45);
  position: absolute;
  margin:auto;
  z-index: 1;
  top:50%;
  left:0px;
  bottom:40%;
  right:0px;
}


.design{
  font-size:1.2em;
  opacity: 0.25;
  color:rgb(255, 237, 254);

}

.begin{
  font-size:1.2em;
  opacity: 0.25;
  color:rgb(255, 237, 254);
  position: relative;
  top:auto;
  left:75%;
  bottom:auto;
  right:0%;
}

.end{
  font-size:1.2em;
  opacity: 0.25;
  color:rgb(255, 237, 254);
  position: relative;
  top:auto;
  left:90%;
  bottom:auto;
  right:0%;
}

.start{
  font-size:1.2em;
  opacity: 0.25;
  color:rgb(255, 237, 254);
  position:relative;
  top:auto%;
  left:20%;
  bottom:auto;
  right:0%;
}


.side-element{
  position:absolute;
  overflow: hidden;
  z-index:3;
  width: 3%;
  height:27.2%;
  bottom:20%;
  right:0px;
  padding:5px;
  background-color:rgb(61, 2, 44);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: -1px 1px 2px 2px rgba(0,0,0,0.2);
}
.side{
  position: relative;
  display: block;
}
.icon{
 color: rgb(255, 249, 249);
  font-size:2.1em;
  padding: 2px;
  transition: all 0.5s;
}

.s:hover{
color: rgb(17, 2, 147);

}

.s3:hover{
color:rgb(23, 124, 35);
}

.s4:hover{
color:rgb(66, 60, 234);
}

.s5:hover{
color:rgb(175, 22, 38);
}
.s6:hover{
color:rgb(153, 158, 112);
}

.s7:hover{
color: rgb(229, 0, 26);
}

.about{
  text-shadow: 0px 1px 2px rgb(10, 3, 20);
font-size:1.6em;
color:rgb(35, 1, 1);
font-family: 'Abril Fatface', cursive;
}

.about1{
  text-shadow: 0px 1px 2px rgb(10, 3, 20);
font-size:1.6em;
color:rgb(35, 1, 1);
font-family: 'Abril Fatface', cursive;
}

.text{
  text-shadow: 0px 1px 1px rgb(153, 142, 142);
  font-size:1.3em;
  color:rgb(0, 0, 0);
  font-family: 'Merienda', cursive;
}

.language{
  font-family: 'Ultra', serif;
font-size:1.4em;
color:rgb(24, 42, 43);
text-shadow: 0px 1px 1px rgb(56, 3, 13);
}

.pic-box{
  position:absolute;
  width: 65%;
  height:15%;
  bottom:70%;
  right:20%;
  left: 20%;
  border-radius: 10px;

}

.down{
  position:absolute;
  height:51%;
  bottom:0%;
  right:0%;
  left: 0%;
}

.skill{

  position:absolute;
  background-color: rgb(24, 42, 43);
  height:5%;
  bottom:0%;
  right:0%;
  left: 0%;
  top:78%;
}


}

@media all and (max-width:599px)
{
  .row-head{
      width:100%;
      height:100%;
      overflow: hidden;
    }
    .dp{
      position: absolute;
      display:flex;
      width:31%;
      height:72%;
      border-radius: 50%;
      border:1px solid rgba(251,251,251,1);
      margin: auto;
      z-index: 1;
      top:0px;
      left:0px;
      bottom:0px;
      right:0px;
    }

    .image-holder{
      display: none;
    }
   .name{
     font-family: 'Charm',cursor;
     text-shadow: 1px 1px 1px #000,
                    4px 4px 7px brown;

       font-size:1.4em;
         color:rgb(43, 1, 30);
       position: absolute;
       margin:auto;
       z-index: 1;
       top:20%;
       left:0px;
       bottom:0px;
       right:0px;
}
  .data{
  font-family: 'Charm',cursor;
    font-size:1.2em;
    color:rgb(1, 18, 45);
    position: absolute;
    margin:auto;
    z-index: 1;
    top:50%;
    left:0px;
    bottom:40%;
    right:0px;
  }


  .design{
  display: none;

  }

  .begin{
    display: none;
  }

  .end{
    display: none;
  }

  .start{
    display: none;
  }


  .side-element{
      position:absolute;
      overflow: hidden;
      z-index:3;
      width: 8%;
      height:26%;
      bottom:6%;
      right:0px;
      padding:5px;
      background-color: black;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      box-shadow: -1px 1px 2px 2px rgba(0,0,0,0.2);
    }
    .side{
        position: relative;
        display: block;
      }
      .icon{
        color:white;
        font-size:1.2em;
        padding: 2px;
      }
  .s:hover{
  color: rgb(17, 2, 147);

  }

  .s3:hover{
  color:rgb(23, 124, 35);
  }

  .s4:hover{
  color:rgb(66, 60, 234);
  }

  .s5:hover{
  color:rgb(175, 22, 38);
  }
  .s6:hover{
  color:rgb(153, 158, 112);
  }

  .s7:hover{
  color: rgb(229, 0, 26);
  }

  .about{
    text-shadow: 0px 1px 2px rgb(10, 3, 20);
  font-size:0.8em;
  color:rgb(35, 1, 1);
  font-family: 'Abril Fatface', cursive;
  }

  .about1{
    position:absolute;
    width: 65%;
    height:0%;
    bottom:188%;
    right:0%;
    left: 0%;
  }

  .text{
    text-shadow: 0px 1px 1px rgb(153, 142, 142);
    font-size:0.6em;
    color:rgb(0, 0, 0);
    font-family: 'Merienda', cursive;
  }

  .language{
    font-family: 'Ultra', serif;
  font-size:1.4em;
  color:rgb(24, 42, 43);
  text-shadow: 0px 1px 1px rgb(56, 3, 13);
  }

  .pic-box{
    position:absolute;
    width: 65%;
    height:0%;
    bottom:200%;
    right:20%;
    left: 20%;

  }

  .down{
    position:absolute;
    height:58%;
    bottom:0%;
    right:0%;
    left: 0%;
  }

  .skill{
    position:absolute;
    background-color: rgb(24, 42, 43);
    height:50%;
    bottom:0%;
    right:0%;
    left: 0%;
    top:190%;
  }

.pic-box{
  position:absolute;
  height:165%;
  bottom:0%;
  right:20%;
  left: 0%;
}

}