@font-face
{
    font-family: Ardron;
    src: url("../UniversalAssets/FontOfArdron.ttf");
}



*
{
    box-sizing: border-box;
}


:root
{
    --door-width: clamp(10%, 90%, 90%);
}


html,
body
{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:Ardron;
    color:white;
    background-color: black;
    image-rendering: pixelated;
    margin: 0px;

}

#StartupBlack
{
    position: fixed;
    inset: 0;
    background: black;
    z-index: 99999;
    pointer-events: none;
}

#BackgroundContainer
{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    width:100%;
    height: 100%;
    z-index:0;
}

#VoidEyes
{
    position:absolute;

    left:0%;
    top:-4.5%;
    aspect-ratio: 1/1;

    width:clamp(5vw,30vw,30vw);
    height:auto;

    background-image: url("UniversalAssets/VoidEyeFull.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;

    pointer-events:none;
}

#Logo
{
    position:absolute;

    right:1%;
    top:0%;
    aspect-ratio: 1/1;

    width:clamp(1vw,10vw,15vw);
    height:auto;

    background-image: url("UniversalAssets/Favicon.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;

    pointer-events:none;
}

#DoorPage
{
    display:block;
    position:absolute;
    overflow:hidden;
    pointer-events:auto;
    width:100%;
    height: 100%;
}


#ExtrasPage,
#QuizPage
{
    display:none;
    position:absolute;
    overflow:hidden;
    pointer-events:auto;
    width:100%;
    height: 100%;
    z-index:0;
}

#MainBackground
{
    position:absolute;

    height:150%;
    aspect-ratio: 1/1;
    left:-110%;
    top:-25%;

    z-index:-9;
    pointer-events:none;
    background-image: url(../../UniversalAssets/VoidLarge.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 (--var 0px);
}

#MainTitle
{
    position:absolute;
    font-family: Ardron;
    top:10%;
    text-align: center;
    width: 100%;
    font-size: clamp(1vw,5vw,10vw);
   
}

.DoorTitle
{
    position:absolute;
    font-family: Ardron;
    text-align: center;
    pointer-events:none;
    width: 25%;
}

#EimonTitle,
#ElusiaTitle,
#GrimloweTitle,
#SostrumTitle,
#VidulynTitle,
#YumalonTitle,
#IcolassTitle,
#VoidTitle,
#SanctumTitle
{
    display:none;
    position:absolute;
    font-family: Ardron;
    top:37%;
    left:31%;
    width: 44%;
    font-size: clamp(1vw,7vw,10vw);
    text-align: center;
}


#YumalonTitle
{
    color:black;
}













#DoorFrame
{
    image-rendering: pixelated;
    position: relative;

    height:45%;
    aspect-ratio: 80 / 69;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-image: url("UniversalAssets/MainDoorFrame.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

}

.DoorButton
{
    appearance: none;
    -webkit-appearance: none;

    position: relative;
    
    width: 100%;
    aspect-ratio: 1 / 1;

    background-color: transparent;
    background-image: url("UniversalAssets/SquareButtonOutline.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    border: none;
    padding: 0;
    pointer-events:auto;

}


#DoorEimon
{
    position:absolute;
    display:flex;
    top:41.75%;
    left:18.75%;
    width:9%;
    

}

#DoorElusia
{
    position:absolute;
    display:flex;
    
    width:9%;

    top:41.75%;
    left:72.25%;

}


#DoorGrimlowe
{
    position:absolute;
    display:flex;
    
    width:9%;

    top:53.25%;
    left:18.6%;

}


#DoorSostrum
{
    position:absolute;
    display:flex;
    
    width:9%;

    top:53.25%;
    left:72.25%;

}


#DoorVidulyn
{
    position:absolute;
    display:flex;
    top:65%;
    left:18.6%;
    
    width:9%;

}


#DoorYumalon
{
    position:absolute;
    display:flex;
    
    width:9%;
    top:65%;
    left:72.25%;

}


#DoorIcolass
{
    position:absolute;
    display:flex;
    top:76.75%;
    left:18.6%;
    
    width:9%;

}


#DoorSanctum
{
    position:absolute;
    display:flex;
    
    width:9%;

    top:76.75%;
    left:72.25%;

}

#DoorVoid
{
   position:absolute;
    display:flex;
    top:1.25%;
    left:46%;
    
    width:9%;
    top:500%;

}



.EimonButton,
.ElusiaButton,
.GrimloweButton,
.SostrumButton,
.VidulynButton,
.YumalonButton,
.IcolassButton,
.VoidButton,
.SanctumButton
{
    display:flex;
    position: relative;
    width: 90%;
    height: 90%;

    background-repeat: repeat;
    background-size: 6px 6px;
    z-index: -1;

    filter: brightness(50%);
}




#EimonSigil,
#ElusiaSigil,
#SostrumSigil,
#GrimloweSigil,
#VidulynSigil,
#YumalonSigil,
#IcolassSigil,
#VoidSigil,
#SanctumSigil,
#MimicClosed
{
    image-rendering: pixelated;
    display:flex;
    position: absolute;
    width: 70%;
    aspect-ratio: 1024/1024;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: repeat;
    background-size: 100% 100%;

}

#IcolassSigil
{
    background-image: url("UniversalAssets/Iccolas.png");
}

#EimonSigil
{
    background-image: url("UniversalAssets/Eimon.png");
}

#ElusiaSigil
{
    background-image: url("UniversalAssets/Elusia.png");
}

#GrimloweSigil
{
    background-image: url("UniversalAssets/Grimlowe.png");
}

#SostrumSigil
{
    background-image: url("UniversalAssets/Sostrum.png");
}

#VidulynSigil
{
    background-image: url("UniversalAssets/Vidulyn.png");
}

#YumalonSigil
{
    background-image: url("UniversalAssets/Yumalon.png");
}

#VoidSigil
{
    background-image: url("UniversalAssets/Void.png");
}

#SanctumSigil
{
    background-image: url("UniversalAssets/Sanctum.png");
}



#MimicClosed
{
    background-image: url("UniversalAssets/MimicClosed.png");
}



.EimonButton
{
    background-image: url("UniversalAssets/EimonButtonBackground.png");
}

.ElusiaButton
{
    background-image: url("UniversalAssets/ElusiaButtonBackground.png");
}

.GrimloweButton
{
    background-image: url("UniversalAssets/GrimloweButtonBackground.png");
}

.SostrumButton
{
    background-image: url("UniversalAssets/SostrumButtonBackground.png");

}

.VidulynButton
{
    background-image: url("UniversalAssets/VidulynButtonBackground.png");

}

.YumalonButton
{
    background-image: url("UniversalAssets/YumalonButtonBackground.png");

}

.IcolassButton
{
    background-image: url("UniversalAssets/IcolassButtonBackground.png");

}

.SanctumButton
{
    background-image: url("UniversalAssets/SanctumButtonBackground.png");
}

.VoidButton
{
    background-image: url("UniversalAssets/VoidButtonBackground.png");
}

#DoorClosedOpen
{
    image-rendering: pixelated;
    position: absolute;

    height: var(--door-width);
    aspect-ratio: 64 / 64;

    top: 45.10%;
    left: 48.50%;
    transform: translate(-50%, -50%);

    background-image: url("UniversalAssets/MainDoorClosed.png");
    background-size: 103% 103%;
    background-repeat: no-repeat;
    pointer-events: none;
}

#RealmWindow
{
    image-rendering: pixelated;
    position: absolute;
    width:130%;
    height:60%;
    top:24%;
    left:-15%;
    pointer-events: none;

    -webkit-mask-image: url("UniversalAssets/MainMenuDoorOpenMASK.png");
    mask-image: url("UniversalAssets/MainMenuDoorOpenMASK.png");

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

}

#DoorRealm
{
    image-rendering: pixelated;
    position: absolute;

    height: 80%;
    width:70%;

    top: 0%;
    left: -0%;
    
    background-size: 25% 25%;
    background-repeat: repeat;

}

#FullLeftRightTransition
{
    position:absolute;
    display:none;

    top:-10%;
    width:110%;
    height: 300%;

    pointer-events: none;

    background-image: url("UniversalAssets/MobileTopDownTransition.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#LeftTransition
{
    position:absolute;
    display:block;

    top:-10%;
    width:110%;
    height: 300%;

    pointer-events: none;

    background-image: url("UniversalAssets/MobileTopTransition.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#RightTransition
{
    position:absolute;
    display:block;

    top:100%;
    width:110%;
    height: 300%;

    pointer-events: none;

    background-image: url("UniversalAssets/MobileBottomTransition.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


#LeftTransition,
#RightTransition,
#FullLeftRightTransition
{
    z-index: 1000;
}




#ExtrasInfoBox
{
    position:absolute;
    display:block;

    top:27%;
    left:1%;
    height:72%;
    width:98%;
    right:0%;

    overflow-y: hidden;
    overflow-x: hidden;

    pointer-events: auto;
    image-rendering: pixelated;

    background-image: url("UniversalAssets/MobileButtonInfoBox.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;

}





#ExtrasNESPlusInfoBox,
#ExtrasRealmQuizInfoBox,
#ExtrasStatQuizInfoBox,
#KoFiInfoBox,
#BDMInfoBox,
#WorkLogInfoBox
{
    position:absolute;
    display:none;

    top: 2%;
    left:5%;
    height:90%;
    width:90%;
    right:0%;

    overflow-y: auto;
    overflow-x: hidden;

    pointer-events: auto;
    image-rendering: pixelated;

    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

#KoFiInfoBox,
#BDMInfoBox
{
    position:absolute;
    display:none;

    top: 2%;
    left:5%;
    height:95%;
    width:90%;
    right:0%;

    overflow-y: auto;
    overflow-x: hidden;

    pointer-events: auto;
    image-rendering: pixelated;

    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.WideButton
{
    appearance: none;
    -webkit-appearance: none;

    position: relative;

    width: 92%;
    aspect-ratio: 440/65;

    background-color: transparent;
    background-image: url("UniversalAssets/WideMobileButton.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    border: none;
    padding: 0;
    pointer-events: auto;
    image-rendering: pixelated;


}

.WideButton::after
{
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("UniversalAssets/WideMobileButton.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    pointer-events: none;
    z-index: 0;


}

.NormalButton
{
    appearance: none;
    -webkit-appearance: none;

    position: relative;

    width: 92%;
    aspect-ratio: 440/43;

    background-color: transparent;
    background-image: url("UniversalAssets/ThinMobileButton.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    border: none;
    padding: 0;
    pointer-events: auto;
    image-rendering: pixelated;


}

.NormalButton::after
{
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("UniversalAssets/ThinMobileButton.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    pointer-events: none;
    z-index: 0;


}




.NormalButtonBackground
{
    display: flex;
    position: absolute;

    left:1%;
    top:4%;
    width: 98%;
    height: 90%;

    background-image: url("UniversalAssets/NoneButtonBackground.png");
    background-repeat: repeat;
    background-size: 6px 6px;
    pointer-events: auto;

    z-index: 0;

    filter: brightness(75%);
}



.BackButtonBackground
{
    display: flex;
    position: absolute;

    left:1%;
    top:4%;
    width: 98%;
    height: 90%;

    background-image: url("UniversalAssets/SanctumButtonBackground.png");
    background-repeat: repeat;
    background-size: 6px 6px;
    pointer-events: auto;

    z-index: 0;

    filter: brightness(75%);
}


.Words
{
    position: absolute;

    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 100%;

    text-align: center;
    font-size: clamp(1vw,5vw,10vw);
    font-family: Ardron;
    color: whitesmoke;

    z-index: 1;
    pointer-events: none;
}

#LinkBackground
{
    position: absolute;

    top: 14%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 80%;

    text-align: center;
    font-size: clamp(1vw,6.125vw,10vw);
    font-family: Ardron;
    color: whitesmoke;
    background-color: rgba(255, 166, 0, 0.562);

    z-index: 1;
    pointer-events: none;
}



.ButtonText
{
    position: absolute;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 90%;
    left:50%;

    text-align: center;
    font-size: clamp(1vw,6vw,10vw);
    font-family: Ardron;
    color: whitesmoke;

    z-index: 1;
    pointer-events: none;
}

#EnterDoor
{
    position: absolute;

    width: 90%;
    top: 75%;
    left:5%;
    pointer-events: auto;
}



#ExtrasButtonBox > button
{
    position: relative;
    inset: auto;
    flex-shrink: 0;
    max-width: 100%;
    z-index: auto;
}


#ExtrasInfoBoxBack
{
    position:absolute;
    display:block;

    top:1%;
    left:1%;
    width:98%;
    height:100%;
    right:0%;

    pointer-events: none;
    image-rendering: pixelated  ;

    background-image: url("UniversalAssets/SanctumButtonBackground.png");
    background-repeat: repeat;
    background-size: 6px 6px;
    filter: brightness(75%);

    z-index: -1;
}


#ExtrasButtonBoxBack
{
    position:absolute;
    display:flex;

    top:2.10%;
    left:3.25%;
    height:95%;
    width: 97%;
    right:0%;

    pointer-events: none;
    image-rendering: pixelated  ;

    background-image: url("UniversalAssets/SanctumButtonBackground.png");
    background-repeat: repeat;
    background-size: 6px 6px;
    filter: brightness(75%);
    z-index: -1;
}


#ExtrasButtonBox
{
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 5% 0%;
    margin-bottom: 3%;
    box-sizing: border-box;
    width: calc(100% - 20px);
}

#ExtrasButtonBoxFrame
{
    position: absolute;
    top: 5%;
    left: 1%;
    width: 98%;
    aspect-ratio: 440 / 203;
}

#ExtrasButtonBoxFrame::after
{
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("UniversalAssets/MobileButtonBox.png");
    background-size: 100% 98.75%;
    background-repeat: no-repeat;

    pointer-events: none;
    z-index: 10;

}


#ExtrasConfirmButton
{
    position:absolute;
    display:none;

    top:87%;
    left:3.5%;
    width: 93%;

    aspect-ratio: 440/65;
    right:0%;

    pointer-events: auto;
    image-rendering: pixelated  ;

}
#extrasconfirmbuttonwords
{
    position: absolute;

    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 100%;

    text-align: center;
    font-size: clamp(0.5vw,1.5vw,3vw);
    font-family: Ardron;
    color: whitesmoke;

    z-index: 1;
    pointer-events: none;

}








.SpecialProfileAnswer
{
    font-family: Ardron;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    position: relative;
    align-items: center;
    white-space:pre-line;
    padding-bottom: 30px;
    width:90%;
    left:4%;
    font-size: clamp(0.5vw,5vw,10vw);
}


#BDMPic1
{
    position: absolute;
    
    
    top:25%;
    left:3%;
    aspect-ratio: 550/413;
    width:90%;

    background-image: url(/UniversalAssets/BDM1.jpg);
    background-size: 100% 100%;
}

#BDMPic2
{
    position: absolute;
    aspect-ratio: 1600/733;
    width:80%;

    top:1%;
    left:8%;

    background-image: url(/UniversalAssets/BDM2.jpg);
    background-size: 100% 100%;
}


#BDMInfo
{
    position:absolute;
    top:65%;
}


#AuliButton .NormalButtonBackground
{
    background-image: url(../UniversalAssets/EimonButtonBackground.png);
}

#PupButton .NormalButtonBackground
{
    background-image: url(../UniversalAssets/ElusiaButtonBackground.png);
}

#VexButton .NormalButtonBackground
{
    background-image: url(../UniversalAssets/GrimloweButtonBackground.png);
}

#FoxButton .NormalButtonBackground
{
    background-image: url(../UniversalAssets/ElusiaButtonBackground.png);
}



#vertline
{
    position:absolute;
    display:block;
    left:50%;
    top:-0%;
    background-color: white;
    width: 10px;
    height:100%;
    z-index: -1;
}

#horiline
{
    position:absolute;
    display:block;
    left:00%;
    top:50%;
    background-color: white;
    height: 10px;
    width:100%;
    z-index: -1;
}

#ExitQuizes
{
    position: absolute;
    top:47.5%;
    left:30.5%;
    aspect-ratio: 144/40;
    width:40%;

}

#RealmQuizButton
{
    position: absolute;
    top:30%;
    left:5%;
    aspect-ratio: 144/40;
    width:40%;

}

#RealmQuizInfo
{
    position: absolute;
    top:16%;
    left:25%;
    width:40%;
    font-size: clamp(1vw,4.5vw,10vw);
    white-space: pre-line;

}

#GateEntry
{
    display:none;
    position:absolute;
    aspect-ratio: 200/40;
    width:37%;
    top:78%;
    left:34%;
    pointer-events: auto;
    z-index: 1;
}


#EnterText
{
    font-size: clamp(1vw,2vw,10vw);
    position:absolute;
    top:55%;
    left:50%;
    z-index: 0;
    pointer-events: none;
}




@media (min-aspect-ratio: 9/17) and (max-aspect-ratio: 9/16)
{

   #ExtrasConfirmButton
    {
        position:absolute;
        display:flex;

        top:87%;
        left:3.5%;
        width: 93%;

        aspect-ratio: 440/65;
        right:0%;

        pointer-events: auto;
        image-rendering: pixelated  ;

    }

    #ExtrasInfoBox
    {
        top:32%;
        left:1%;
        height:68%;
    }

    #ExtrasButtonBoxFrame
    {
        top: 8%;
        left: 1%;
        width: 98%;
        height:23%;
    }

    .ButtonText
    {
        top: 55%;
        font-size: clamp(1vw,5vw,10vw);
    }

    #EimonTitle,
#ElusiaTitle,
#GrimloweTitle,
#SostrumTitle,
#VidulynTitle,
#YumalonTitle,
#IcolassTitle,
#VoidTitle,
#SanctumTitle
{
    display:none;
    position:absolute;
    font-family: Ardron;
    top:40%;
    left:31%;
    width: 44%;
    font-size: clamp(1vw,4vw,10vw);
    text-align: center;
}





#LinkBackground
{
    position: absolute;

    top: 16%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 80%;

    text-align: center;
    font-size: clamp(1vw,6.125vw,10vw);
    font-family: Ardron;
    color: whitesmoke;
    background-color: rgba(255, 166, 0, 0.562);

    z-index: 1;
    pointer-events: none;
}



#BDMPic1
{
    top:30%;
}

#BDMPic2
{
    top:1%;
}


#BDMInfo
{
    position:absolute;
    top:85%;
}


#RealmQuizButton
{
    position: absolute;
    top:38%;
    left:5%;
    aspect-ratio: 144/40;
    width:40%;

}

#RealmQuizInfo
{
    position: absolute;
    top:21%;
    left:25%;
    width:40%;
    font-size: clamp(1vw,4.5vw,10vw);
    white-space: pre-line;

}

#MainBackground
{
    position:absolute;
    left:-85%;
    top:-25%;

}


}