:root {
  --primary: rgba(61, 52, 104, 0); /*background*/
  --primary-text: #ffffff; /*bottom disclaimer*/
  --secondary: #ffffff;/*contract*/
  --button: #34b0d5;/*outlines*/
  --button-outline: #34b0d5;/*outlines*/
  --secondary-text: #ffffff;/*Main text*/
  --accent:  #ff000000;/*Middle frame*/
  --accent-border: #22decb00/*Solid line around border*/;
  --accent-text: #ff0000;/*count and gas fees*/ 
}
@keyframes color {
  0%   { background: #33CCCC; }
  20%  { background: #33CC36; }
  40%  { background: #B8CC33; }
  60%  { background: #FCCA00; }
  80%  { background: #33CC36; }
  100% { background: #33CCCC; }
}

body {
  background: #33CCCC; /* Fallback */
  animation: color 30s infinite linear;
  text-align: center;
  padding: 2em;
}