html, body, * {
  
  
  
  cursor: url("/cursor.png") 0 0, auto !important;
  
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  min-height: 100vh;
  background-image: url(https://cyberdreamsart.neocities.org/background.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: -1;
}

body::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-track:hover {
  cursor: none; 
}

body {
  transition: cursor 1s ease;
}

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: fixed; 
  top: 0;
  left: 0;
  background: black; 
  color: white;     
  padding: 10px 0;
   z-index: 2000;
}

.marquee-text {
  display: inline-block;
  padding-left: 50%;
  animation: scroll-left 10s linear infinite, color-change 2s linear infinite;
}

.marquee-text::after {
  content: attr(data-text); 
  position: absolute;
  white-space: nowrap;
  left: 100%; 
}

.marquee {
  font-size: 20px;   /* desktop */
}

@media screen and (max-width: 767px) {
  .marquee-text {
    font-size: 100px !important;
  }

  .marquee {
    padding: 20px 0;
  }
}

@keyframes scroll-left {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
  }
  
  @keyframes color-change {
  0% { color: red; }
  20% { color: orange; }
  40% { color: yellow; }
  60% { color: green; }
  80% { color: blue; }
  100% { color: violet; }
  }
  
  
  .logo-link {
  display: block;
  text-align: center;
  margin-top: 20px;
  }

.site-title {
  width: 1000px;
  height: auto;
}

.site-title:hover {
  transform: scale(1.1); 
  filter: brightness(1.2);
}



::-webkit-scrollbar {
  width: 45px;
} 


::-webkit-scrollbar-track {
  background: black;
  background-size: cover;
}

::-webkit-scrollbar-thumb {
  background: url("https://cyberdreamsart.neocities.org/scrollbar.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
}

::-webkit-scrollbar:horizontal {
  height: 45px; 
}

::-webkit-scrollbar-track:horizontal {
  background: black;
}


::-webkit-scrollbar-thumb:horizontal {
  background: url("https://cyberdreamsart.neocities.org/scrollbar.png")no-repeat center;
  border-radius: 10px;
  position: relative;     
  overflow: hidden;
  display: block;
  transform:rotate(-180deg);
}

.side-button {
  position: absolute;  
  top: 800px;          
  left: 50%;           
  transform: translateX(-50%) scale(1);
  z-index: 1000;
  width: 500px;        
}

.side-button img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 50px;
  transition: transform 0.2s ease-out;
}

.side-button img:hover {
  transform: scale(1.1);
  filter: brightness(1.2);
}

@media (max-width: 768px) {
  .side-button {
    transform: translateX(-50%) scale(4.4); 
  }
}


.promo-container {
  position: absolute;
  top: 1300px;   
  right: 500px;   
  
  display: flex;
  gap: 0px;      
  z-index: 1100;
}

.promo-img {
  width: 750px;  
  height: auto;
  display: block;
}

.promo-card:first-child .promo-img {
  width: 480px;
}

.promo-card:last-child .promo-img {
  width: 620px;
}

.promo-card {
  position: relative;
}

.promo-text {
  position: absolute;
  top: 10px;
  left: 20px;
  color: yellow;
  font-size: 60px;
}

.promo-text {
  font-family: 'Palatino Linotype', serif;
  font-size: 70px;
}

.promo-img {
  width: auto;
  height: auto;
  display: block;

  
  transition: transform 0.3s ease, filter 0.3s ease;
}

.promo-img:hover {
  transform: scale(1.08);   
  filter: brightness(1.2);    
}


.promo-card {
  position: relative;
}

.media-row {
  display: flex;            
  align-items: flex-start;  
  justify-content: center;  
  gap: 0;                   
  margin: 280px 0;          
  padding: 0;
}

.media-item {
  flex: 0 0 620px;          
  height: 620px;            
}

.media-item video,
.media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;        
}

.promo-video {
  width: 40vw;               
  max-width: 800px;          
  min-width: 300px;         
  height: auto;                  
  transition: transform 0.3s ease, filter 0.3s ease;
}

.site-footer p {
  font-family: 'MingLiU_HKSCS-ExtB', serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-align: center;
}

.top-image-section {
  position: relative;   
  width: 100%;
  height: 500px;      
  overflow: visible;    
}

.top-image {
  position: absolute;   
  top: -1700px;         
  left: 50%;            
  transform: translateX(-50%) scale(1.2); 
  width: 1560px;         
  height: auto;
}

.custom-image {
  position: absolute;   
  
  top: 1350px;         
  left: 20%;         
  transform: translateX(-50%); 

  width: 800px;      
  height: auto;       

  z-index: 1000;     
}