/* =========================================================
   FONT
========================================================= */

@font-face {
  font-family: "JetSet";
  src: url("jetsetfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}


/* =========================================================
   GLOBAL
========================================================= */

html {
  background-image: url("bg-pattern.png");
  background-repeat: repeat;
  background-size: 256px 256px;

  animation: scrollBg 20s linear infinite;

  overscroll-behavior: none;
}

body {
  margin: 0;
  min-height: 100vh;

  overflow-x: hidden;

  font-family: JetSet, Sans-Serif;
}

.page {
  max-width: 1024px;
  margin: 0 auto;
  padding-top: 64px;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes scrollBg {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 256px 0;
  }
}

@keyframes scrollBanner {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 512px 0;
  }
}

@keyframes scrollText {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-200%);
  }
}
@keyframes scrollImages {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes breathe {
  0% {
    transform: scale(1) rotate(-10deg);
  }

  50% {
    transform: scale(1.04) rotate(-9deg);
  }

  100% {
    transform: scale(1) rotate(-10deg);
  }
}

@keyframes wiggle {
  0% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(5deg);
  }

  100% {
    transform: rotate(-5deg);
  }
}

@keyframes glitchHop {
  0% {
    transform: translate(-200px, -120px) scale(0.3) rotate(-40deg);
    opacity: 0;
  }

  10% {
    transform: translate(180px, 80px) scale(1.4) rotate(25deg);
    opacity: 1;
  }

  20% {
    transform: translate(-120px, -60px) scale(0.9) rotate(-20deg);
  }

  30% {
    transform: translate(140px, -90px) scale(1.2) rotate(15deg);
  }

  45% {
    transform: translate(-60px, 40px) scale(1.05) rotate(-10deg);
  }

  60% {
    transform: translate(30px, -20px) scale(1.1) rotate(8deg);
  }

  75% {
    transform: translate(-10px, 10px) scale(0.98) rotate(-3deg);
  }

  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

@keyframes clickPop {
  0% {
    transform: translate(-50%, -50%) scale(1.5);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.2) rotate(-6deg);
  }

  100% {
    transform: translate(-50%, -50%) scale(1.5);
  }
}


/* =========================================================
   SHARED PANELS
========================================================= */

.main-container,
.banner,
.medium-column,
.flex-content {
  position: relative;

  margin: 20px 16px 24px 16px;

  background: linear-gradient(
    180deg,
    rgb(255, 183, 3),
    rgb(251, 133, 0)
  );

  border: 2px solid #fb8500;
  border-radius: 10px;

  color: #023047;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.main-container {
  background: #023047;

  background-color: rgba(2, 48, 71, 0.5);
  backdrop-filter: blur(4px);

  border: 2px solid #ffb703;

  border-top-right-radius: 128px;
  border-bottom-left-radius: 64px;

  padding-bottom: 32px;
}


/* =========================================================
   HEADER / LOGO AREA
========================================================= */

.logo-wrap-entry {
  position: relative;

  transform-origin: center;

  animation: glitchHop 0.4s;

  z-index: 2;
}

.logo {
  position: absolute;

  left: -250px;
  top: -110px;

  width: 80%;

  pointer-events: none;

  animation: breathe 4s ease-in-out infinite;
}

.avatar {
  position: absolute;

  right: -300px;
  top: -110px;

  width: 50%;

  transform: rotate(-30deg);

  pointer-events: none;
}


/* =========================================================
   SPEECH BUBBLE
========================================================= */

.speech-wrapper {
  position: relative;
}

.speech {
  position: absolute;

  right: 120px;
  top: -90px;

  width: 40%;
}

.speech-text {
  position: absolute;

  right: 3%;

  max-width: 300px;
  max-height: 75px;

  overflow: auto;

  font-size: 16px;
  color: #000000;

  transform: translate(-50%, -50%) rotate(-4deg);
}


/* =========================================================
   SPEECH BUTTON
========================================================= */

.speech-button-wrapper {
  position: absolute;

  right: 13%;
  top: 20px;

  width: 32px;

  transform: translate(-50%, -50%);
  transform-origin: center;
}

.speech-button {
  display: block;

  width: 100%;

  animation: breathe 1.2s ease-in-out infinite;
}

.speech-button-wrapper:hover {
  cursor: pointer;

  transform: translate(-50%, -50%) scale(1.5) rotate(-8deg);
}

.speech-button-wrapper.click {
  animation: clickPop 0.15s ease;
}


/* =========================================================
   TABS
========================================================= */

