/*styles cs*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,600;0,700;1,100&display=swap');


body{
    font-family: 'Roboto Mono', monospace;}

#content{
     width: 100%;
    height: 100%;
    margin: 0 auto;
}



.header{
    max-width: 100%;
    height: 100%;
    margin-left: 5%;
    
    
}
 #content h1{
     margin-top: 1%;
    font-size: 4rem;
    font-weight: bolder;
}

#content h2{
    margin-top: 1%;
   font-size: 1.8rem;
   font-weight: bolder;
   margin-bottom: 1%;
}

.conLeft{
    max-width: 55%;
    margin-left: 5%;
    padding-left: 1%;
    margin-top: 2%;
    color: rgb(49, 49, 49);
    float: left;
}


.conLeft h3{
    font-size: 2rem;
    color: rgb(150, 150, 150);
    font-weight: bolder;
    padding: 0.5%;

}

.conLeft h4{
    color: rgb(0, 38, 255);
}

.conLeft h4, span{
    margin-top: 1%;
    margin-bottom: 0.5%;
}

.conLeft p, h4{
    font-size: 1.1rem;
    line-height: 1.8rem;
    text-align: justify;
}

.inner-text{
    padding: 0 6%;
}

.list{
    margin-top: 2%;
    margin-left: 5%;
    margin-bottom: 5%;
}

.list ul  {
    list-style-type: circle;
    color: rgb(102, 102, 102);
    line-height: 2rem;
  }

  .conRight{
      max-width: 30%;
      float: left;
     margin-left: 5%;
  }

  #profile{
      margin-top: 8%;
      width: 100%;
  }


  #profile img{
    display: block;
    margin-left: auto;
    margin-right: auto;
      max-width: 50%;
      border-radius: 22%;
  }

  #contact-box{
      background-color: rgb(77, 247, 142);
        margin-top: 10%;
        padding: 6%;
        width: 60%;
        line-height: 2rem;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

  * {box-sizing: border-bx}

  .container-bar {
    width: 65%;
    background-color:chartreuse;
    float: right;
    margin-top: 5%;
  }
  
  .skills {
    text-align: right;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
  }
  
  .html {width: 85%; background-color: #1d1d1d;}
  .css {width: 85%; background-color: #1d1d1d;}
  .js {width: 65%; background-color: #1d1d1d;}
  .wp {width: 25%; background-color: #1d1d1d;}
  .react {width: 10%; background-color: #1d1d1d;}
  .git {width: 25%; background-color: #1d1d1d;}
  .sp {width: 100%; background-color: #1d1d1d;}
  .en {width: 75%; background-color: #1d1d1d;}


#chart{
    margin: 15% 0;
    line-height: 2rem;
}

.row{
    width: 100%;
    height: 80px;
    max-height: 100%;
    overflow: hidden;
}
#chart p{
    width: 20%;
    float: left;
    margin-top: 10%;
}

@media only screen and (max-width: 1200px) {
  
    #contact-box {
        background-color: rgb(77, 247, 142);
        margin-top: 10%;
        padding: 6%;
        width: 60%;
        line-height: 1.2rem;
        font-size: 0.7rem;
    }
    

}

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

    .header {
        margin-left: 1%;
    }

    #content h1 {
        margin-top: 1%;
        font-size: 2rem;
    }
    #content h2 {
        margin-top: 1%;
        font-size: 0.8rem;
    }
    .conLeft h4, span {
        font-size: 0.7rem;
    }

    .inner-text {
        padding: 0 3%;
    }

    .conLeft h3 {
        font-size: 1rem;
    }

    .conLeft p, h4 {
        font-size: 0.9rem;
        line-height: 1.1rem;
        text-align: left;
    }

    .inner-text h5 {
        font-size: 0.5rem;
    }

    .list ul {
        line-height: 1rem;
        font-size: 0.8rem;
    }

    #contact-box {
        padding: 3%;
        width: 95%;
        line-height: 1.2rem;
        font-size: 0.6rem;
    }

    .container-bar {

        font-size: 0.8rem;
    }

    #chart p {

        font-size: 0.6rem;}

        .skills {

            font-size: 0.5rem;}



}