@keyframes moveUpDown {
    0% {
        top: 0px;
    }
    50% {
        top: -10px;
    }
    100% {
        top: 0px;
    }
}

@keyframes gradientScroll {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 100vw;
  }
}

@keyframes gradientScrollFlipped {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -100vw;
  }
}

@keyframes scrollTexture {
  100% {
    background-position: 0 0;
  }
  0% {
    background-position: 718px 718px;
  }
}

@keyframes scrollTextureB {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 718px 718px;
  }
}

@keyframes scaleIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-20%);
  }
}

@keyframes slideDownFlipped {
  0% {
    transform: scaleY(-1) translateY(100%);
  }
  100% {
    transform: scaleY(-1) translateY(0%);
  }
}

@font-face { font-family: Pop Happiness; src: url('assets/fonts/pophappiness.ttf'); } 

:root {
	--red: #ff0000;
	--orange: #fca600;
	--yellow: #ffff00;
	--soulgreen: #00c000;
	--cyan: #42fcff;
	--blue: #003cff;
	--purple: #d535d9;
	--pink: #ffaec9;
	--darkorange: #e6695f;
  --deltarune-shadow: #0F0F70;
  --lightpink: #d535d9;

  --gap: 16px;
  --offset-x: 32px;
  --selector-size: 20px;

	font-family: "Pop Happiness", monospace;
  text-shadow: 3px 3px 0px #000;
  color-scheme: dark;

  color: white;

	image-rendering: pixelated;
}

a {
  font-family: "Pop Happiness", monospace;
}

.background {
  background-image: url('assets/img/background.png');
  background-attachment: fixed;
  background-position: center;
  width: 150vw;
  height: 150vh;
  animation: scrollTextureB 60s linear infinite;
  image-rendering: pixelated;
  position: fixed;
  top: -25vh;
  left: -25vw;
  display: block;
  filter: blur(4px);
  transform: rotate(5deg);
  z-index: -1;
}

.teambackground {
  background-image: url('assets/img/teambackground.png');
  background-attachment: fixed;
  background-position: center;
  width: 150vw;
  height: 150vh;
  animation: scrollTextureB 60s linear infinite;
  image-rendering: pixelated;
  position: fixed;
  top: -25vh;
  left: -25vw;
  display: block;
  filter: blur(4px);
  transform: rotate(5deg);
  z-index: -1;
}

.libbackground {
  background-image: url('assets/img/librarybackground.png');
  background-attachment: fixed;
  background-position: center;
  width: 150vw;
  height: 150vh;
  animation: scrollTextureB 60s linear infinite;
  image-rendering: pixelated;
  position: fixed;
  top: -25vh;
  left: -25vw;
  display: block;
  filter: blur(4px);
  transform: rotate(5deg);
  z-index: -1;
}

.faqbackground {
  background-image: url('assets/img/faqbackground.png');
  background-attachment: fixed;
  background-position: center;
  width: 150vw;
  height: 150vh;
  animation: scrollTextureB 60s linear infinite;
  image-rendering: pixelated;
  position: fixed;
  top: -25vh;
  left: -25vw;
  display: block;
  filter: blur(4px);
  transform: rotate(5deg);
  z-index: -1;
}

.devbackground {
  background-image: url('assets/img/devbackground.png');
  background-attachment: fixed;
  background-position: center;
  width: 150vw;
  height: 150vh;
  animation: scrollTextureB 60s linear infinite;
  image-rendering: pixelated;
  position: fixed;
  top: -25vh;
  left: -25vw;
  display: block;
  z-index: -1;
}

.notbackground {
  background-image: url('assets/img/notbackground.png');
  background-attachment: fixed;
  background-position: center;
  width: 150vw;
  height: 150vh;
  animation: scrollTextureB 60s linear infinite;
  image-rendering: pixelated;
  position: fixed;
  top: -25vh;
  left: -25vw;
  display: block;
  z-index: -1;
}

.uff {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  opacity: 1;
	top: 0;
  animation: moveUpDown 4s infinite ease-in-out;
  margin: 0 auto;
	z-index: 0;
  padding: 16px 0 0px 0;
	image-rendering: pixelated;
}

.logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  opacity: 1;
  animation: scaleIn 0.4s ease-out forwards, moveUpDown 4s infinite ease-in-out;
	z-index: 3;
  padding: 32px 0 16px 0;
	image-rendering: pixelated;
  width: 100%;
  height: 100%;
}

