/* circle.css */
:root {
  --dfactor: 2s;
}
*{
/*    margin: 0px;
    padding: 0px; */
/*    box-sizing: border-box; */
}

div {
/*  display: flex; */
  justify-content: center;
  align-items: center;
}

body{
    text-align: center;
    font-family: Arial;
}

main 

.circle1{	
	position: fixed;
    animation-name: rotate1;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
}

.circle2{
	position: fixed;
    animation-name: rotate2;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate1{
    from{ transform: rotate(360deg); }
    to{ transform: rotate(-360deg); }
}

@keyframes rotate2{
    from{ transform: rotate(-360deg); }
    to{ transform: rotate(360deg); }  
}

.button01 {
  position: fixed;
  left: 40%;
  top: 50%;
}
.button02 {
  position: fixed;
  left: 50%;
  top: 21%;
}
.button03 {
  position: fixed;
  left: 30%;
  top: 40%;
}
.round-button {
  height: 159px;
  width: 159px;
  /* Rounded corners */
  border-radius: 50%;
  /* Flexbox container */
  /*
  display: flex;
  flex-wrap: wrap;
  */
  /* Text alignment and spacing */
  justify-content: center;
  align-items: center;  
/*  padding: 10px;
  margin: 10px; */
  /* Background color and text color */
  font-size: 1.25rem;
  background-color: #183663;
  color: orange;
  cursor: pointer;
  opacity: 1; /* initial opacity */
/*  animation: fade-out-in 8s infinite; */
  animation : color-fade1 calc(var(--dfactor) * 8) infinite, 
              color-fade2 calc(var(--dfactor) * 8) infinite;
}
.button2 {
  background-color: #ffa500;
  color: #183663;
/*  animation : hue-shift calc(var(--dfactor) * 2) infinite;*/
 /* background-image: radial-gradient(circle, #ff0000, #00ff00); */
  animation : color-fade3 calc(var(--dfactor) * 8) infinite, 
              color-fade4 calc(var(--dfactor) * 8) infinite;
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.75;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in-out {
  0%,100% { opacity: 0.66; }
  50% { opacity: 1; }
}
@keyframes fade-out-in {
  0%,100% { opacity: 1; }
  50% { opacity: 0.66; }
}
@keyframes color-fade1 {
   from { background-color: #ffa500; }	
   to { background-color: #183663; }
}
@keyframes color-fade2 {
   from { color: #183663; }	
   to { color: #ffa500; }
}
@keyframes color-fade3 {
   from { background-color: #183663; }	
   to { background-color: #ffa500; }
}
@keyframes color-fade4 {
   from { color: #ffa500; }	
   to { color: #183663; }
}
@keyframes hue-shift {
  0% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(18deg);
  }
  100% {
    filter: hue-rotate(0deg);
  }
}
.delay1 { animation-delay: calc(var(--dfactor) * 0); }
.delay2 { animation-delay: calc(var(--dfactor) * 1); }
.delay3 { animation-delay: calc(var(--dfactor) * 2); }
.delay4 { animation-delay: calc(var(--dfactor) * 3); }
.delay5 { animation-delay: calc(var(--dfactor) * 4); }
.delay6 { animation-delay: calc(var(--dfactor) * 5); }
.delay7 { animation-delay: calc(var(--dfactor) * 6); }
.delay8 { animation-delay: calc(var(--dfactor) * 7); }
/*
.delay2 { animation-delay: 2s; }
.delay3 { animation-delay: 4s; }
.delay4 { animation-delay: 6s; }
.delay5 { animation-delay: 8s; }
.delay6 { animation-delay: 10s; }
.delay7 { animation-delay: 12s; }
.delay8 { animation-delay: 14s; }*/