* { box-sizing: border-box; }
html, 
body { 
    padding: 0px; 
    margin: 0px; 
    height: 100%; 
    width: 100%; 
    background: black 
}
header {
    margin: 50px auto;
    color: white;
    text-align: center;
    font-family: sans-serif;
}
.container {
    position: relative; 
    overflow: hidden;
    height: 100%; 
    width: 100%;
    background: black;
}
.fuchsia {            
    background: fuchsia;
}
.fuchsia::before {            
    background: fuchsia;
}
.fuchsia::after {            
    background: fuchsia;
}
.yellow {            
    background: yellow;
}
.yellow::before {            
    background: yellow;
}
.yellow::after {            
    background: yellow;
}
.wobble-1 {            
    animation: 4s ease-in-out infinite alternate wobble-1;
}
.wobble-2 {            
    animation: 4s ease-in-out infinite alternate wobble-2;
}
.see-saw {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    transform-origin: top;
}
.see-saw::before {
    content: " ";
    position: absolute;
    left: 0;
    width: 200%;
    height: 200%;
}
.see-saw::after {
    content: " ";
    position: absolute;
    right: 0;
    width: 200%;
    height: 200%;
}
@keyframes wobble-1 {            
    0% { transform: rotate(180deg); }
    100% { transform: rotate(-180deg); }
}
@keyframes wobble-2 {            
    0% { transform: rotate(-180deg); }
    100% { transform: rotate(180deg); }
}

.logo {
    margin: 25px auto;
    width: 400px;
    height: 400px;
    position: relative;
    z-index: 999;
    background: lime;
    overflow: hidden;
}
.clip {
    clip-path: circle(50% at 50% 50%);;
}