.Flogo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  opacity: 1;
	top: 650px;
  left: 1475px;
  animation: scaleIn 0.4s ease-out forwards;
  margin: 0 auto;
	z-index: 40;
	image-rendering: pixelated;
}

.team-member {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.timg, .ttext {
  width: 250px;
  text-align: center;
  image-rendering: pixelated;
}

.timg img {
  width: 75%;
  height: auto;
  border-radius: 8px;
}

.ttext {
  padding: 1rem 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  border: 3px solid rgb(255, 255, 255, 0.5);  
}

.tname {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.trole {
  font-size: 1rem;
  line-height: 1.4;
}

.timg:hover{
  transform: scale(1.05);
}

.gradient {
  position: fixed;
  width: 100vw;
  height: 528px;
  background-image: url('assets/img/gradient.png');
  background-repeat: repeat-x;
  background-size: contain;
  animation: gradientScrollFlipped 120s linear infinite, slideDown 0.3s ease-out forwards;
  z-index: 4;
  image-rendering: pixelated;
  rotate: -45deg;
  top: 800px;
  left: 800px;
}

.gradient-top {
  position: fixed;
  width: 100vw;
  height: 528px;
  background-image: url('assets/img/gradient.png');
  background-repeat: repeat-x;
  background-size: contain;
  animation: gradientScrollFlipped 120s linear infinite, slideDown 0.3s ease-out forwards;
  z-index: 2;
  image-rendering: pixelated;
  rotate: 135deg;
  top: -500px;
  left: -600px;
}

.divider {
  background-image: url('assets/img/divider.png');
  background-repeat: repeat-x;
  background-position: center;
  background-color: transparent;
  height: 30px;
  margin: 32px 0;
}

.about-section {
  display: flex;
  align-items: center;
  justify-content: center;
  image-rendering: pixelated;
}

.about-mario {
  width: auto;
  height: auto;
  image-rendering: pixelated;
}

.story-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  image-rendering: pixelated;
}

.story-mario {
  width: auto;
  height: auto;
  image-rendering: pixelated;
  margin-top: 16px;
}

.main-nav {
  display: flex;
  flex-direction: column; 
  gap: 32px;
  position: fixed;
  left: 32px;
  z-index: 10;
}

.main-nav a {
  display: block;
  position: relative;
  text-decoration: none;
  z-index: 20;
}

.contact-bar {
  width: 25vw;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0;
  padding: 32px 0 0 0;
  position: fixed;
  z-index: 40;
  top: 835px;
  left: 1425px;
  animation: scaleIn 0.4s ease-out forwards;
}

.scrolling-texture-container {
  position: relative;
  padding: 24px 16px;
  margin: 24px auto;
  max-width: 600px;
  border-radius: 4px;
  background: url('assets/img/scrolltexture.png') repeat;
  background-size: 64px 64px;
  animation: scrollTexture 72s linear infinite, scaleIn 0.4s ease-out forwards;
  text-align: center;
  z-index: 2;
  overflow: hidden;
  border: 3px solid white;
  image-rendering: pixelated;
  box-shadow: 10px 10px black;
}

.devlog-container {
  position: relative;
  padding: 24px 16px;
  max-width: 650px;
  margin: 24px auto;
  flex-shrink: 0;
  color: #fff;
  z-index: 2;
  overflow: hidden;
  image-rendering: pixelated;
  font-size: 1.25rem;
}

.media-promo-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  margin: 48px auto;
  max-width: 1280px;
  padding: 0 16px;
}

.devlog-thumbnail {
  width: 100%;
  height: auto;
  border: 3px solid white;
  border-radius: 4px;
  transition: transform 0.2s ease;
  image-rendering: pixelated;
}

.devlog-thumbnail:hover{
  width: 100%;
  height: auto;
  border: 3px solid yellow;
  border-radius: 4px;
  transition: transform 0.2s ease;
  image-rendering: pixelated;
}

a:link {
    color: white;
}

a:visited {
    color: white;
}

a:hover {
    color: var(--yellow);
}

a:active {
    color: var(--yellow);
}

a img.hover {
	display: none;
  transform: scale(1.05); transition: 1s;
}

a img.regular {
	display: inherit;
	width: auto;
	height: auto;
}

a:hover img.hover {
	display: inherit;
	width: auto;
	height: auto;
}

a:hover img.regular {
	display: none;
	width: auto;
	height: auto;
}