body {
   background-color:rgba(15,24,35,1);	
   font-family: Helvetica, Arial, Sans-serif;
}
.container {
   display: flex;
   flex-direction: column;
   min-height: 70vh;
}
header,
main,
footer {
   margin: 0;
   display: block; 
   color: #ffdb15; /* for old browsers */
   color: rgba(255,219,21,1);
   font-family: Helvetica, Arial, Sans-serif;
}
header {
   height: 20px;
/*   background-color: rgba(255,219,21,1); */
}
main {
   flex: 1;
}
footer {
   background-color: none;
   text-align: center;
   font-size: 14px;
   line-height: 1.5em;
   padding: 2px;
}
a {
   color:rgba(254,143,25,1);
}
.transparent {
   color: #000; /* fallback for older browsers */
   color: rgba(255,255,255,0); # white + 100% transparency
   font-size: 8px;
}

.rot_cw1 {
   position: absolute;
   top:40%;
   left:50%;
   width:300px;
   height:300px;
   margin:-150px 0 0 -150px;
   -webkit-animation:spin-cw 120s linear infinite;
   -moz-animation:spin-cw 120s linear infinite;
   animation:spin-cw 120s linear infinite;
}

.rot_cw2 {
   position: absolute;
   top:40%;
   left:50%;
   width:300px;
   height:300px;
   margin:-150px 0 0 -150px;
   -webkit-animation:spin-cw 30s linear infinite;
   -moz-animation:spin-cw 30s linear infinite;
   animation:spin-cw 30s linear infinite;
}

.rot_ccw {
   position: absolute;
   top:40%;
   left:50%;
   width:300px;
   height:300px;
   margin:-150px 0 0 -150px;
   -webkit-animation:spin-ccw 20s linear infinite;
   -moz-animation:spin-ccw 20s linear infinite;
   animation:spin-ccw 20s linear infinite;
}

   @-moz-keyframes spin-cw { 100% { -moz-transform: rotate(360deg); } }
   @-webkit-keyframes spin-cw { 100% { -webkit-transform: rotate(360deg); } }
   @keyframes spin-cw { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

   @-moz-keyframes spin-ccw { 100% { -moz-transform: rotate(-360deg); } }
   @-webkit-keyframes spin-ccw { 100% { -webkit-transform: rotate(-360deg); } }
   @keyframes spin-ccw { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }