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

@keyframes borderCycle {
   0%   { border-color: #000000; }
   10%  { border-color: #ffffff; } 
   20%  { border-color: #af1f29; }
   30%  { border-color: #f3670a; } 
   40%  { border-color: #f8f53e; } 
   50%  { border-color: #57bc34; }
   60%  { border-color: #239bd8; }
   70%  { border-color: #b74897; } 
   80%  { border-color: #76387c; }
   90%  { border-color: #ffffff; } 
   100% { border-color: #000000; } 
}

@keyframes colorCycle {
   0%   { color: #ffffff; border-color: #ffffff; } 
   10%  { color: #ffffff; border-color: #ffffff; } 
   20%  { color: #af1f29; border-color: #af1f29; }
   30%  { color: #f3670a; border-color: #f3670a; } 
   40%  { color: #f8f53e; border-color: #f8f53e; } 
   50%  { color: #57bc34; border-color: #57bc34; }
   60%  { color: #239bd8; border-color: #239bd8; }
   70%  { color: #b74897; border-color: #b74897; } 
   80%  { color: #76387c; border-color: #76387c; }
   90%  { color: #ffffff; border-color: #ffffff; } 
   100% { color: #ffffff; border-color: #ffffff; } 
}

html {
   background-color: black;
   margin: 0;
   padding: 0;
   height: 100%;
}

html::after {
   content: "";
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border: 8px solid white;
   pointer-events: none;
   z-index: 9999;
   animation: borderCycle 60s infinite ease-in-out;
   box-sizing: border-box;
}

body {
   display: flex;
   flex-direction: column;
   align-items: center;
   color: white;
   font-family: 'monogram', Verdana;
   margin: 0;
   padding: 60px 20px;
   min-height: 100vh;
}

h1 {
   text-align: center;
   animation: colorCycle 60s infinite linear;
   text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
   font-size: 42px;
}
h2 {
   text-align: center;
   font-size: 30px;
}

p {
   font-size: 26px;
   text-align: center;
}

.logo {
   image-rendering: pixelated;
   display: block;
   margin-left: auto;
   margin-right: auto;
   cursor: pointer;
   max-width: 90vw;
   height: auto;
}

.itch {
   image-rendering: pixelated;
   display: block;
   margin-left: auto;
   margin-right: auto;
   cursor: pointer;
   transition: transform 0.2s ease-in-out
}


.itch:hover {
   transform: scale(1.2);
   filter: brightness(1.5);
}

.video-container {
   width: 100%;
   max-width: 800px;
   aspect-ratio: 16 / 9;
   margin: 20px auto;
}

.video-container iframe {
   width: 100%;
   height: 100%;
   border: none;
}


.itch-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}


.itch-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  text-decoration: none;
}


.itch {
  image-rendering: pixelated;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}


.hover-text {
  font-family: 'monogram', Verdana;
  font-size: 40px;
  font-weight: bold;
  color: #f8f53e;
  text-transform: uppercase;
  position: absolute;
  
  /* Centering math: */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0); /* Center it, then start zoomed out to size 0 */
  
  white-space: nowrap; /* Prevent text from wrapping and breaking centering */
  opacity: 0; /* Hide it initially */
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  text-shadow: 2px 2px 0px #af1f29, -2px -2px 0px #af1f29; /* "Pop" effect */
  z-index: 10; /* Ensure text sits on top of image */
}


.itch-link:hover .itch {
  transform: scale(1.1);
  filter: brightness(1.3);
}

.itch-link:hover .hover-text {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(-5deg); 
}


.subtext_end {
   margin-top: 0;
}
.subtext_below {
   margin: 0;
}
.subtext {
   margin: 0;
}

#current_project_title{
   margin-bottom: 0px;
}
#current_project_preview {
   display: block;
   max-width: 800px;
   height: auto;
   width: 100%;
   margin: 20px auto;
   border-radius: 8px;
   box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

#current_project_description {
   max-width: 900px;
}
#current_project_title {
   font-size: 60px;
   color: #76387c;
}