:root {
    --pink: rgb(231, 54, 231);
    --darkpink: rgb(96, 26, 96);
    --white: rgb(240, 240, 240);
    --grey: rgb(169, 169, 169);
    cursor: url('cursor.png'), auto;	
}

@font-face {
    font-family: SimSun;
    src: url(fonts/simsunb.ttf);
}

@font-face {
    font-family: VCR;
    src: url(fonts/VCR.ttf);
}

@font-face {
    font-family: "PjFrix WeatherSTAR 4000";
    src: url(fonts/pjfrixstar4.ttf);
}

.root {
    float: left;
    margin-right: 24px; /* Space between gallery and text */
    margin-bottom: 16px; /* Space before text wraps under */
    max-width: 800px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
  
.main-image img {
    width: 100%;
    height: auto;
}
  
.thumbnails {
    width: 90px; /* match .thumb width */
    flex-shrink: 0; /* prevent it from shrinking */
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%; /* JS will set actual height */
  }
  
.thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.6;
}
  
.thumb:hover,
.thumb.active {
    opacity: 1;
    border: 2px solid var(--pink);
    cursor: url('cursor-sel.png'), auto;
}

.in-iframe .root {
    max-width: 500px;
}



p {
    font-size: 18px;
}

.in-iframe p {
    font-family: Arial;
    margin-bottom: 5px;
    color: var(--white);
    text-shadow: 0.5px 0.5px 0px #000, 1px 1px 0px #000, 1.5px 1.5px 0px #000, 2px 2px 0px #000, 0px 0px 1px #000, 0px 0px 1px #000, 0px 0px 1px #000, 0px 0px 1px #000;
}

.in-iframe h2 {
    font-family: VCR;
    margin-bottom: 5px;
    color: var(--white);
    text-shadow: 0.5px 0.5px 0px #000, 1px 1px 0px #000, 1.5px 1.5px 0px #000, 2px 2px 0px #000, 0px 0px 1px #000, 0px 0px 1px #000, 0px 0px 1px #000, 0px 0px 1px #000;
}


/* Cursors */
.in-iframe html, .in-iframe body, .in-iframe p, .in-iframe div, .in-iframe h1, .in-iframe h2{
    cursor: url('cursor.png'), auto;		
}

.in-iframe a {
    cursor: url('cursor-sel.png'), auto;
}

@media screen and (max-width: 700px) {
    .root {
        max-width: 100% !important;
    }
}

b {
    animation: colorRotate 3s linear 0s infinite;
}


.in-iframe a, .in-iframe a:visited {
    color: var(--grey);
    text-decoration: none;
}

a > b:hover, a:hover, .in-iframe a:hover {
    animation:none;
    color: var(--pink);
}


.rainbow {
    animation: colorRotate 6s linear 0s infinite;
}
  
@keyframes colorRotate {
    from {
      color: #6666ff;
    }
    10% {
      color: #0099ff;
    }
    50% {
      color: #00ff00;
    }
    75% {
      color: #ff3399;
    }
    100% {
      color: #6666ff;
    }
}