@font-face {
  font-family: 'Nukamiso';
  src: url('https://julio12318.neocities.org/Fonts/nukamiso__beta08.eot?#iefix') format('embedded-opentype'),
       url('https://julio12318.neocities.org/Fonts/nukamiso__beta08.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Ace Futurism';
  src: url('https://julio12318.neocities.org/Fonts/Ace-Futurism.eot?#iefix') format('embedded-opentype'),
       url('https://julio12318.neocities.org/Fonts/Ace-Futurism.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Suissnord';
  src: url('https://julio12318.neocities.org/Fonts/Suissnord.eot?#iefix') format('embedded-opentype'),
       url('https://julio12318.neocities.org/Fonts/Suissnord.otf') format('OpenType');
  font-weight: normal;
  font-style: normal;
}

html {
  background-image: url(https://julio12318.neocities.org/SpaceBackground.png);
  background-color: black;
}

body {
  overflow-x: hidden;
}

.title {
  text-align: center;
  font-family: Suissnord;
  color: white;
  font-size: 30px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.frame-border {
  background-color: #fd46fc;
  padding: 10px;
  padding-top: 10px;
  max-width: 1300px;
  margin: auto;
}

.file-name {
  margin-top: 0px;
  margin-bottom: 10px;
  font-family: Ace Futurism;
  color: white;
  font-size: 30px;
}

.timeline {
  background-color: #0f184c;
  padding: 0;
  width: 100%;
  padding-top: 40px;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.animation-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('https://julio12318.neocities.org/loopbackground.png');
  background-repeat: repeat;
  animation: scrollBackground 50s linear infinite;
  mix-blend-mode: luminosity;
  opacity: 0.3;
  z-index: 1;
  pointer-events: none;
}

.year-title {
  font-size: 49px;
  margin: 0 auto 0 auto;
  padding: 0 1rem;
  max-width: 1120px;
  color: #c7c7c7;
  font-family: Nukamiso;
  position: relative;
  z-index: 0;
}

.info-box {
  margin: 25px auto 0 auto; /* center horizontally */
  padding: 0 1rem; /* optional horizontal padding */
  max-width: 1120px; /* limit width but allow responsiveness */
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  position: relative;
  z-index: 0;
}

.stat-info {
  color: #ECE760;
  font-family: Nukamiso;
  margin: 0;
  font-size: 24px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.stat-info2 {
  color: #57ddf7;
  font-family: Nukamiso;
  margin: 0;
  font-size: 18px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.boxed {
  border: 5px solid red;
  max-width: fit-content;
  max-height: fit-content; /* or whatever % of viewport height */
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; 
  flex: 1;
}

.add-color {
  color: #57ddf7;
}

.main-info {
  flex: 2;
}



@keyframes scrollBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 1000px;
  }
}