:root {
  /* Sweetie 16 Palette */
  --swty-very-dark-gray: #1a1c2c;
  --swty-dark-purple: #5d275d;
  --swty-light-red: #b13e53;
  --swty-light-orange: #ef7d57;
  --swty-light-yellow: #ffcd75;
  --swty-lime: #a7f070;
  --swty-light-green: #38b764;
  --swty-dark-cyan: #257179;
  --swty-dark-blue: #29366f;
  --swty-blue: #3b5dc9;
  --swty-light-blue: #41a6f6;
  --swty-light-cyan: #73eff7;
  --swty-very-light-red: #f4f4f4;
  --swty-gray: #94b0c2;
  --swty-slightly-dark-gray: #566c86;
  --swty-dark-gray: #333c57;
}

/* animations */

@keyframes rainbow {
  0% {
    background-color: red;
  }

  14.3% {
    background-color: orange;
  }

  28.6% {
    background-color: yellow;
  }

  42.9% {
    background-color: lime;
  }

  57.4% {
    background-color: cyan;
  }

  71.4% {
    background-color: plum;
  }

  85.7% {
    background-color: violet;
  }

  100% {
    background-color: red;
  }
}

@keyframes rainbow-border {
  0% {
    border-color: red;
  }

  14.3% {
    border-color: orange;
  }

  28.6% {
    border-color: yellow;
  }

  42.9% {
    border-color: lime;
  }

  57.4% {
    border-color: cyan;
  }

  71.4% {
    border-color: plum;
  }

  85.7% {
    border-color: violet;
  }

  100% {
    border-color: red;
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0%);
  }

  50% {
    transform: translateX(300%);
  }

  100% {
    transform: translateX(0%);
  }
}

/* font */

.federant-regular {
  font-family: "Federant", serif;
  font-weight: 400;
  font-style: normal;
}

.pixelify-sans {
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* core */

body {
  font-size: large;
  margin: 0 auto;
  background-image: url("https://bettysgraphics.neocities.org/images/backgrounds/stars%202.gif");
}

table,
tr,
th,
td {
  border: 1px solid var(--swty-dark-gray);
  border-collapse: collapse;
}

h1 {
  color: var(--swty-lime);
  text-shadow: 0 0 10px var(--swty-light-green);
}

h2,
h3 {
  color: var(--swty-light-cyan);
  text-shadow: 0 0 10px var(--swty-light-blue);
}

h4 {
  color: #41a6f6;
  text-shadow: 0 0 10px var(--swty-light-blue);
}

p,
li,
td,
th {
  color: purple;
  font-size: larger;
}


hr {
  background-color: red;
  animation: rainbow 5s linear infinite;
  height: 3px;
  border: none;
}

a {
  color: var(--swty-light-yellow);
  border-radius: 20px;
  padding-inline: 10px;
  margin: center;
  text-align: center;
}

a:hover {
  background-color: var(--swty-blue);
}

img {
  image-rendering: pixelated;
}

/* general styling */

.general-border {
  border-style: solid;
  border-color: magenta;
  animation: rainbow-border 5s linear infinite
}

.background-color-1 {
  background-image: url("https://bettysgraphics.neocities.org/images/backgrounds/water.gif");
}

.background-color-1 h1,
.background-color-1 h2 {
  color: darkmagenta;
  text-shadow: none;
}

.background-color-1 p,
.background-color-1 a {
  color: purple;
}

.background-color-2 {
  background-image: url("https://bettysgraphics.neocities.org/images/backgrounds/pattern%20625.gif");
}

.background-color-3 {
  background-image: url("https://bettysgraphics.neocities.org/images/backgrounds/pattern%2053.gif");
}

.background-color-4 {
  background-image: url("images/halo-infinite.png");
  background-size: cover;
}

/* utils */

.no-display-desktop {
  display: none;
}

.no-display-mobile {
  display: initial;
}

/* types */
.title {
  text-align: center;
  font-size: xx-large;
  color: var(--swty-light-yellow);
}

.panel {
  max-width: 720px;
}

.flex-container {
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 2vh;
}

.flex-container .center-panel {
  width: 35vw;
}

.flex-container .center-panel * {
  text-align: center;
}

.flex-container .center-panel li {
  text-align: left;
}

.flex-container .side-panel {
  width: 15%;
}

.flex-container .side-panel-left-img {
  text-align: right;
}

.vertical-flex-container {
  display: flex;
  gap: 2vh;
  flex-direction: column;
}

.profile-pic img {
  width: 100%
}

.image-collection,
.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.image-collection img {
  align-self: center;
}

.main-content {
  margin-bottom: 5vh;
  margin-top: 5vh;
  justify-content: center;
}

.back-home {
  width: 150px;
}

.topnav {
  overflow: hidden;
  font-size: large;
  display: flex;
  margin: auto;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 50vw;
}

.topnav h1 {
  margin: center;
  text-align: center;
}

.infinite-scroll {
  overflow: hidden;
  animation: scroll 30s linear infinite;
  width: 25%;
  background-image: url("https://bettysgraphics.neocities.org/images/backgrounds/pattern%20562.gif");
  text-align: center;
  font-size: medium;
}

.infinite-scroll h3 {
  color: red;
  text-shadow: initial;
}

.tags {
  display: flex;
  flex-wrap: wrap;
}

.tag a img {
  width: 88px;
  height: auto;
}

.chat {
  background-image: url("https://bettysgraphics.neocities.org/images/gadgets/xbox%201.gif");
}

.phil-spencer img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50vh;
}

/* Phone Compatibility */

@media (max-width: 1200px) {
  body {
    font-size: small;
  }

  p {
    font-size: large;
  }

  .flex-container {
    flex-direction: column;
    align-items: center;
  }

  .flex-container .center-panel,
  .flex-container .side-panel,
  .flex-container .topnav {
    width: 90%;
  }

  .flex-container .side-panel h1,
  .flex-container .side-panel h2,
  .flex-container .side-panel p {
    text-align: center;
  }

  .flex-container .center-panel {
    order: -1;
  }

  .flex-container .topnav {
    order: 0;
  }

  @keyframes scroll {
    0% {
      transform: translateX(0%);
    }

    50% {
      transform: translateX(100%);
    }

    100% {
      transform: translateX(0%);
    }
  }

  .infinite-scroll {
    animation: scroll 10s linear infinite;
    width: 50%;
  }

  .back-home {
    width: 100px;
  }

  .no-display-desktop {
    display: initial;
  }

  .no-display-mobile {
    display: none;
  }
}