.boll {
    position: absolute;
    background-image: linear-gradient(to right, darkgrey 0%, darkgrey 50%, silver 50% ) ;
    width: 300px;
    height: 300px;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%); 
    border-radius: 50%;
    z-index: 5;
}
.inmet {
    position: absolute;
    background-image: linear-gradient(to right, dimgrey 0%, dimgrey 50%, gainsboro 50% );
    width: 100px;
    height: 100px;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%); 
    border-radius: 50%;
    z-index: 5;
}
.metcas {
    position: absolute;
    background-image: linear-gradient(to right, darkgrey 0%, darkgrey 50%, silver 50% );
    width: 50px;
    height: 50px;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%); 
    border-radius: 50%;
    z-index: 5;
}
.metalline {
    position: absolute;
    background-image: linear-gradient(to right, dimgrey 0%, dimgrey 50%, gainsboro 50% );
    width: 30px;
    height: 120px;
    background-color: paleturquoise;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%); 
    z-index: 5;
}
.contact {
    position: absolute;
    background-image: linear-gradient(to right, #252525 0%, #252525 50%, rgb(48, 59, 59) 50%);
    width: 100px;
    height: 100px;
    top: 74%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0px 0px 20px 20px;
    z-index: 6;
    border-width: 50px 0px 0px 0px;
    border-style: solid; 
    border-left: 0px;
    
    border-image: linear-gradient(to right, rgb(28, 49, 49) 0%, rgb(28, 49, 49) 50%, darkslategrey 50%);
    border-image-slice: 1;
    box-sizing: border-box;
}

.contactbotter {
    position: absolute;
    background-image: linear-gradient(to right, #252525 0%, #252525 50%, rgb(48, 59, 59) 50% );
    width: 50px;
    height: 30px;
    top: 86%;
    left: 50%;
    transform: translate(-50%, -50%); 
    border-radius: 0px 0px 20px 20px;
}
.container {
    position: absolute;
    width: 500px;
    height: 500px;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%); 
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
  }
  .container input[type="checkbox"] {
    display: none;  /* Hide the actual checkbox */
}
.boll::before,
.metcas::before,
.inmet::before,
.metalline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
    border-radius: inherit;
}

/*More PseudoElementsssssssssssssssssss*/
#checkerbox:checked ~ .boll::before {
    background-image : linear-gradient(to right, gold 0%, gold 50%, #ffe645 50%);
}
#checkerbox:checked ~ .metcas::before {
    background-image : linear-gradient(to right, gold 0%, gold 50%, #ffe645 50%);
}
#checkerbox:checked ~ .inmet::before {
    background-image : linear-gradient(to right, #d27e00 0%, #d27e00 50%, goldenrod 50%);
}
#checkerbox:checked ~ .metalline::before {
    background-image : linear-gradient(to right, #d27e00 0%, #d27e00 50%, goldenrod 50%);  
}