.sidepanel{
background-color: #141414;
color:white;
border-radius: 20px;
width: 100%;
height: auto;
text-align: center;
padding-bottom: 10%;
margin-top: +50px;
position:sticky;
top:0;
margin-bottom: -30px;
}
@media (min-width: 0px) and (max-width: 768px) {
    .sidepanel {
      margin-bottom: -60px;
      margin-top: 200px;
    }
  }
.uno{
    background-color: #303030;
    border-radius: 20px;
    padding:10px;
    padding-top: 2px;
    padding-bottom: 4px;
    margin-top: 6%;
    font-size: 20px;
    font-weight: lighter;
    color:#cccccc;
}
img{
    border-radius: 20px;
    width: 170px;
    margin-top: -100px;
}
.msp{
    display: flex;
    background-color: #141414;
    color:white;
    border-radius: 20px;
    width: auto;
    height: auto;
    text-align: left;
    padding-bottom: 10%;
    padding: 4%;
    margin-top: +50px;
    top:0;
    margin-bottom: +50px;
    flex-direction: row;
    position: relative;
    }
body{
        font-family: 'Open Sans', sans-serif;
        height: auto;
        background-image: url('bg.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }
.sp2{
    background-color: #242424;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

.thres{
    text-align: left;
}
.box{
    background-color:rgb(41, 41, 41);
    border-radius: 20px;
}
.flexbox-container{
    display:flex;
}
.flexbox-item{
    background-color: #202020;
    border-radius: 20px;
    width:80%;
    height:auto;
    margin-top:2%;
    margin-left: 10%;
    margin-right: 10%;
    text-align: left;
    padding: 5%;

}
.it2{
    margin-left:4%;
    margin-right: 4%;
    margin-bottom: 0;
}
.social {
    margin-top: 2%;
    font-size: 24px;
    padding:7px;
    background-color: #303030;
    border-radius: 20px;
    transition: 0.2s;
    
  }
  #insta{
    color: #cc2366; 
  }
  #twit{
    color: #1D9BF0;
  }
  #linked{
    color:#0A66C2;
  }
  #whats{
    color:#25D366;
  }
  a{
    text-decoration: none;
  }
 .social:hover{
    background: #ffffff;
    box-shadow: 0 0 5px 1px #c0c0c0;
 }
.subcont1{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 5px;
    justify-content: space-around;
}
.subitem1{  
    width: 48%;
    border-style: solid;
    border-color: #303030;
    border-radius: 20px;
    padding: 2%;
}
.subitem2{
    width:48%;
    border-style: solid;
    border-color: #303030;
    border-radius: 20px;
    padding: 2%;
}
.subitem3{
    width:48%;
    border-style: solid;
    border-color: #303030;
    border-radius: 20px;
    padding: 2%;
}
.subitem4{
    width:48%;
    border-style: solid;
    border-color: #303030;
    border-radius: 20px;
    padding: 2%;
}
.subitem5{
    width:48%;
    border-style: solid;
    border-color: #303030;
    border-radius: 20px;
    padding: 2%;
}
.subitem6{
    width:48%;
    border-style: solid;
    border-color: #303030;
    border-radius: 20px;
    padding: 2%;
}
.cont2{
    display: flex;
    width: 100%;
    margin: 0;
}
.nav{
    align-items: flex-start;
    margin-top: 200px;
    background-color: #141414;
    padding: 1%;
    border-radius: 20px;
    width: 50%;
    margin-left: 40%;
    row-gap: 10px;
    column-gap: 10px;
}
.active{
    background-color: #303030 !important;
}
.navitem{
    color:white;
    border-radius: 20px !important;
    width:-100px!important;
    padding: -50rem !important;
}
.navitem:hover{
    background:linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    color:white;
}
@media (min-width: 0px) and (max-width: 768px) {
    .nav{
      display: none;
      
    }
  }
  @media (min-width: 768px) and (max-width: 8000px) {
    .navbar{
      display: none;
      
    }
  }
.boxico {
    margin-top: 2%;
    color: rgb(255, 255, 255);
    font-size: 22px;
    padding:7px;
    background-color: #0c0c0c;
    border-radius: 10px;
    transition: 0.2s;
    float: left;
    margin-right: 15px;
    
  }
  a{
    text-decoration: none;
  }
 .boxico:hover{
    background:linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    color:#ffffff;
 }
 .boxicon{
    margin-left: 20%;
 }
 @media (min-width: 0px) and (max-width: 768px) {
    body {
      background-color: #141414;
      background-image:none;
    }
  }
.navicon{
    align-items: center;
    font-size: 24px;
    margin-bottom: 5px;
}

/* Make sure that padding behaves as expected */

.subitem7{
    width:48%;
    padding:2%;
}
.subitem8{
    width:48%;
    padding:2%;
    

}
.subitem9{
    width:50%;
    padding:2%;
}
.subitem10{
    width:50%;
    padding:2%;
    

}
/* Container for skill bars */
.container2 {
  width: 100%; /* Full width */
  background-color: rgb(104, 104, 104); /* Grey background */
  color:rgb(83, 83, 83);
  text-align: center;
  border-radius: 20px;
  height: 0.25rem;
  margin: 0;
  padding:0;
}
.skills {
border-radius: 20px;
height: 0.25rem;
}
.htmlough,.pho,.cso,.javo{
    width: 100%;
    border-style: solid;
    border-color: #303030;
    border-radius: 20px;
    padding: 4%;
    margin-top: 8px;
}

.html {width: 90%; background-color: #04AA6D;} /* Green */
.css {width: 80%; background-color: #2196F3;} /* Blue */
.js {width: 65%; background-color: #f44336;} /* Red */
.php {width: 60%; background-color: #b8c500;} /* Dark Grey */

.subcont0{
    display: flex;
    font-weight: 500;
    font-family: 'open sans',sans-serif ;
}
.edu{
    margin-left: 10px;
    margin-right:32%;
}
.subcont3{
    margin-top: 5px;
    display:flex;
    justify-content: space-around;
}
.ski{
    margin-bottom: -2px;
    padding-top: 10px;
    color:#a3a3a3;
}
.smobox{
    background-color: #202020;
    border-radius: 10px;
    color:rgb(167, 167, 167);
    border: none;
    padding:10px;
    margin-bottom: 2%;
}
.smobox2{
  background-color: #202020;
  border-radius: 10px;
  color:rgb(221, 221, 221);
  border: none;
  padding:10px;
  margin-bottom: 1%;
  transition: linear-gradient .2s ease-in-out;
}
.smobox2:hover{
  background:linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
  color:white;
}
.subcontx{
    display: flex;
    width:100%;
}
.subitemx{
    margin: 0;
    padding:0;
    width: auto;
}
.mainsp{
    display: flex;
    background-color: #141414;
    color:white;
    border-radius: 20px;
    width: auto;
    height: auto;
    text-align: left;
    padding-bottom: 10%;
    padding: 4%;
    margin-top: +50px;
    top:0;
    margin-bottom: +50px;
    flex-direction: row;
    position: relative;
    }
.form-group{
    width: 100%;
}
.margin{
    margin-top: 5%;
}
.spitems{
    font-size: small;
    color:#a3a3a3;
}
#nameh3{
    font-family: 'poppins', sans-serif;
    font-weight: 500;
}
form{
    display: flex;
}
input {
    outline: 0;
    border-width: 0 0 1px;
    color:#7c7c7c;
    border-color: #303030;
    border-bottom: solid;
    background-color: #141414;
    padding: 10px;
    width: 100%;
    margin-left: -40px;
  }
  input:focus {
    border-color: rgb(185, 31, 31);
  }
textarea{
    outline: 0;
    border-width: 0 0 2px;
    color:#7c7c7c;
    border-bottom: solid;
    background-color: #141414;
    padding:10px;
    width: 100%;
    margin-left: -40px;
  }
  textarea:focus {
    border-color: rgb(185, 31, 31);
  }
  .submit{
    border:none;
    background-color: #303030;
    color:#a3a3a3;
    border-radius: 10px;
    padding:10px;
    margin-top: 10px;
    margin-left: -40px;
    transition: 0.5s;
  }
  .submit:hover{
    background:linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    color:white;
  }
  /* start flexing */
.flex-outer li,
.flex-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: left;
  width: 100%;
}
.hdi1{
  font-family:'Poppins', sans-serif;
  font-size: 2.2rem;
  font-weight: 600;
}
.subiconx{
  float: left;
  color:white;
  font-size: 30px;
  padding:6px;
  margin-top: -3px;
  color:#dc2743;
}
.subicon2,.fa-brands{
  float: left;
  color:white;
  font-size: 50px;
  padding:6px;
  margin-top: -3px;
  color:#dc2743;
  margin-left: -20px;
}
.ro{
  font-size: 35px;
  padding: 7px;
  margin-left: 10px;
}
.subicon1{
  float: left;
  color:white;
  font-size: 40px;
  margin-top: -3px;
  margin-right: 5px;
  color:#dc2743;

}