body{
    overflow-x:hidden;
    margin: 0;
    padding: 0;
    font-size:15px;
    font-family: "League Spartan", sans-serif;
    background-color: hsl(180, 52%, 96%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header{
    background-image: url('images/bg-header-desktop.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width:100%;
    height:80px;
    background-color: hsl(180, 29%, 50%);
    position: fixed;
    top:0
}
.search{
     width:70%;
     background-color: white;  
     position:fixed;
     top: 65px;
     display: flex;
     justify-content: space-around;
     color:hsl(180, 29%, 50%);
     font-weight: 700;
     border-radius: 5px;
     box-shadow: 1px 2px 8px  hsl(180, 8%, 52%) ;
     font-size: 12px;
}
.search_list{
    flex:10;
}
.clear{
    flex:2;
    text-decoration: underline;
}
.clear:hover{
    cursor: pointer;
}
.container{
    width:70%;
    margin:  120px auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.box{
    padding:10px;
    display: flex;
    flex-direction: column;
    background-color: white;
    margin-top: 17%;
     border-radius: 5px;
     box-shadow: 1px 2px 10px hsl(180, 8%, 52%) ;
}

.box:hover{
    border-left: 8px solid hsl(180, 29%, 50%);
    cursor: pointer;
}

.logo{
    width:50px;
    height:50px;
    border-radius: 50%;
    margin-top: -16%;
}
.role{
    flex:6;
    width:100%;
    border-bottom: 1px solid hsl(180, 8%, 52%);
}
.skills{
    flex:6;
    margin-left:2%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap ;
}
.det{
    display:flex;
    align-items: center;
    flex-wrap: wrap;
    width:100%;
}
.company{
    color:hsl(180, 29%, 50%);
    font-weight: 700;
    font-size: 12px;
}

.newt{
color:hsl(180, 52%, 96%);
font-weight: 700;
background-color: hsl(180, 29%, 50%);
padding:4px 8px;
border-radius: 20px;
font-size: 8px;
margin-left: 3%;
}
.feature{
color:hsl(180, 52%, 96%);
font-weight: 700;
background-color: hsl(180, 14%, 20%);
padding:4px 8px;
border-radius: 20px;
font-size: 8px;
margin-left: 3%;
}
.pos{
color:hsl(180, 14%, 20%);
font-weight: 700;
font-size:13px;
margin-top: -1%;
}
.pos:hover{
    color:hsl(180, 29%, 50%);
    cursor: pointer;
}

.time{
    display:flex;
    align-items: center;
    margin-top: -4%;
    width:100%;
    flex-wrap: wrap;
}
.dot,.dot1{
    width:2px;
    height:2px;
    background-color: hsl(180, 8%, 52%) ;
    border-radius: 50%;
      margin-right: 3%;

}
.pos_time, .part_time,.loc{
    color:hsl(180, 8%, 52%);
    font-size:10px;
    margin-right: 3%;
}

.tech,.level,.lang,.tools{
    color:hsl(180, 29%, 50%);
    padding:5px 8px;
    background-color: hsl(180, 52%, 96%);
    font-weight: 700;
    font-size: 10px;
    margin-right: 1%;
    border-radius: 5px;
}

.tech:hover,.level:hover,.lang:hover,.tools:hover{
    color:hsl(180, 52%, 96%);
    background-color:  hsl(180, 29%, 50%);
    cursor: pointer;
}

.label{
    margin:1%;
    background-color: hsl(180, 52%, 96%);
    border-radius: 5px;
    display:inline-block;
    padding:5px;

}
.label_close{
    color:hsl(180, 52%, 96%);
    background-color:hsl(180, 29%, 50%) ;
    border:none;
        font-size: 12px;
         margin-left:10px;
}
.label_close:hover{
    color:hsl(180, 52%, 96%);
    background-color:hsl(180, 14%, 20%) ;
    cursor: pointer;
}