body {
        background-color: #fff;
    }
    
    
    a{
    color:#000;
    text-decoration:none;
    }
    
    #image_one {
        width: 30%;
        height: 15%;
        top: 15%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        border-radius: 50%;
    }
    
    .item_title_one {
        position: absolute;
        top: 21.5%;
        left: 50%;
        transform: translate(-50%, 50%);
        font-style: normal;
        font-weight: bolder;
        font-size: 17px;
    }
    
    .item_title_two {
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translate(-50%, 50%);
        font-style: normal;
        font-size: 13px;
    }
    
    .item_one {
        position: absolute;
        top: 37%;
        left: 50%;
        transform: translate(-50%, 50%);
        font-style: normal;
    }
    
    .item_two {
        position: absolute;
        top: 43%;
        left: 50%;
        transform: translate(-50%, 50%);
        font-style: normal;
    }
    
    .item_two:hover {
        display: block;
    }
    
    .item_three {
        position: absolute;
        top: 49%;
        left: 50%;
        transform: translate(-50%, 50%);
    }
    
    .item_four {
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, 50%);
        font-style: normal;
    }
    
    #Card {
        width: 25%;
        height: 100%;
        top: 50%;
        left: 12%;
        position: absolute;
        transform: translate(-50%, -50%);
        background-color: #fff;
    }
    
    #PART_TWO {
        width: 75%;
        height: 100%;
        top: 50%;
        left: 62%;
        position: absolute;
        transform: translate(-50%, -50%);
        background-color: #fff;
        box-shadow: 0px 0px 10px #000;
    }
    
    .item_part_two_ONE {
        position: absolute;
        top: 35%;
        left: 20%;
        transform: translate(-50%, 50%);
        font-style: normal;
        font-weight: bolder;
        font-size: 17px;
    }
    
    .item_part_two_TWO {
        position: absolute;
        top: 44%;
        left: 22%;
        transform: translate(-50%, 50%);
    }
    
    #button_portfolio {
        position: absolute;
        top: 57%;
        left: 27%;
        width: 20%;
        height: 8%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        text-align: center;
        box-shadow: 0px 0px 10px #000;
        border-radius: 20px;
    }
    
    .picture_two {
        position: absolute;
        top: 50%;
        left: 70%;
        transform: translate(-50%, -50%);
        width: 30%;
        height: 43%;
        border-radius: 50%;
    }
    
   
    #link_container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60%;
        height: 50%;
        background: #fff;
        box-shadow: 0px 0px 20px #000;
    }
    
    #button_back_from_link_container {
        position: absolute;
        top: 15%;
        left: 90%;
        transform: translate(-50%, -50%);
        width: 10%;
        height: 5%;
        background: #fff;
        text-align: center;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0px 0px 20px #000;
    }
    
    .Github {
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30%;
        height: 10%;
        background: #fff;
        text-align: center;
        padding: 10px;
        box-shadow: 0px 0px 10px #000;
        border-radius: 10px;
    }
    
    .Linkldin {
        position: absolute;
        top: 75%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30%;
        height: 10%;
        background: #fff;
        text-align: center;
        padding: 10px;
        box-shadow: 0px 0px 10px #000;
        border-radius: 10px;
    }
    
    .Pinterest {
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30%;
        height: 10%;
        background: #fff;
        padding: 10px;
        text-align: center;
    }
    
    .title_link_container {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    #about_section {
        width: 75%;
        height: 100%;
        top: 50%;
        left: 62%;
        position: absolute;
        transform: translate(-50%, -50%);
        background-color: #fff;
        box-shadow: 0px 0px 20px grey;
    }
    
    .about_section_text {
        color: #000;
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .button_back {
        position: absolute;
        top: 130%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30%;
        height: 9%;
        background: #fff;
        text-align: center;
        padding: 2%;
        box-shadow: 0px 0px 10px black;
        border-radius: 20px;
    }
    
    .image_profil {
        width: 17%;
        height: 25%;
        top: 25%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        border-radius: 50%;
    }
    
    #title_about_section {
        position: absolute;
        top: 5%;
        left: 10%;
        transform: translate(-50%, -50%);
    }
    
    #skills_section {
        width: 75%;
        height: 100%;
        top: 50%;
        left: 62%;
        position: absolute;
        transform: translate(-50%, -50%);
        background-color: #fff;
        padding: 30px;
        box-shadow: 0px 0px 20px #000;
    }
    
    .cuard_one {
        width: 20%;
        height: 10%;
        top: 20%;
        left: 20%;
        position: absolute;
        transform: translate(-50%, -50%);
        background-color: #fff;
        align-items: center;
        padding-top: 40px;
        padding-left: 40px;
        box-shadow: 0px 0px 20px #000;
        border-radius: 30px;
    }
    
    .skill_title_one {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .skill_percent_one {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .cuard_two {
        width: 20%;
        height: 10%;
        top: 20%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        background-color: #fff;
        align-items: center;
        padding-top: 40px;
        padding-left: 40px;
        box-shadow: 0px 0px 20px #000;
        border-radius: 30px;
    }
    
    .skill_title_two {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .skill_percent_two {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .cuard_three {
        width: 20%;
        height: 10%;
        top: 20%;
        left: 80%;
        position: absolute;
        transform: translate(-50%, -50%);
        background-color: #fff;
        align-items: center;
        padding-top: 40px;
        padding-left: 40px;
        box-shadow: 0px 0px 20px #000;
        border-radius: 30px;
    }
    
    .skill_title_three {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .skill_percent_three {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .cuard_four {
        width: 20%;
        height: 10%;
        top: 40%;
        left: 20%;
        position: absolute;
        transform: translate(-50%, -50%);
        background-color: #fff;
        align-items: center;
        padding-top: 40px;
        padding-left: 40px;
        box-shadow: 0px 0px 20px #000;
        border-radius: 30px;
    }
    
    .skill_title_four {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .skill_percent_four {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .cuard_five {
        width: 20%;
        height: 10%;
        top: 40%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        background-color: #fff;
        align-items: center;
        padding-top: 40px;
        padding-left: 40px;
        box-shadow: 0px 0px 20px #000;
        border-radius: 30px;
    }
    
    .skill_title_five {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .skill_percent_five {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .cuard_six {
        width: 20%;
        height: 10%;
        top: 40%;
        left: 80%;
        position: absolute;
        transform: translate(-50%, -50%);
        background-color: #fff;
        align-items: center;
        padding-top: 40px;
        padding-left: 40px;
        box-shadow: 0px 0px 20px #000;
        border-radius: 30px;
    }
    
    .skill_title_six {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .skill_percent_six {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .cuard_seven {
        width: 20%;
        height: 10%;
        top: 60%;
        left: 80%;
        position: absolute;
        transform: translate(-50%, -50%);
        background-color: #fff;
        align-items: center;
        padding-top: 40px;
        padding-left: 40px;
        box-shadow: 0px 0px 20px #000;
        border-radius: 30px;
    }
    
    .skill_title_seven {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .skill_percent_seven {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .cuard_eight {
        width: 20%;
        height: 10%;
        top: 60%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        background-color: #fff;
        align-items: center;
        padding-top: 40px;
        padding-left: 40px;
        box-shadow: 0px 0px 20px #000;
        border-radius: 30px;
    }
    
    .skill_title_eight {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .skill_percent_eight {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .cuard_nine {
        width: 20%;
        height: 10%;
        top: 60%;
        left: 20%;
        position: absolute;
        transform: translate(-50%, -50%);
        background-color: #fff;
        align-items: center;
        padding-top: 40px;
        padding-left: 40px;
        box-shadow: 0px 0px 20px #000;
        border-radius: 30px;
    }
    
    .skill_title_nine {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .skill_percent_nine {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .cuard_ten {
        width: 60%;
        height: 5%;
        top: 80%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        background-color: #fff;
        align-items: center;
        padding-top: 40px;
        padding-left: 40px;
        box-shadow: 0px 0px 20px #000;
        border-radius: 10px;
    }
    
    .skill_title_ten {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .skill_percent_ten {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .cuard_eleven {
        width: 60%;
        height: 5%;
        top: 94%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        background-color: #fff;
        align-items: center;
        padding-top: 40px;
        padding-left: 40px;
        box-shadow: 0px 0px 20px #000;
        border-radius: 10px;
    }
    
    .skill_title_eleven {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .skill_percent_eleven {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    #back_button_from_skills {
        position: absolute;
        top: 9%;
        left: 93%;
        transform: translate(-50%, -50%);
      
        box-shadow: 0px 0px 20px #000;
    }
    
    #contact_section {
        width: 75%;
        height: 100%;
        top: 50%;
        left: 62%;
        position: absolute;
        transform: translate(-50%, -50%);
        background-color: #fff;
        box-shadow: 0px 0px 20px #000;
    }
    
    #back_from_contact_page {
        position: absolute;
        top: 6%;
        left: 88%;
        transform: translate(-50%, -50%);
        width: 10%;
        height: 2%;
        background: #fff;
        text-align: center;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0px 0px 20px #000;
    }
    
    .contact_section_title {
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #000;
    }
    
    .Instagram_Page {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30%;
        height: 4%;
        background: #fff;
        text-align: center;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0px 0px 20px #000;
    }
    
    .Gmail_Page {
        position: absolute;
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30%;
        height: 4%;
        background: #fff;
        text-align: center;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0px 0px 20px #000;
    }
    
    .lindklin_Page {
        position: absolute;
        top: 79%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30%;
        height: 4%;
        background: #fff;
        text-align: center;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0px 0px 20px #000;
    }