/*THIS CSS STYLIZES ANY LOCKED FRONT GATE PAGES*/
html {
    background-color: black;
}

/* Sens Fortress Front Img */
body {
    background-image: url("Contents/Sens-Closed.png"); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


#bonfire img {
    width: 300px;
    height: auto;
    position: absolute;
    left: 45vw;
    top: 500px;
    
    
}

/* Bonfire background animation */
#bonfire-bg {
    position: absolute;
    width: 100vw;
    height: 100px;
    top: 44%;
    background-color: rgba(8, 6, 6, 0.486);
    filter: blur(3px);

    animation: fadeIn 4s ease-in-out forwards;
}

/* Bonfire text animation */
.bonfire-text {
    font-family: "Optimus Princeps", serif;
    position: absolute;
    bottom: -17%;
    left: 25%;
    font-weight: normal;
    color: #f08040;
    font-size: 120px;
    filter: blur(2px);

   
    animation: fadeIn 3s ease-in-out forwards;
}

/* Keyframes for fade-in effect */
@keyframes fadeIn {
    0% {
        opacity: 0;
        
        filter: blur(10px);
    }
    50% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(2px);
    }
    100%{
        opacity: 0;
        
        filter: blur(10px);
    }
}


/* Front Gate Animation */
#FrontgateL {

    width: 15vw;
    height: 60vh;
    position: absolute;
    left: 48vw;
    top: 10vh;
    
    
}

#FrontgateF {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: -200px;
    width: 600px;
    height: 50px;
    border-top: 1px rgb(155, 102, 32) solid; 
    border-bottom: 1px rgb(155,102,32) solid; 
    margin-top: 60%;
    opacity: 0;  /* Initially hidden */
    transition: opacity 0.5s ease-in-out; /* Add transition for smooth fade-in */
}

#FrontgateL:hover > #FrontgateF{
    opacity: 1;
}

.Promptext{
    font-family: "Adobe Garamond", serif;
    position: absolute;
    bottom: 25%;
    left: 25%;
    font-weight: narrow;
    color: rgb(255, 255, 255);
    font-size: 20px;
    
}

/*Real Door */
#RealD{

    width: 20vw;
    height: 60vh;
    position: absolute;
    left:25vw;
    top: 5vh;
}


/*Locked Door*/

#LockedL {

    width: 20vw;
    height: 60vh;
    position: absolute;
    Right: 10vw;
    top: 5%;
    
    
}

#LockedF {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    right:15vw;
    width: 100px;
    height: 50px;
    border-top: 1px rgb(155, 102, 32) solid; 
    border-bottom: 1px rgb(155,102,32) solid; 
    margin-top: 60%;
    opacity: 0;  /* Initially hidden */
    transition: opacity 0.5s ease-in-out; /* Add transition for smooth fade-in */
}

#LockedL:hover > #LockedF{
    opacity: 1;
}

/* Mimic Chest */
#MimicDeath img {
    position: absolute;
    width: 100vw;
    height: 100vh;
    animation: Out 3s ease-out forwards;
    

}


@keyframes Out {
    0% {
        opacity: 1;
        
        
    }

    100%{
        opacity: 0;
        
        filter: blur(10px);
        visibility:hidden;
    }
}



/* YOU DIED animation */

#YOU_DIED-bg{

    background-color: black;
    filter: blur(3px);
    width: 100%;
    height:100%;
    animation: fadeIn 7s ease-in-out forwards;
    
}


.DIED-text {
    font-family: "Optimus Princeps";
    position: absolute;
    bottom: 45%;
    left: 35%;
    font-weight: normal;
    color: red;
    font-size: 120px;
    filter: blur(2px);
    animation-delay: 3s;
    animation: fadeIn 5s ease-in-out forwards;
 

}


/* Here is the WebRing Code */

.smallimage {
    width: 100px;
 }
 
 
 #defaultW {
    position: absolute;
    clip-path: polygon (10% 10%, 50% 0%,50% 100%, 10% 90%, 0% 50%);
 }
 
 
 #defaultR {
    position: absolute;
    clip-path: polygon(50% 0%, 90% 10%, 100% 50%, 90% 90%, 50% 100%);
 }
 
 
 .hoverW {
    opacity: 0;
    width: 100px;
    position: absolute;
    margin: 0 auto;
    pointer-events: none;
 }
 
 
 .hoverR {
    opacity: 0;
    width: 100px;
    position: absolute;
    margin: 0 auto;
    pointer-events: none;
 }
 
 
 #defaultW:hover~.hoverW {
    opacity: 1;
 }
 
 
 #defaultR:hover~.hoverR {
    opacity: 1;
 }