@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* The element to apply the animation to */
.main {
  background-color: #6BCAE2;
  animation-name: example;
  animation-duration: 10s;
  text-align: center;
}

h2 {
  font-family: 'Courgette', cursive;
}

label {
  font-family: 'Michroma', sans-serif;
}

.nav-item {
  width: 50px;
}

.tested {
  color: #097138;
  background-color: white;
}

.assault {
  color: #C2185B;
  background-color: white;
}

.abortion{
  color: #880E4F;
  background-color: white;
}

.wrapper {
  display: flex;  
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center; 
}

.wrapper > * {
/*   padding: 10px; */
  flex: 1 100%;
}

.header {
  background: #F01D7F;
}

.aside-1 {
  background-color: lightgreen;
}

.aside-2 {
  background: #CF9FFF;
}

@media all and (min-width: 600px) {
  .aside { flex: 1 0 0; }
}

@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

body {
  padding: 2em; 
}

.wordart {
  font-size: 36px;
  text-align: center;
  font-family: Arial, sans-serif;
  background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.std{
  color: #8a8a01;
  background-color: white;
}

.condoms{
  color: #0288D1;
  background-color: white;
}

.preg{
  color: #9B59B6;
  background-color: white;
}

.HIV-med{
  color: #FF5733;
  background-color: white;
}

.plan-b{
  color: #E040FB;
  background-color: white;
}

.gender{
  color: #7B1FA2;
  background-color: white;
}

.mental-health{
  color: #FB8C00;
  background-color: white;
}

.press-reminder{
  width: 70px;
  float: left;
  object-position: bottom -8px right -5px;
  height: 70px;
}
.press{
  object-position: bottom -10px right -40px;
  color: black;
}

/* 
body {
  padding: 2em; 
} */
.footer {
    background: #F01D7F; 
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.emergency { 
  background: #F01D7F; 
  body {
  margin: 0;
}
  font-family: 'Michroma', sans-serif;
} 

shader-art {
  display: block;
  width: 100%;
  height: 100%;
}