*,
*::before,
*::after {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  box-sizing: border-box;
  display: flex;
  line-height: 1;
  min-height: 100%;
  min-width: 320px;
  overflow-x: hidden;
  word-wrap: break-word;
  background-color:#EDEDED;
  height: 100vh;
  flex-direction: column;
  margin: auto;
}
body.numbg {
  background-image: url("num.gif");
  background-repeat: repeat;
}
body.lilacbg {
  background-image: url("bgif095.gif");
  background-repeat: repeat;
}
.red {
  font-family: 'Arimo', sans-serif;
}
ul {
  list-style:none;
}
html {
  font-size:18pt;
}
body {
  align-items: center;
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  position: relative;
  z-index: 1;
  transition: opacity 1s ease-in-out 0s;
  width: 21rem;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
.header .right {
  width: calc(72% + (0.375rem/2));
}
.header .left {
  width: calc(28% + (0.375rem/2));
}
.buttons {
  cursor: default;
  display: flex;
  flex-wrap: wrap;
  letter-spacing: 0;
  padding: 0;
  margin: 0;
  justify-content: space-between;
  color: #696969;
  height: 1.25rem;
}
.red .buttons {
  color:#8f8f8f;
}
.olive .buttons {
  color: #F7FFF3;
}
.buttons li {
  width: 100%;
}
.buttons li a {
  box-sizing: border-box;
  display: inline-flex;
  width: 100%;
  height: 1.25rem;
  line-height: 1.25rem;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0.625rem;
  font-family: 'Arimo', sans-serif;
  font-size: 0.75em;
  font-weight: 400;
  text-align: right;
  border-radius: 2.5rem;
  box-shadow: 0rem 0rem 0.125rem 0rem #CC8597;
  background-color: #fff;
}
.red .buttons li a {
  box-shadow: 0rem 0rem 0.125rem 0rem #2e2e2e;
  background-color: #000;
}
.lilac .buttons li a {
  box-shadow: 0rem 0rem 0.125rem 0rem #5E5E5E;
}
.olive .buttons li a {
  box-shadow: 0rem 0rem 0.125rem 0rem #2e2e2e;
  background-color: #0a0a0a;
}
.olive .buttons .label {
  color: #F7FFF3;
}
.buttons li a .label {
  color:#8f8f8f;
  text-align: right;
  width: 100%;
}
.icons {
  display: flex;
  margin: 0;
  flex-direction: row;
  justify-content: flex-end;
  font-size: 0.75em;
  gap: 0.375rem;
}
.icons li a {
  border-radius: 2.75rem;
  color: #696969;
  height: 2em;
  width: 2em;
  background-color: #fff;
  box-shadow: 0rem 0rem 0.125rem 0rem #CC8597;
}
.red .icons li a {
  color: #8f8f8f;
  background-color:#000; 
  box-shadow: 0rem 0rem 0.125rem 0rem #2e2e2e;
}
.lilac .icons li a {
  box-shadow: 0rem 0rem 0.125rem 0rem #5E5E5E;
}
.olive .icons li a {
  color: #F7FFF3;
  background-color: #0a0a0a;
  box-shadow: 0rem 0rem 0.125rem 0rem #2e2e2e;
}
.icons li a {
  align-items: center;
  display: flex;
  justify-content: center;
}
.header {
  box-sizing: border-box;
  display: flex;
  width: 21rem;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem;
  background-color: #ffccd9;
  border: #9c9c9c solid 1px;
  border-bottom-width: 0px;
  border-top-left-radius: calc(0.375rem - 1px);
  border-top-right-radius: calc(0.375rem - 1px);
}
.red .header {
  background-color: #9E2824;
  border: #9f2a23 solid 1px;
}
.lilac .header {
  background-color: #EDD8FF;
}
.pink .header {
  background-color: #FFD9E7;
}
.olive .header {
  background-color: #84E56290;
  border: #429C45 solid 1px;
}
.hero {
  vertical-align: top;
  width: 100vw;
  box-sizing: border-box;
  height: 6.25rem;
  line-height: 0px;
  object-fit: cover;
  object-position: center;
  width: 100% !important;
  border-radius: 0.375rem;
  border:#9c9c9c solid 1px;
  padding: 0.375rem;
}
.red .image {
  box-sizing: border-box;
  width: 100%;
  height: 8.5rem;
  object-fit: cover;
  object-position: center;
  margin-left: calc(0.375rem * -1);
}
.main {
  background-color: #fff;
  border:#9c9c9c solid 1px;
  display: inline-block;
  padding: 0.375rem;
}
.red .main {
  background-color: #000;
  border: #9f2a23 solid 1px;
  color: white;
  display: flex;
}
.red .main .right {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: calc(55% + (0.375rem/2));
  flex-shrink: 0;
}
.red .main mark {
  box-sizing: border-box;
  color: #9f2925;
  background-color: rgba(120,32,29,0.565);
  font-family: "Fredoka One", cursive;
  font-size: 33px;
  font-weight: 400;
  text-align: left;
  line-height: 1.25;
  padding: 0;
  margin: 0;
}
.red .top {
  display: flex;
  justify-content: space-between;
}
.red .main h2 {
  margin: 0;
  position: relative;
}
.red p {
  margin: 0;
  font-size: 0.625em;
}
.red .tag {
  text-align: left;
  color: rgba(255,255,255,0.8);
  padding-left: 0.375rem;
  font-size: 0.5em;
  line-height: 1.25;
  font-weight: 400;
  margin-bottom: 0.125rem;
}
.red .top img {
  max-height: 2.5rem;
}
.red .top .pixels {
  max-height: 1rem;
}
.red .main .left {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: calc(45% + (0.375rem/2));
  max-width: 100%;
  padding: 0 0 0 0.375rem;
}
.red .main .caption {
  justify-content: center;
  line-height: 1.25;
  text-align: center;
  font-size: 0.75rem;
  margin-left: -0.75rem;
}
.lilac img {
  max-width: 10rem;
  max-height: 10rem;
}
.lilac p {
  font-family: 'Arimo', sans-serif;
  font-size: 0.625em;
  color: #696969;
}
.pink p {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  color: #5E5E5E;
  font-size: 0.625rem;
}
.main h2 {
  box-sizing: border-box;
  color: #696969;
  font-family: 'Send Flowers', cursive;
  padding-left: 0.375rem;
  font-size: 1.375em;
  line-height: 1.25;
  font-weight: 400;
  margin: 0.125rem 0;
}
.main .maintext {
  box-sizing: border-box;
  border: solid 1px #FFCCD9;
  padding: 0.375rem 0.515625rem;
  margin: auto;
  color: #696969;
  font-family: 'Inter', sans-serif;
  font-size: 0.75em;
  line-height: 1.25;
  font-weight: 500;
}
.main .maintext a {
  text-decoration: underline;
}
.red .main .bio {
  color: #fff;
  padding-left: 0.375rem;
  font-size: 0.75em;
  line-height: 1.25;
  font-weight: 400;
  margin: 0.5rem 0;
}
.red .main .interests {
  box-sizing: border-box;
  border: solid 1px rgba(158,40,36,0.565);
  padding: 0.125rem 0.171875rem;
  color: rgba(255,255,255,0.8);
  font-size: 0.625em;
  line-height: 1.25;
  font-weight: 400;
  overflow-wrap: break-word;
  font-kerning: auto;
  width: 100%;
}
.main .note {
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  font-size: 0.75em;
  color: #696969;
  word-wrap: break-word;
  padding-left: 0.375rem;
  line-height: 1.25;
  font-weight: 500;
  margin-top: 0.375rem;
  margin-bottom: 0;
  position: relative;
}
.red .main .note {
  font-size: 0.625em;
  font-family: 'Arimo', sans-serif;
  color: rgba(255,255,255,0.8);
  padding-left: 0.375rem;
  text-align: left;
  line-height: 1.125;
  font-weight: 400;
}
.accent {
  color: #FFCCD9;
}
.lilac .main {
  display: flex;
  flex: 0;
  box-sizing: border-box;
  align-items: center;
}
.lilac .main .left {
  width: calc(30% + (0.375rem/3));
  margin-left: -0.375rem;
  padding-left: 0.375rem;
  display: flex;
  flex-direction: column;
}
.lilac .main .image {
  height: 6.25rem;
  max-width: 100%;
  object-fit: cover;
}
.lilac .main .tag {
  text-align: center;
  color: #696969;
  font-family: 'Arimo', sans-serif;
  padding: 0 0.125rem;
  font-size: 0.5em;
  line-height: 1.375;
  font-weight: 400;
  margin: 0.1rem 0;
}
.lilac .left ul {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.lilac .left .break {
  max-width: 100%;
}
.lilac .main .center {
  width: calc(36% + (0.375rem/3));
  box-sizing: border-box;
  padding-left: 0.375rem;
  max-width: 100%;
}
.lilac .main h2 {
  text-align: left;
  color: #d8cffa;
  font-family: 'Rammetto One', sans-serif;
  padding-left: 0.375rem;
  font-size: 1.125em;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
}
.lilac .main .button {
  margin: 0.375rem 0;
  margin-bottom: 0.5rem;
  padding: 0 0.625rem;
  height: 1.25rem;
  line-height: 1.25rem;
  font-size: 0.625em;
  font-family: 'Arimo', sans-serif;
  background-color: #edd8ff;
  color: #696969;
  border-radius: 0.625rem;
  text-align: center;
}
.lilac .main .left .button {
  margin-top: 0;
  margin-bottom: 0.375rem;
}
.lilac .main .button i {
  color: #FF2EB2;
  font-size: 0.9em;
}
.lilac .main .bio {
  padding-left: 0.375rem;
  margin: 0.125rem 0;
  line-height: 1.25;
}
.lilac .main .interests {
  display: table-cell;
  margin: 0;
  box-sizing: border-box;
  border: solid 1px #dabdfc;
  font-family: 'Arimo', sans-serif;
  padding: 0.125rem;
  line-height: 1.125;
  vertical-align: baseline;
}
.lilac .main mark {
  background-color: #eee0ff;
  color: #696969;
  padding: 0 0.25rem;
}
.lilac .main .note {
  font-size: 0.625em;
  font-family: 'Arimo', sans-serif;
  line-height: 1;
  color: #707070;
  font-weight: 400;
  padding: 0;
  margin-top: 0.25rem;
}
.lilac .main .right {
  width: calc(34% + (0.375rem/3));
  max-width: 100%;
  padding: 0 0 0 0.375rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lilac .main .stamp {
  max-height: 1rem;
  object-fit: none;
}
.lilac .main .right ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  justify-content: center;
  flex: 0;
  margin: 0;
  margin-top: 0.125rem;
}
.lilac .main .right .gallery img {
  height: auto;
  max-height: 2.625rem;
}
.pink .main {
  display: flex;
  font-size: 0.625rem;
}
.pink .main .left {
  width: calc(50% + 0.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pink .main .right {
  width: calc(50% + 0.25rem);
  text-align: center;
  justify-content: center;
  line-height: 1.25;
}
.pink .main h2 {
  color: #FFA0C9;
  font-family: 'Poppins', sans-serif;
  font-size: 1.625rem;
  text-align: center;
  font-weight: bold;
}
.pink .main .bio {
  margin: 0.375rem 0;
  font-size: 0.625rem;
  text-align: center;
}
.pink hr {
  margin: 0.375rem 0.5rem;
  border: 0;
  border-top: 2px #FFA0C9 dashed;
}
.pink .main .note {
  width: calc(100% - 0.125rem);
  font-family: 'Poppins', sans-serif;
  font-size: 0.5rem;
  text-align: left;
  padding: 0.125rem;
  border: 1px #FFD9E7 solid;
}
.pink .main .left .gallery {
  padding: 0;
  width: auto;
}
.pink .main .left .gallery img {
  max-height: 2.875rem;
}
.pink .main .image {
  max-width: calc(100% - 0.5rem);
}
.pink .main .tag {
  margin: -0.125rem 0;
  text-align: center;
  font-size: 0.5rem;
}
.pink .main .interests {
  text-align: center;
  margin-left: 0.125rem;
}
.pink .main span {
  color: #FFA0C9;
}
.pink .main .gallery {
  display: flex;
  justify-content: center;
}
.pink .main .blinkies {
  padding: 0;
  justify-content: center;
  margin: 0.125rem;
}
.pink .main .blinkies li {
  box-sizing: border-box;
}
.pink .main .blinkies li img {
  max-width: 75%;
  height: auto;
}
.olive p {
  font-size: 0.625rem;
}
.olive .gallery li img {
  max-height: 2.5rem;
}
.olive .main {
  display: flex;
  flex-direction: column;
  background-color: #0a0a0a;
  color: #429C45;
  border: #429C45 1px solid;
  border-top: none;
}
.olive .main .top {
  display: flex;
}
.olive .main .bottom {
  display: flex;
}
.olive .top .left {
  width: calc(33% + 0.125rem);
}
.olive .top .left .decor {
  display: flex;
  padding: 0;
  margin: 0;
  justify-content: space-around;
}
.olive .top .left .decor .big {
  width: 95px;
}
.olive .top .left img {
  max-width: calc(100% - 0.125rem);
}
.olive .top .center {
  width: calc(34% + 0.125rem);
  text-align: center;
}
.olive .top .right {
  width: calc(33% + 0.125rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.olive .bio {
  font-family: 'Arimo', sans-serif;
  margin: 0;
}
.olive h2 {
  font-family: 'Press Start 2P', sans-serif;
  font-size: 1.25rem;
  padding: 0;
  color: #fff;
}
.olive .top .center .decor {
  max-width: 100%;
}
.olive .stamps {
  display: flex;
  padding: 0;
  margin: 0;
}
.olive .top .right .decor {
  max-width: calc(95% - 0.125rem);
  margin-bottom: 0.125rem;
}
.olive .main .stamps li img {
  max-width: calc(100% - 0.25rem);
}
.olive .main .stamps li {
  flex: 0 0 50%;
}
.olive .blinkies {
  padding: 0;
  margin: 0;
}
.olive .top .img3 {
  width: 90%;
  height: auto;
}
.olive .misc {
  display: flex;
  padding: 0;
  margin: 0;
}
.olive .gallery {
  display: flex;
  margin: 0;
  padding: 0;
}
.olive .middle .break {
  max-width: 100%;
}
.olive .middle .container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.olive .middle .container img {
  max-height: 3rem;
}
.olive .middle .container .interests {
  max-width: 100%;
  margin: 0.125rem;
}
.olive .bottom .left {
  max-width: calc(60% - 0.25rem);
}
.olive .pixels {
  width: calc(100% - 0.25rem);
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: space-around;
}
.footer {
  box-sizing: border-box;
  display: flex;
  width: 21rem;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem;
  background-color: #fff;
  border: #9c9c9c solid 1px;
  border-top-width: 0px;
  border-bottom-left-radius: calc(0.375rem - 1px);
  border-bottom-right-radius: calc(0.375rem - 1px);
}
.red .footer {
  background-color: #000;
  border: #9f2a23 solid 1px;
  border-top-width: 0px;
}
.footer .left {
  display: flex;
  box-sizing: border-box;
  width: calc(20% + (0.375rem/3));
}
.footer .left img {
  height: 45px;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}
.lilac .footer .left {
  display: flex;
  justify-content: center;
}
.lilac .footer .left img {
  margin: 0;
}
.red .footer .left img {
  max-width: 100%;
  height: auto;
}
.red .footer .right {
  display: flex;
  padding: 0 0 0 0.375rem;
  flex-shrink: 0;
  justify-content: flex-start;
}
.red .footer .right svg {
  fill: #9F2A23;
}
.lilac .footer .right {
  display: flex;
  justify-content: center;
  width: calc(20% + (0.375rem/3));
}
.lilac .footer .right svg {
  fill: #edd8ff;
}
.footer .center {
  display: flex;
  box-sizing: border-box;
  width: calc(60% + (0.375rem/3));
}
.footer .center img {
  margin: auto;
  max-width: 100%;
}
.red .footer .center {
  width: calc(53% + (0.375rem/3));
  max-width: 100%;
  display: flex;
  justify-content: space-around;
}
.red .footer .center img {
  height: auto;
  max-height: 2rem;
  margin: 0;
}
.footer .right {
  box-sizing: border-box;
  width: calc(15% + (0.375rem/3));
}
.red .footer .left {
  display: flex;
  width: calc(32% + (0.375rem/3));
  flex-direction: column;
  gap: 0.25rem;
}
.footer svg {
  fill: #ffccd9;
  width: 1em;
  height: 1em;
}
.footer ul {
  margin: 0;
  padding: 0;
  display: flex;
  font-size: 1.125em;
  gap: 0.375rem;
  justify-content: center;
}
.footer li a {
  height: 1em;
  width: 1em;
}
.pink .footer svg {
  fill: #FFD9E7;
}
.neon-text {
    font-size: 4rem;
    color: #fff;
    text-shadow: 0 0 5px #85FF5A, 0 0 10px #85FF5A, 0 0 20px #85FF5A, 0 0 40px #85FF5A, 0 0 80px #85FF5A;
    animation: glow 1.5s infinite alternate;
}

@keyframes glow {
    0% {
        text-shadow: 0 0 5px #85FF5A, 0 0 10px #85FF5A, 0 0 20px #85FF5A, 0 0 40px #85FF5A, 0 0 80px #85FF5A;
    }
    100% {
        text-shadow: 0 0 10px #3A9C45, 0 0 20px #3A9C45, 0 0 40px #3A9C45, 0 0 80px #3A9C45, 0 0 160px #3A9C45;
    }
}

@media (max-width: 768px) {
  html {
    font-size: 16px;
  }
  .main {
    width: 100%;
  }
  .left .center .right {
    width: 100%;
    max-width: none;
  }
}