body{
    background: lightgrey;
}
.container {
    margin: auto;
    width: 800px;
}
a {
    color: rgba(230, 230, 230, 1);
    text-decoration: none;
}
.link__B {
   color:  rgba(22, 23, 24, 1);
}
.mainbox {
    margin: auto;
    margin-top: 2%;
    background: whitesmoke;
    height: 1000px;
    width: 800px;
    vertical-align: middle;
    border: hidden 1px;
    overflow: hidden;
    box-shadow: 15px 15px 25px 1px #434041;
    animation:  infinite;
    animation-name: example2;
    animation-duration: 40s;
    animation-delay: 0s;
}
.mainbox__colleft {
    background: rgba(22, 23, 24, 0.88);
    height: 100%;
    max-width: 35%;
    min-width: 35%;
    float: left;
}
.mainbox__colright{
    background: rgba(230, 230, 230, 0.4588235294117647);
    height: 100%;
    max-width: 65%;
    min-width: 65%;
    float: right;
}
.mainbox__colleft__box1 {
    height: 25%;
    width: 100%;
    float: left;
}
.mainbox__colleft__box2 {
    height: 25%;
    width: 100%;
    float: left;
}
.mainbox__colleft__box3 {
    height: 25%;
    width: 100%;
    float: left;
}
.mainbox__colleft__box4 {
    height: 25%;
    width: 100%;
    float: left;
}
.avatar {
    clip-path: circle(45.4% at 50% 50%);
    margin-left: 15%;
    margin-top: 10%;
}
.box__lable {
    margin-left: 15%;
    border-bottom: solid 3px rgba(230, 230, 230, 1);
}
.box__body {
    margin-left: 15%;
}
.box1__block {
    max-width: 85%;
    min-width: 85%;
    float: right;
}
.box__body__box {
    padding-top: 3%;
    overflow: hidden;
}
.text2 {
    font: 12pt calibri;
    color: rgba(230, 230, 230, 1);
}
.text {
    font: 10pt calibri;
    padding-bottom: 3%;
    color: rgba(230, 230, 230, 1);
}
.text3 {
    font: 12pt calibri;
    color: rgba(230, 230, 230, 1);
}
.text4 {
    font: 14pt calibri;
    padding-bottom: 3%;
    color: rgba(230, 230, 230, 1);
}
.text2r {
    font: 12pt calibri;
    color: rgba(22, 23, 24, 0.88);
}
.textr {
    font: 10pt calibri;
    color: rgba(22, 23, 24, 0.88);
}
.text3r {
    font: 12pt calibri;
    color: rgba(22, 23, 24, 0.88);
}
.text4r {
    font: 18pt calibri;
    padding-bottom: 3%;
    padding-top: 5px;
    color: rgba(22, 23, 24, 0.88);
}
.box__body__box__data {
    width: 70%;
    height: 15%;
}
.row__skills {
    margin-top: 5%;
    height: 7px;
    width: 100%;
    float: left;
    background: grey;
}
.row__skills2 {
    margin-top: 0%;
    height: 100%;
    width: 75%;
    background: rgba(230, 230, 230, 1);
}
.row__skills2__1 {
    margin-top: 0%;
    height: 100%;
    width: 75%;
    background: rgba(230, 230, 230, 1);
}
.row__skills2__2 {
    margin-top: 0%;
    height: 100%;
    width: 85%;
    background: rgba(230, 230, 230, 1);
}
.row__skills2__3 {
    margin-top: 0%;
    height: 100%;
    width: 35%;
    background: rgba(230, 230, 230, 1);
}
.row__skills2__4 {
    margin-top: 0%;
    height: 100%;
    width: 95%;
    background: rgba(230, 230, 230, 1);
}
.row__skills2__5 {
    margin-top: 0%;
    height: 100%;
    width: 95%;
    background: rgba(230, 230, 230, 1);
}
.icon1 {
    color: rgba(230, 230, 230, 1);
    height: 100%;
    margin-left: 3%;
    margin-right: 3%;
    max-width: 9%;
    min-width: 9%;
    float: left;
    overflow: hidden;
}
.mainbox__colright__box1 {
    height: 17%;
    width: 100%;
    margin-left: 0%;
    padding-top: 0%;
    overflow: hidden;
}
.mainbox__colright__box2 {

    height: 34%;
    width: 90%;
    margin-left: 1%;
    overflow: hidden;
}
.mainbox__colright__box3 {
    height: 34%;
    width: 90%;
    margin-left: 1%;
    overflow: hidden;
}
.mainbox__colright__box4 {
    height: 15%;
    width: 90%;
    margin-left: 1%;
    overflow: hidden;
}
.text1r__1 {
    font: 32pt calibri;
    padding-bottom: 3%;
    color: rgba(22, 23, 24, 0.88);
    margin-left: 10%;
    padding-top: 10%;
}
.text1r__2 {
    font: 22pt calibri;
    padding-bottom: 3%;
    color: rgba(22, 23, 24, 0.88);
    margin-left: 10%;
    padding-top: 1%;
}
.box__body__right {
    padding-top: 3%;
    height: 25%;
    margin-left: 10%;
}
.box__body__right__colleft {
    float: left;
    height: 100%;
    width: 35%;
}
.box__body__right__collright {
    float: right;
    height: 100%;
    width: 64%;
 }
.box__body__right2 {
    padding-top: 2%;
    height: 50%;
    margin-left: 10%;
}
.box__body__right__colleft2 {
    float: left;
    height: 100%;
    width: 50%;
}
.box__body__right__collright2 {
    float: right;
    height: 100%;
    width: 50%;
}
.icon1__right {
    background: rgba(22, 23, 24, 0.88);
    padding-top: 8px;
    padding-left: 8px;
    margin: auto;
    width: 30px;
    height: 25px;
    float: left;
    overflow: hidden;
    color: rgba(230, 230, 230, 1);
    border-radius: 50%;
}
.box__lable__right {
    margin-left: 10%;
    border-bottom: solid 3px rgba(22, 23, 24, 0.88);
}
.icon1__right2 {
    clip-path: circle(28.4% at 50% 50%);
}
.iconcontainer {
    background: rgba(22, 23, 24, 0.88);
    width: 40px;
    height: 40px;
    clip-path: circle(40% at 50% 50%);
    float: left;
    overflow: hidden;
}
.iconnew {
    color: rgba(230, 230, 230, 1);
    padding: 12px;
    width: 40px;
    height: 40px;
}
@keyframes example2 {
    0%   {box-shadow: 15px 15px 25px 2px black;}
    25%   {box-shadow: 15px -15px 25px 1px black;}
    55%   {box-shadow: -15px -15px 25px 2px black;}
    75%   {box-shadow: -15px 15px 25px 1px black;}
    100%   {box-shadow: 15px 15px 25px 2px black;}
}