:root {
  --darkblue: #000040;
  --yellow: #ffff84;
  --yellow-pale: #ffffda;
  --pink: #ff84ff;
  --pink-pale: #ffdaff;
  --aqua: #01ffff;
  --aqua-pale: #b2ffff;
  --green: #84ff84;
  --green-pale: #daffda;
  --orange: #f9c269;
  --orange-pale: #fdecd2;
  --lavender: #ce94ff;
  --lavender-pale: #f0deff; }

@keyframes sunrise {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@media (max-width: 755px) {
  .box { flex-grow: 1; }
}

@media (max-width: 970px) {
  .box { flex-grow: 1; }
}

body {
  padding: 5%;
  background:var(--darkblue);
  background-image: url("/images/starsrainbow.gif");
  font-family: sans-serif;
  color: white; }

.header,
.footer {
  width: 50%;
  margin: auto; }

.header {
  padding-bottom: 20px; }

.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10%; }

.box {
  float: left;
  box-sizing: border-box;
  width: 28%;
  min-width: 268px;
  border-radius: 24px;
  margin: 10px;
  padding: 20px;
  color:var(--darkblue); }

.sidebar {
  background:var(--yellow-pale);
  outline: 3px dotted var(--orange);
  text-align: center; }

.pink {
  background:var(--pink-pale);
  outline: 3px dotted var(--lavender); }

.aqua {
  background:var(--aqua-pale);
  outline: 3px dotted var(--lavender); }

.green {
  background:var(--green-pale);
  outline: 3px dotted var(--pink); }

.orange {
  background:var(--orange-pale);
  outline: 3px dotted var(--yellow); }

.lavender {
  background:var(--lavender-pale);
  outline: 3px dotted var(--orange); }

h1 {
  margin-top: 0px;
  margin-bottom: 15px;
  text-align: center;
  font-size: 2.75em;
  letter-spacing: 3px;
  background: linear-gradient(
    to right,
    var(--pink),
    var(--orange)
  );
  background-clip: text;
  -webkit-background-clip: text;
  tex-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  background-size: 500% auto;
  animation: sunrise 2s alternate infinite; }

h2 {
  margin-top: 0px;
  margin-bottom: 5px;
  text-align: center;
  font-size: 1.2em;
  letter-spacing: 3px;
  color:var(--lavender); }

p {
  margin-top: 0px;
  margin-bottom: 20px;
  line-height: 1.5; }

ul {
  margin-top: 0px;
  margin-bottom: 20px;
  padding-left: 20px;
  line-height: 1.5; }

br {
  margin-top: 10px;
  margin-bottom: 10px; }