body{
    margin:0;
    padding: 0;
    min-height: 100vh;
    display:flex;
    flex:1;
    align-items:center;
    justify-content:center;
    flex-direction:row;
    background:rgb(255, 255, 255);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    --bgcb: rgba(255, 255, 255, 0.78);
    --bgcw: rgba(255, 255, 255, 0.692);
    --iconwide: 512px;
    overflow: hidden;
}

.viewer{
    min-height: var(--iconwide);
    min-width: var(--iconwide);
    max-height: var(--iconwide);
    max-width: var(--iconwide);
    display: flex;
    flex: 1;
    flex-direction: row;
    overflow:hidden;
    transform: rotate(0deg);
    z-index: 2;
    align-items: center;
    justify-content: center;
    background: var(--bgcb);
}

#container{
    outline: 2px solid rgb(27, 25, 25);
    width: 64vmin;
    height:64vmin;
    cursor: pointer;
    display: block;
    transition: 1s ease-in-out;
}

#container:hover{
    transform: rotate(135deg);
    filter: drop-shadow(3px 5px 2px rgba(17, 16, 16, 0.623));
}

#circle{
    fill: rgba(172, 143, 90, 0.87);
}

#circle:hover{
    filter: drop-shadow(0 0 1px rgb(0, 226, 0));
}

path{
    stroke: rgb(4, 13, 46);
    stroke-width: .15px;
    transition: d 0.75s;
}

#container:hover > #stick0deg {
    d: path("M7,5 l2,0");
}

#container:hover > #stick45deg {
    d: path("M6.4,3.6 l1.41,-1.41");
}

#container:hover > #stick90deg {
    d: path("M5,3 l0,-2");
}

#container:hover > #stick135deg {
    d: path("M3.6,3.6 l-1.41,-1.41");
}

#container:hover > #stick180deg {
    d: path("M3,5 l-2,0");
}

#container:hover > #stick225deg {
    d: path("M3.6,6.4 l-1.41,1.41");
}
  
#container:hover > #stick270deg {
    d: path("M5,7 l0,2");
}
  
#container:hover > #stick315deg {
    d: path("M6.4,6.4 l1.41,1.41");
}