@charset "utf-8";

.sphere {
    border-radius: 100%;
    width: 50px;
    height: 50px;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
    /*margin-bottom: 20px;*/
    text-align: center;
 /*   padding: 10 10px 10px;*/
/*    border: #575851;
    border-width: 1q;*/
 /*   background-image: "images/w0.png";*/
}

.hemisphere {
    width: 50%;
    height: 100%;
}

.light {
/*    background-color: #F4F6F0;*/
/*    background-color: #FEF6D5;*/    
    background-color: #FEF6D5;    
}

.dark {
    background-color: #575851;
}

.divider,
.divider:after {
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 100%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.divider {
    background-color: #575851; /* Dark */
}

.divider:after {
    content: '';
/*    background-color: #F4F6F0;  Light */
    background-color: #FEF6D5; /* Light */    
    transform: rotateY(180deg);
}