body {
    margin: 0;
    padding: 0;
    background-color: #2b3a1a;
    height: 100vh;    
    overflow: hidden;   
    display: flex; 
    align-items: center; 
    .scrap, .cat, .letter, a {
    cursor: url('https://sadhost.neocities.org/images/pixels/star-cursor-hover.png'), pointer;
}
}

.collage-container {
    position: relative;
    width: 100vw; 
    display: block; 
}

.base-bg {
    width: 100%;
    height: auto;
    display: block;
}

.scrap, .cat, .letter {
    position: absolute; 
    z-index: 10; 
    filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.5));
}

/* =========================================
    LABELS
   ========================================= */
.scrap {
    text-decoration: none; 
}

.scrap-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    
    font-family: 'Indie Flower', cursive;
    color: #ffde59; 
    font-size: 1.5vw;
    font-weight: bold;
    
    text-shadow: 
        1.5px 1.5px 0px #1a1b26, 
        -1.5px -1.5px 0px #1a1b26, 
        1.5px -1.5px 0px #1a1b26, 
        -1.5px 1.5px 0px #1a1b26;
        
    pointer-events: none; 
    transition: color 0.3s ease;
}

.scrap:hover .scrap-label {
    color: #e77678; 
}
/* =========================================
    BUTTONS
   ========================================= */
.scrap img { width: 100%; display: block; }

.scrap { 
    width: 12%; 
    transition: transform 0.3s ease-out; 
} 

.scrap:hover { 
    transform: translateX(50px); 
    cursor: pointer; 
}

.scrap-1 { top: 32%; left: 0%; }
.scrap-2 { top: 48%; left: 0.2%; }
.scrap-3 { top: 60%; left: 0.1%; }
.scrap-4 { top: 75%; left: 0.6%; }

/* =========================================
   YIOUVARLAKIS GAGARIN 
   ========================================= */
.cat {
    width: 22%; 
    top: 50%;   
    left: 18%;  
    
    animation: floatInSpace 4s ease-in-out infinite; 
}

@keyframes floatInSpace {
    0% { transform: translateY(0px) rotate(0deg); }
    
    50% { transform: translateY(-20px) rotate(4deg); }
    
    100% { transform: translateY(0px) rotate(0deg); }
}

/* =========================================
   WELCOME
   ========================================= */
.letter { 
    height: 8.5%; 
    width: auto; 
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); 
    cursor: pointer; 
} 

.letter-w  { top: 16%; left: 26%; transform: rotate(-8deg); }
.letter-e  { top: 13%; left: 30%; transform: rotate(5deg); } 
.letter-l  { top: 11%; left: 34%; transform: rotate(-12deg); }
.letter-c  { top: 10%; left: 38%; transform: rotate(8deg); }
.letter-o  { top: 12%; left: 42%; transform: rotate(-5deg); }
.letter-m  { top: 19%; left: 45.5%; transform: rotate(15deg); }
.letter-e2 { top: 25%; left: 47%; transform: rotate(-10deg); }

.letter-w:hover  { transform: rotate(352deg) scale(1.2); }
.letter-e:hover  { transform: rotate(365deg) scale(1.2); } 
.letter-l:hover  { transform: rotate(348deg) scale(1.2); }
.letter-c:hover  { transform: rotate(368deg) scale(1.2); }
.letter-o:hover  { transform: rotate(355deg) scale(1.2); }
.letter-m:hover  { transform: rotate(375deg) scale(1.2); }
.letter-e2:hover { transform: rotate(350deg) scale(1.2); }


.scribble {
    position: absolute;
    z-index: 30;
    color: #1a1b26; 
    line-height: 1.2;
    pointer-events: none;
}

.yuri-notes {
    top: 28%;
    left: 27%;  
    width: 22%; 
    font-size: 1.3vw;
    transform: rotate(-1deg);
}

.credits {
    top: 80%;
    left: 30%;
    width: 20%;
    font-size: 1.1vw;
    font-weight: 700;
    text-align: right;
    transform: rotate(-2deg);
    color: #3d2b1f; 
}

.ufo-text {
    top: 34.5%; 
    left: 52%;  
    width: 24%; 
    font-size: 1.2vw;
    transform: rotate(-1deg);
    text-align: left;
}

.scribble p {
    margin: 0;
    margin-bottom: 8px;
    filter: blur(0.2px); 
}

p{
    font-family: indie flower;
}
.pil-link {
    color: #68493b; 
    text-decoration: none;
    border-bottom: 2px dashed #e77678; 
    cursor: pointer;
    pointer-events: auto; 
}

.pil-link:hover {
    color: #e77678;
    border-bottom-style: solid;
}