/* @media (max-width: 500px) {
} */

body {
  font-family: helvetica, sans-serif;
  /* max-width: 70vw; */
}

nav > a:link {
  text-decoration: none;
  color: white;
  font-weight: bold;
}

nav > a:visited {
  text-decoration: none;
  color: white;
  font-style: italic;
}

nav > a:hover {
  text-decoration: underline;
  color: rgb(253, 233, 101);
}

.logofont {
  font-family: 'Bigelow Rules', cursive;
}
.secondfont {
  font-family: 'Indie Flower', cursive;
}
.darkfont {
  color: #63458A;
}
.medfont {
  color: #357266;
}
.lightfont {
  color:#fde965;
}
.redfont {
  color: #F25F5C;
}
.whitefont {
  color:#F8F8FC;
}
.darkback {
  background-color: #63458A;
}
.medback {
  background-color: #357266;
}
.lightback {
  background-color: #fde965;
}
.whiteback {
  background-color: #F8F8FC;
}
.starback {
  background-image: url('../cgp-images/starry-faded.png');
  /* background image from vecteezy.com */
  background-repeat: repeat;
}
.fuzzy {
  text-shadow:#F8F8FC  1px 0 6px;
}
.shadowdark {
  text-shadow: 0 0 2px #63458A;
}
header {
  text-align: right;
}

.form>input,
textarea {
  border-radius: 5px;
  border: none;
  margin-bottom: 1em;
}

textarea {
  display: inline-block;
  vertical-align: text-top;
}
/* website list */
.list-group-item, .list-group-item.active > a:link {
  background-color: #F8F8FC;
  color: #63458A;
}
div.list-group > .active {
  background-color:#fde965;
  color: #63458A;
  border: 0;
}
div.list-group > a:hover {
  background-color: #357266;
  color: #F8F8FC;
}
input[type=submit] {
  background-color: #357266;
  color: white;
  padding: 12px 12px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #fde965;
  color: #357266;
}

/* rainbow 'hr' */
.rainbow-box {
  height: 5px;
  border-radius: 5px;
  background: linear-gradient(90deg,
      rgba(255, 0, 0, 1) 0%,
      rgba(255, 154, 0, 1) 10%,
      rgba(208, 222, 33, 1) 20%,
      rgba(79, 220, 74, 1) 30%,
      rgba(63, 218, 216, 1) 40%,
      rgba(47, 201, 226, 1) 50%,
      rgba(28, 127, 238, 1) 60%,
      rgba(95, 21, 242, 1) 70%,
      rgba(186, 12, 248, 1) 80%,
      rgba(251, 7, 217, 1) 90%,
      rgba(255, 0, 0, 1) 100%);
}