.tab {
  position: absolute;

  top: -24px;
  left: 12px;

  padding: 4px 10px;

  font-family: JetSet, Sans-Serif;
  font-size: 12px;
  font-weight: bold;

  background: #ffb703;

  border: 2px solid #fb8500;
  border-bottom: none;

  border-top-left-radius: 10px;
  border-top-right-radius: 10px;

  z-index: 4;
}


/* =========================================================
   TAB BUTTONS
========================================================= */

.tab-buttons {
  position: absolute;

  top: -24px;
  left: 12px;

  display: flex;

  width: 300px;
  height: 24px;

  align-content: flex-start;
}

.tab-buttons button {
  position: relative;

  margin-right: 12px;
  padding: 4px 10px;
  padding-top: 2px;

  font-family: JetSet, Sans-Serif;
  font-size: 12px;
  font-weight: normal;

  color: #023047;

  background: #ff9f02;

  border: 2px solid #fb8500;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;

  z-index: 0;
}

.tab-buttons button:not(.active):hover {
  cursor: pointer;

  transform: translate(0, -2px);

  height: 26px;

  padding-top: 2px;
  padding-bottom: 6px;
}

.tab-buttons button.active {
  font-size: 16px;
  font-weight: bold;

  height: 29px;

  padding-top: 4px;
  padding-bottom: 8px;

  transform: translate(0, -4px);

  border-bottom: none;

  background: #ffb703;
}


/* =========================================================
   BANNER
========================================================= */

.banner {
  position: relative;

  height: 96px;
  padding: 16px;

  overflow: hidden;

  text-align: center;

  background-image: url("banner-pattern.png");
  background-repeat: repeat;
  background-size: 512px 128px;

  animation: scrollBanner 20s linear infinite;

  border-top-right-radius: 128px;
  border-bottom-left-radius: 64px;

  z-index: 1;
}


/* =========================================================
   SCROLLING BANNER
========================================================= */

.scrolling-banner {
  display: flex;
  align-items: center;

  height: 32px;

  margin-top: 16px;
  margin-bottom: 16px;

  overflow: hidden;

  background-image: url("tube.png");

  border: 2px solid #fb8500;
}

.scrolling-banner-empty {
  overflow: hidden;
  width: 100%;
  margin-top: 16px;
  margin-bottom: 16px;
}

.scrolling-banner-text {
  display: inline-block;

  white-space: nowrap;

  padding-left: 100%;

  color: #023047;

  animation: scrollText 30s linear infinite;
}

.scrolling-banner-empty:hover .blinkies-banner {
  animation-play-state: paused;
}

/* =========================================================
   BLINKIES BANNER
========================================================= */
.blinkies-banner {
  display: flex;
  width: max-content;

  animation: scrollImages 20s linear infinite;
}

/* =========================================================
   NAVIGATION
========================================================= */

.navigation {
  position: relative;

  left: 30%;
  gap: 12px;

  display: flex;
  justify-content: flex-end;

  width: 45%;
}


/* =========================================================
   IFRAME
========================================================= */

.post-frame {
  display: none;

  flex: 1;

  width: 100%;

  border: none;
  outline: none;
}

.post-frame.active {
  display: block;
}


/* =========================================================
   IMAGES
========================================================= */

.pfp {
  max-width: 100%;

  animation: wiggle 1s steps(1) infinite;
}

.link-button {
  max-width: 88px;
  max-height: 31px;

  cursor: pointer;
}

.link-button:active {
  transform: scale(0.9);
}


/* =========================================================
   LAYOUT
========================================================= */

.content {
  display: flex;

  gap: 12px;
}
.big-column,
.medium-column,
.small-column {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.big-column {
  flex: 3;
}

.medium-column {
  flex: 2;
}

.small-column {
  flex: 1;
}

.flex-content {
  display: flex;
  flex-direction: column;

  flex: 1;

  padding: 16px;

  font-family: Arial, Sans-Serif;
}

.flex-content p {
  margin-top: 4px;
  margin-bottom: 4px;
}


/* =========================================================
   FOOTER
========================================================= */

.bottom {
  display: flex;
  justify-content: right;

  margin-right: 12px;
  margin-bottom: -20px;

  color: #8ecae6;

  font-family: JetSet, Sans-Serif;
  font-size: 12px;
}


/* =========================================================
   BUTTONS
========================================================= */

.button {
  padding: 8px 14px;

  font-family: JetSet, Sans-Serif;

  color: #023047;

  background-image: url("tube.png");

  border: 2px solid #fb8500;
  border-radius: 999px;

  cursor: pointer;
}

.button:hover {
  transform: scale(110%);
}