HTML, BODY {
    margin: 0;
    padding: 0;
    font-family: arial;
    text-align: center;
    
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(252,245,226,1) 47%, rgba(255,237,191,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(252,245,226,1)), color-stop(100%, rgba(255,237,191,1)));
    background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(252,245,226,1) 47%, rgba(255,237,191,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(252,245,226,1) 47%, rgba(255,237,191,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(252,245,226,1) 47%, rgba(255,237,191,1) 100%);
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(252,245,226,1) 47%, rgba(255,237,191,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffedbf', GradientType=1 );

}

.canvas {
    width: 96dvw;
    height: 96dvh;
    margin: 2dvh 2dvw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.canvas .header {
    height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ybl {
    width: 6vmax;
    height: 6vmax;
    position: relative;
}

.ybl .logo {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
}
.ybl .logo IMG {
    width: 100%;
    height: 100%;
}

.ybl .fsw {
    width: 50%;
    height: 50%;
    position: absolute;
    z-index: 1;
    margin-left: 2.5vmax;
    margin-top: 2.5vmax;
    overflow: hidden;
}
 .ybl .fsw .wheel {
	 height: 200%;
	 width: 200%;
	 border: 0 solid #de0000;
	 border-radius: 100%;
	 position: absolute;
	 margin-left: -100%;
	 margin-top: -100%;
	 
}
 .ybl .fsw .wheel .spoke {
	 height: 100%;
	 width: 2%;
	 margin: 0 auto;
	 position: absolute;
	 left: 49.5%;
    
    
background: rgba(0,0,0,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 67%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0,0,0,1)), color-stop(0%, rgba(0,0,0,1)), color-stop(67%, rgba(0,0,0,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 67%);
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 67%);
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 67%);
background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 67%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de0000', endColorstr='#de0000', GradientType=1 );


}
 .ybl .fsw .wheel .spokes {
	 height: 100%;
	 width: 100%;
	 position: absolute;
}
 .spoke:nth-of-type(1) {
	 transform: rotate(0deg);
}
 .spoke:nth-of-type(2) {
	 transform: rotate(15deg);
}
 .spoke:nth-of-type(3) {
	 transform: rotate(30deg);
}
 .spoke:nth-of-type(4) {
	 transform: rotate(45deg);
}
 .spoke:nth-of-type(5) {
	 transform: rotate(60deg);
}
 .spoke:nth-of-type(6) {
	 transform: rotate(75deg);
}
 .spoke:nth-of-type(7) {
	 transform: rotate(90deg);
}
 .spoke:nth-of-type(8) {
	 transform: rotate(105deg);
}
 .spoke:nth-of-type(9) {
	 transform: rotate(120deg);
}
 .spoke:nth-of-type(10) {
	 transform: rotate(135deg);
}
 .spoke:nth-of-type(11) {
	 transform: rotate(150deg);
}
 .spoke:nth-of-type(12) {
	 transform: rotate(165deg);
}
 .spoke:nth-of-type(13) {
	 transform: rotate(180deg);
}
 .spoke:nth-of-type(14) {
	 transform: rotate(195deg);
}
 .spoke:nth-of-type(15) {
	 transform: rotate(210deg);
}
 .spoke:nth-of-type(16) {
	 transform: rotate(225deg);
}
 .spoke:nth-of-type(17) {
	 transform: rotate(240deg);
}
 .spoke:nth-of-type(18) {
	 transform: rotate(255deg);
}
 .spoke:nth-of-type(19) {
	 transform: rotate(270deg);
}
 .spoke:nth-of-type(20) {
	 transform: rotate(285deg);
}
 .spoke:nth-of-type(21) {
	 transform: rotate(300deg);
}
 .spoke:nth-of-type(22) {
	 transform: rotate(315deg);
}
 .spoke:nth-of-type(23) {
	 transform: rotate(330deg);
}
 .spoke:nth-of-type(24) {
	 transform: rotate(345deg);
}
 @keyframes cwise {
	 from {
		 transform: rotate(0deg);
	}
	 to {
		 transform: rotate(360deg);
	}
}
 @keyframes countwise {
	 from {
		 transform: rotate(0deg);
	}
	 to {
		 transform: rotate(-360deg);
	}
}
 .spokes {
	 animation: cwise 10s linear infinite;
}