body {     
    text-align: center;     
    background: #000000;    
    margin: 0;     
    overflow: hidden;     
    color: #613f3f;          
    height: 100vh;     
    display: flex;     
    justify-content: center;     
    align-items: center;     
    position: relative; 
}  

body::before {     
    content: "";     
    position: absolute;     
    top: 0;     
    left: 0;     
    right: 0;     
    bottom: 0;     
    z-index: 1;     
    background: url("https://i.postimg.cc/DwDP5q5B/image24.jpg");
    background-position: center;     
    background-repeat: no-repeat;     
    background-attachment: fixed;     
    background-size: 75% 100%;      
    transform: translateX(-35px);     
    
    -webkit-mask-image: radial-gradient(circle at center, 
        #000000 15%, 
        rgba(0, 0, 0, 0.8) 35%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.1) 60%,
        transparent 70%
    );
}  

body::after {     
    content: "";     
    position: absolute;     
    top: 0;     
    left: 0;     
    right: 0;     
    bottom: 0;     
    z-index: 2;      
    pointer-events: none;  
    
    background: radial-gradient(circle at center, 
        transparent 30%, 
        rgba(0, 0, 0, 0.5) 60%, 
        #000000 90%
    );
}



.angelContainer {
    display: flex;
    justify-content: center; 
    align-items: center;     
    width: auto;
    height: auto;
    z-index: 3; 
    transform: translateX(-35px);
}

.door-link {
    display: block;      
    height: 67vh;    
    width: auto;      
    z-index: 3;
    cursor: pointer;
    margin: 0; 
    transform: translate(12px, -45px); 
}

#door {
    display: block; 
    height: 100%; 
    width: auto;
    opacity: 0.9; 
    filter: hue-rotate(305deg) saturate(0.45) brightness(1.02) contrast(1.02) blur(0.4px)
            drop-shadow(0 0 0rem rgba(255, 192, 203, 0));
    transition: filter 0.3s ease-in-out;  
}

#door:hover {
    filter: hue-rotate(305deg) saturate(0.45) brightness(1.02) contrast(1.02) blur(0.4px) 
            drop-shadow(0 0 1.2rem white);
}

.lines {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 300;
    opacity: 0.2;
}

.lines:before {
    content: '';
    position: absolute;
    left: 0;
    width: 100vw;
    height: 100vh;
    top: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.5) 51%);
    background-size: 100% 4px;
    will-change: background, background-size;
    animation: scanlines 0.2s linear infinite;
}

.lines::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    pointer-events: none;
    animation: scanlines 0.15s infinite;
}

@keyframes scanlines { 
    from {
        background: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, 0.5) 51%);
        background-size: 100% 4px;
    }
    to {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 50%, transparent 51%);
        background-size: 100% 4px;
    }
}

@media (max-width: 800px) {     
   
    
    .angelContainer {         
        transform: translateX(0);     
    }      
    
    body::before {         
        background-attachment: scroll;         
        background-size: 200% 100%; 
        transform: translateX(0);            
        -webkit-mask-image: radial-gradient(circle at center, 
            #000000 20%, 
            rgba(0, 0, 0, 0.7) 45%,
            rgba(0, 0, 0, 0.2) 65%,
            transparent 75%
        );
    }      
    
    body::after {         
        background: radial-gradient(circle at center, 
            transparent 25%, 
            rgba(0, 0, 0, 0.4) 55%, 
            #000000 85%
        );     
    }      
    
    .door-link {         
        height: 50vh;  
        z-index: -1;
        transform: translate(0, -45px);
    } 
}