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

@font-face
{
    font-family: Skranji;
    src: url("Assets/Skranji.ttf");
}

@font-face
{
    font-family: Lexend;
    src: url("Assets/Lexend.ttf");
}

@font-face
{
    font-family: Lilita;
    src: url("Assets/LilitaOne.ttf");
}

*
{
    box-sizing: border-box;
}

:root
{
    --content-width: min(100vw, 1900px);
    --box-width: min(80vw, 1600px);
    --button-width: min(95vw, 1500px);

    --navtext-size: clamp(12px, 3vw, 35px);
    --title-size: clamp(42px, 3vw, 100px);
    --header-size: clamp(30px, 3vw, 90px);
    --body-size: clamp(12px, 1.5vw, 25px);
    --textbox-size: clamp(16px, 1.3vw, 24px);
    --scrollspace-height-size: clamp(40px, 81vh, 81vh);
    --profilequestion-size: clamp(20px, 3vw, 40px);
    --profileanswer-size: clamp(16px, 3vw, 20px);

    --pupprofilequestion-size: clamp(10px, 3vw, 25px);
    --profileanswer-sizepup: clamp(12px, 3vw, 19px);
}

body
{
    margin:0;
    overflow:hidden;
    font-family:Lexend;
    color:white;
}

#BackgroundContainer
{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:-10;
}

#Background
{
    position:absolute;

    width:130vw;
    min-width:2500px;

    height:auto;

    top:-110%;
    left:-35%;

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

#VexesBackground,
#AulisBackground,
#PupsBackground
{
    position:absolute;

    width:100%;
    height:100%;

    top:0%;
    left:0%;

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

#AulisBackgroundImage{
    position:absolute;

    width:100%;
    height:100%;

    top:0%;
    left:0%;
}

#ExtrasBackground
{
    position:absolute;

    width:120%;
    height:120%;

    top:-10%;
    left:-10%;
    align-items: center;

    z-index:-7;
    pointer-events:none;
    background-repeat: repeat-x;
    background-position:center;
    background-image: url(Assets/ExtrasBackground.png);
    background-size: 100%;
}

#ExtrasBackgroundImage
{
    position:absolute;

    width:105%;
    height:auto;
    

    top:-100px;
    left:-100px;

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

#LinksButton
{
    left: 0%;
}


#VexButton
{
    left: 40%;
}

#AuliButton
{
    left: 20%;
}

#PupButton
{
    left: 60%;
}

#ExtraButton
{
    left: 80%;
}


.ButtonBackground
{
    position:absolute;
    inset:0%;

    display:flex;
    justify-content:center;

    background-repeat:repeat;
    background-position:0;

    color:#bfbfbf;

    z-index:0;
}


.ButtonBorder
{
    position:absolute;
    inset:0;

    background-size:100% 100%;

    pointer-events:none;

    z-index:1;
}

.ButtonText
{
    position:absolute;
    inset:0;

    display:flex;

    justify-content:center;
    align-items:center;

    text-align:center;

    white-space:pre-line;
    word-break:break-word;

    font-family:Lexend;
    font-weight: 600;
    font-size:var(--navtext-size);

    color:#dfdfdf;

    z-index:2;
}

#Sanctum
{
    position:absolute;
    inset:-0.5%;
    width:101%;
    height:101%;
    pointer-events:none;
    z-index:10;
}

#ScrollContainer
{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

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

#LinksPage,
#VexesPage,
#AulisPage,
#PupsPage,
#ExtrasPage {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 2.5rem;
    pointer-events:none;
}

#TopBar
{
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:10vh;

    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.25);

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

#VoidEyes
{
    position:absolute;

    left:1vw;
    top:3vh;

    width:min(10vw,275px);
    height:auto;

    pointer-events:none;
}

#NFSOTitle
{
    position:absolute;

    left:50%;
    top:45%;

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

    font-size:var(--title-size);
    white-space:nowrap;

    pointer-events:none;
}

#NFSOLogo
{
    position:absolute;

    right:2vw;
    top:0.5vh;

    width:min(4.5vw,150px);
    height:auto;

    pointer-events:none;
}

.Text
{
    position:absolute;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;
    white-space:pre-line;
    word-break:break-word;

    color:#dfdfdf;

    font-size:clamp(22px,2vw,30px);

    z-index:2;
}

.InfoBox
{
    position:relative;

    width:var(--box-width);

    aspect-ratio:1500 / 300;

    background-image:url(Assets/ButtonInfoBox.png);
    background-size:100% 100%;
    background-repeat:no-repeat;
}

.InfoBoxText
{
    position:absolute;


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

    white-space:pre-wrap;

    font-size:var(--textbox-size);
}

#ScrollSpace
{
    position:absolute;

    top:19vh;
    left:50%;

    transform:translateX(-50%);

    width:var(--content-width);
    height:var(--scrollspace-height-size);

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

    pointer-events:auto;

    display:flex;
    flex-direction:column;
    gap:2.5rem;

}

.ButtonTitle
{
    position:absolute;

    left:20px;
    top:10px;

    width:70%;

    font-size:var(--header-size);

    text-align:left;

    color:#dfdfdf;
    font-family: Lexend;

    text-shadow:
        7px 0px 5px #000,
        0px 7px 5px #000,
       -7px 0px 5px #000,
        0px -7px 5px #000;
}

.ButtonInfo
{
    position:absolute;

    left:5px;
    right:15px;

    top:36%;

    bottom:5%;

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

    padding-left:10px;

    white-space:pre-line;
    text-align:left;

    line-height:1.20;

    font-size:var(--body-size);
    font-family: Lexend;

    color:#dfdfdf;

    text-shadow:
        3px 0px 5px #000,
        0px 3px 5px #000,
       -3px 0px 5px #000,
        0px -3px 5px #000;
}





#Button1,
#Button2,
#Button3,
#Button4,
#Button5,
#Button6,
#Button7,
#Button8,
#Button9
{
    position:relative;

    width:var(--box-width);
    aspect-ratio:1500 / 288;

    border:none;
    margin-bottom:0;
    

    background-color:transparent;

    background-position:5px -5px;
    background-repeat:no-repeat;
    background-size:100% 110%;

    cursor:pointer;
    pointer-events:auto;

    transition:
        transform .15s ease,
        filter .15s ease;
}



#Button1
{
    background-image:url(Assets/ButtonInfoBoxGrimlowe.png);
}

#Button2
{
    background-image:url(Assets/ButtonInfoBoxVoid.png);
}

#Button3
{
    background-image:url(Assets/ButtonInfoBoxVidulyn.png);
}

#Button4
{
    background-image:url(Assets/ButtonInfoBoxIcolass.png);
}

#Button5
{
    background-image:url(Assets/ButtonInfoBoxEimon.png);
}

#Button6
{
    background-image:url(Assets/ButtonInfoBoxElusia.png);
}

#Button7
{
    background-image:url(Assets/ButtonInfoBoxSostrum.png);
}

#Button8
{
    background-image:url(Assets/ButtonInfoBoxYumalon.png);
}

#Button9
{
    background-image:url(Assets/ButtonInfoBoxSanctum.png);
}

#BottomSpacer
{
    width:100%;
    height:1rem;
    flex-shrink:0;
}


.NavigationButton
{
    position: absolute;
    top: 10vh;
    height:auto;

    width: min(19vw, 380px);
    aspect-ratio: 384 / 81;

    display: flex;
    justify-content: center;
    align-items: center;

    border: none;
    cursor: pointer;

    transform:scale(0.96);
    transition:
        transform .15s ease,
        filter .15s ease;
}

.NavigationButton .ButtonBackground
{
    filter: brightness(0.75);
    transition:
        transform .15s ease,
        filter .15s ease;
}

.NavigationButton:hover .ButtonBackground {
    filter: brightness(1);
}

.NavigationButton:hover
{
    transform:scale(0.98);
    filter:brightness(1.05);
}

.NavigationButton:active
{
    transform:scale(.97);
}


.ArdronButton
{
    transform:scale(0.96);
    transition:
        transform .15s ease,
        filter .15s ease;
}

.ArdronButton:hover
{
    transform:scale(0.98);
    filter:brightness(1.05);
}

.ArdronButton:active
{
    transform:scale(.97);
}


#ScrollSpace::-webkit-scrollbar,
.ButtonInfo::-webkit-scrollbar,
.InfoBoxText::-webkit-scrollbar
{
    width:10px;
}

#ScrollSpace::-webkit-scrollbar-thumb,
.ButtonInfo::-webkit-scrollbar-thumb,
.InfoBoxText::-webkit-scrollbar-thumb
{
    background:rgba(255,255,255,.25);
    border-radius:999px;
}

#ScrollSpace::-webkit-scrollbar-track,
.ButtonInfo::-webkit-scrollbar-track,
.InfoBoxText::-webkit-scrollbar-track
{
    background:transparent;
}


#ScrollSpace,
.ButtonInfo,
.InfoBoxText
{
    scrollbar-color:rgba(255,255,255,1) transparent;
}



@media (max-width:1600px)
{
    #ScrollSpace
    {
        height:var(--scrollspace-height-size);
    }

    .ButtonInfo
    {
        line-height:1.3;
    }
}

@media (max-width:1280px)
{
    #TopBar
    {
        height:15vh;
    }

    #ScrollSpace
    {
        top:17vh;
        height:78vh;
    }

    #VoidEyes
    {
        width:180px;
    }

    #NFSOLogo
    {
        width:100px;
    }
}

@media (min-width:3000px)
{
    :root
    {
        --content-width:2000px;

        --title-size:120px;
        --header-size:70px;
        --body-size:36px;
        --textbox-size:28px;
    }
}

/*----------------------------------------------------------------------------------------------------------------------*/

#Rain
{
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

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


#BarTop,
#BarBottom
{
    display: block;
    position: relative;
    left:17.5%;
    width: 65%;
    height: auto;
}

#ActualMiddle
{
    position: relative;
    width: 100%;
    height:100.5%;
}

#BarMiddle
{
    position: absolute;
    inset: 0;

    background-image: url("Assets/BarMiddle.png");
    background-size: 65%;
    background-repeat: repeat-y;
    background-position: center;

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

#InsideMiddle
{
    width: 100%;
    height:100%;
    padding:20px;
    pointer-events:auto;

}

#VexTitle
{
    font-family: Ardron;
    font-size:30px;
    position: relative;
    padding-top: 10px;
    display:flex;
    justify-content: center;
    align-items: center; 
    text-align:center;
    white-space:pre-line;
}


.Divider {
    position: relative;

    width: 64.25%;
    height: 20px;

    margin: 10px auto 0;
    

    background-image: url("Assets/Divider.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}



#VexF{
    position:absolute;
    left:16%;
    top:0.1%;

    width:350px;
    height:350px;

    background-image:url(Assets//VexF.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;

}

.VexProfileQuestion
{
    font-size:var(--profilequestion-size);
    font-family: Ardron;
    background-color:rgba(0, 0, 0, 0.685);
    text-align: left;
    position: relative;
    align-items: center;
    left:18%;
    padding-left: 1%;
    padding-top: 1%;
    margin-top: 1%;
    width: 63%;
}

.VexProfileAnswer
{
    text-align: left;
    font-family: Ardron;
    position: relative;
    align-items: center;
    white-space:pre-line;
    width:63%;
    left:19%;
    font-size:var(--profileanswer-size);
}



#HereBeDragons{
    position: relative;
    top:-0.5%;
    width:63%;
    height:0.6%;
    left:0%;
    font-size:var(--profileanswer-size);
}

#HereBeDragonsAnswers{
    position: absolute;
    display:none;
    text-align: left;
    position: relative;
    align-items: center;
    white-space:pre-line;
    width:63%;
    left:19%;
    font-size:var(--profileanswer-size);
}


/*----------------------------------------------------------------------------------------------------------------------*/





#AuliBarTop,
#AuliBarBottom
{
    display:block;
    position:relative;

    width:75%;
    height:auto;

    margin:0 auto;
}

#AuliActualMiddle
{
    position:relative;

    width:100%;
}

#AuliBarMiddle
{
    position:absolute;

    width:68.5%;
    height:102%;

    left:50%;
    top:-45px;

    transform:translateX(-50%);

    background-image:url("Assets/AuliBarMiddle.png");

    background-size:100% auto;
    background-repeat:repeat-y;
    background-position:center top;

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

#AuliInsideMiddle
{
    position:relative;

    width:100%;
    padding:20px;
}

#AuliBarBottom
{
    margin-top:0;
}

#AuliDivider
{
    position:relative;
    left:-9px;

    width:65%;
    aspect-ratio:1593 / 110;

    margin:1rem auto 0;

    background-image:url("Assets/AuliDivider.png");
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position:center;
}

#AuliH
{
    position:absolute;

    left:19%;
    top:-10px;

    width:clamp(150px, 12vw, 225px);
    aspect-ratio:1 / 1;

    background-image:url("Assets/AuliH.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

.AuliTitle
{

    font-family: Skranji;
    font-size:30px;
    top: -40px;
    position: relative;
    justify-content: center;
    white-space:pre-line;
}

.AuliProfileQuestion
{
    font-family: Skranji;


    font-size:var(--profilequestion-size);
    background-color:rgba(121, 0, 0, 0.685);
    text-align: left;
    position: relative;
    align-items: center;
    left:18%;
    padding-left: 1%;
    padding-top: 1%;
    margin-top: 1%;
    width: 64%;
}

.AuliProfileAnswer
{
    font-family: Skranji;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
    position: relative;
    align-items: center;
    white-space:pre-line;
    width:63%;
    left:19%;
    font-size:var(--profileanswer-size);
}



/*----------------------------------------------------------------------------------------------------------------------*/






#CRTFrame
{
    position: absolute;

    inset: 0;

    background-image: url("Assets/PupCRT.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;

    width: 100%;
    height: 100%;

    z-index: 10;

    pointer-events: none;
}


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

    left: 50%;
    top: 20%;

    width: 700px;
    aspect-ratio: 1 / 1;

    transform: translateX(-50%) scale(var(--crt-scale));
    transform-origin: top center;

    z-index: 10;
    pointer-events: none;
    overflow: hidden;
}

:root
{
    --crt-scale: 1;
}

@media (max-height: 800px)
{
    :root
    {
        --crt-scale: 0.70;
    }
}

#CRTScreen
{
    position:absolute;
    top:0;
    left:0;
    overflow: hidden;
    display:block;
    width:100%;
    height:100%;
    z-index: 9;
    background-repeat: no-repeat;
    
   
}


.CRTScreenMask
{
    position: absolute;

    mask-image:url("Assets/PupStage.png");
    -webkit-mask-image:url("Assets/PupStage.png");

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

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

    mask-position: 0px;
    -webkit-mask-position: 0px
}

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

    left:6%;
    top:0;

    width:88%;
    height:95%;

    z-index:8;

    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;

    pointer-events:auto;
}

#Sky
{
    position:absolute;
    image-rendering: pixelated;
    display:block;

    left:-8%;
    top:-155%;
    width:100%;
    height:80vw;

    width:clamp(700px, 120vw, 200px);
    aspect-ratio:1 / 1;
    z-index: 1;

    background-image:url("Assets/PupSky.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    pointer-events:none;
}

#PupGrass
{
    position:absolute;
    image-rendering: pixelated;
    display:block;

    left:-5%;
    bottom:-23%;
    width:110%;
    height:100%;


    width:clamp(680px, 12vw, 200px);
    z-index: 2;

    background-image:url("Assets/PupGrass.png");
    background-size:100%;
    background-repeat:repeat-x;
    background-position:0px 315px;

    pointer-events:none;
}

#Static
{
    position:absolute;
    image-rendering: pixelated;
    display:block;

    left:-5%;
    top:1%;
    width:110%;
    height:80%;

    width:clamp(700px, 12vw, 200px);
    aspect-ratio:1 / 1;
    z-index: 7;

    background-image:url("Assets/Static1.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;

    pointer-events:none;

    opacity: 0;
    transition: opacity 1.5s linear;
}

#ScanLines
{
    position: absolute;

    width: 90%;
    height: 80%;
    left: 5%;
    top: 1%;



    background-image: url("Assets/ScanLines.png");

    background-size: 5%;
    background-repeat: repeat;

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


.PupProfileQuestion
{
    font-family: Lilita;

    font-size:var(--pupprofilequestion-size);

    text-align: center;
    position: relative;
    align-items: center;
    top:0%;
    left:0%;
    padding-left: 1%;
    padding-top: 1%;
    width: 99%;
    background-color:rgba(0, 0, 0, 0.295);
}

.PupProfileAnswer
{
    font-family: Lilita;
    padding-top: 20px;
    text-align: left;
    position: relative;
    align-items: left;
    white-space:pre-line;
    width:97%;
    left:2%;
    top:-4%;
    font-size:var(--profileanswer-size);
}


#Channel1,
#Channel2,
#Channel4,
#Channel5,
#Channel6,
#Channel7,
#Channel8,
#Channel9,
#Channel10,
#Channel11,
#Channel12,
#Channel13,
#Channel14,
#Channel15,
#Channel16,
#Channel17,
#Channel18,
#Channel19,
#Channel20,
#Channel21,
#Channel22,
#Channel23,
#Channel24,
#Channel25,
#Channel26,
#Channel27,
#Channel28,
#Channel29,
#Channel30,
#Channel31
{
    background-color:rgba(0, 121, 26, 0.685);
    position:relative;
    left:3%;
    top:5.5%;
    padding-top: 10px;
    display:none;
    width:95%;
    height:76%;
    z-index: 2;
}

#Channel31
{
    background-image: url(Assets/67.png);
    background-size: 87%;
    background-repeat: no-repeat;
    background-position: 50% 0;
}

#Channel3
{

    position:relative;
    display:none;
    width:100%;
    height:100%;
}

#PupPowerButton,
#PupVolumeUpButton,
#PupVolumeDownButton,
#PupChannelUpButton,
#PupChannelDownButton,
#StartButton
{
    background: transparent;

    display:block;

    border: none;
    outline: none;
    padding: 0;
    cursor: pointer;
    pointer-events:auto;
    z-index: 17;
}

#PupPowerButton
{
    position: absolute;

    right: 6%;
    bottom: 6%;

    width: 9%;
    aspect-ratio: 1 / 1;

}

#PupVolumeUpButton
{
    

    position: absolute;

    right: 42%;
    bottom: 7.5%;

    width: 6%;
    aspect-ratio: 1 / 1;

}
#PupVolumeDownButton
{

    position: absolute;

    right: 50.5%;
    bottom: 7.5%;

    width: 6%;
    aspect-ratio: 1 / 1;

}
#PupChannelUpButton
{

   position: absolute;

    right: 70%;
    bottom: 7.5%;

    width: 6%;
    aspect-ratio: 1 / 1;

}

#PupChannelDownButton
{

     position: absolute;

    right: 61.5%;
    bottom: 7.5%;

    width: 6%;
    aspect-ratio: 1 / 1;

    

}

#PupPowerOn
{
    display:none;

    position: absolute;

    background-image:url("Assets/PupCRTON.png");
    background-size:100%;
    background-repeat:no-repeat;
    background-position:center;

    right: 0%;
    bottom: 0%;

    width: 100%;
    aspect-ratio: 1 / 1;
}

#NumberLeft
{
    display:none;
    position: absolute;

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

    left: 3.90%;
    bottom: 7%;

    width: 3.25%;
    aspect-ratio: 0.5 / 1;
    image-rendering: pixelated;
}

#NumberMiddleLeft
{
    display:none;
    position: absolute;

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

    left: 7.75%;
    bottom: 7%;

    width: 3.25%;
    aspect-ratio: 0.5 / 1;
    image-rendering: pixelated;
}

#NumberMiddleRight
{
    display:none;
    position: absolute;

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

    left: 11.60%;
    bottom: 7%;

    width: 3.25%;
    aspect-ratio: 0.5 / 1;
    image-rendering: pixelated;
}

#NumberRight
{
    display:none;
    position: absolute;

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

    left: 15.45%;
    bottom: 7%;

    width: 3.25%;
    aspect-ratio: 0.5 / 1;
    image-rendering: pixelated;
}


#PupInfoImage1
{
    position: absolute;

    width: 30%;
    height: 30%;
    right: -2.5%;
    top: 2%;

    background-image: url("Assets/PupNFS.png");

    background-size: 85%;
    background-repeat: no-repeat;

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

#PupInfoImage2
{
    position: absolute;

    width: 30%;
    height: 30%;
    left: 2%;
    top: 2%;



    background-image: url("Assets/PupNFSTilt.png");

    background-size: 90%;
    background-repeat: no-repeat;

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

#PupInfo
{
    font-family: Lilita;
    padding-top: 0px;
    text-align: center;
    position: relative;
    white-space:pre-line;
    width:100%;
    left:0%;
    top:0%;
    font-size:var(--profileanswer-sizepup);
}

#GameTitle
{
    font-family: Lilita;
    text-align: center;
    position: relative;
    align-items: center;
    white-space:pre-line;
    width:100%;
    left:0%;
    top:8%;
    font-size:var(--title-size);

    z-index: 3;
}

#PupHead
{
    position: absolute;

    width: 50%;
    height: 50%;
    left: 27%;
    top: 7%;

    background-image: url("Assets/DogHead.png");

    background-size: 90%;
    background-repeat: no-repeat;
    background-position:0 0;

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

#PupBody
{
    position: absolute;

    width: 30%;
    height: 30%;
    left: 36%;
    top: 24.25%;

    background-image: url("Assets/DogBody.png");

    background-size: 90%;
    background-repeat: no-repeat;

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

#StartButton
{
    position: absolute;

    right: 22.5%;
    bottom: 60%;

    width: 55%;
    height:7%;
    aspect-ratio: 1 / 1;
}

#StartText
{
    position:absolute;

    right: 0%;
    bottom: 60.5%;
    width: 100%;
    z-index: 4;
}

#StartScreen
{
    position: absolute;
    display:none;
    width: 100%;
    height: 100%;
    background-color: #000;

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

#PupLivesHead
{
    position: absolute;

    width: 20%;
    height: 20%;
    left: 30%;
    top: 35%;

    background-image: url("Assets/DogHead.png");

    background-size: 90%;
    background-repeat: no-repeat;

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

#PupLives
{
    position: absolute;

    width: 100%;
    height: 100%;
    left: 5%;
    top: 5%;

    z-index: 3;

    font-family: Lilita;
    text-align: center;
    position: relative;
    align-items: center;
    white-space:pre-line;
    font-size:var(--title-size);
}





#GameInfoBar
{
    position: absolute;
    display:none;

    background-color: green;

    width: 90%;
    height: 7%;
    left: 5%;
    top: 7%;

    z-index: 3;


}

#PupScore
{
    width: 30%;
    height: 10%;
    left: 1%;
    top: 50%;
    font-family: lilita;
    text-align: left;
    font-size: var(--profileanswer-size);
    position: absolute;
}

#PupTime
{
    width: 30%;
    height: 10%;
    left: 68%;
    top: 50%;
    text-align:right;
    font-family: lilita;
    font-size: var(--profileanswer-size);
    position: absolute;
}

#PupCoins
{
    width: 90%;
    height: 10%;
    left: 5%;
    top: 50%;
    text-align: center;
    font-family: lilita;
    font-size: var(--profileanswer-size);
    position: absolute;
}



#PupScoreText
{
    width: 90%;
    height: 10%;
    left: -39%;
    top: 8%;
    font-family: lilita;
    font-size: var(--profileanswer-size);
    position: absolute;
}

#PupTimeText
{   width: 90%;
    height: 10%;
    left: 49%;
    top: 8%;
    font-family: lilita;
    font-size: var(--profileanswer-size);
    position: absolute;
}

#PupCoinsText
{width: 90%;
    height: 10%;
    left: 5%;
    top: 8%;
    font-family: lilita;
    font-size: var(--profileanswer-size);
    position: absolute;
}

#PupSprite
{
    position: absolute;
    display:none;

    width: 20%;
    height: 10%;
    left: 5%;
    bottom: 28.5%;

    z-index: 3;

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

.Cloud
{
    position: absolute;
    display:none;
    width: 20%;
    aspect-ratio: 2 / 1;

    background-image: url("Assets/Cloud1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0px 0px;

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



    z-index: 2;
}

.Coin
{
    position:absolute;
    display:none;
    width: 5%;
    aspect-ratio: 1 / 1;

    background-image: url("Assets/Coin.png");
    background-size: contain;
    background-repeat: no-repeat;

    image-rendering: pixelated;
    pointer-events: none;
    background-position: 0px 0px;

    bottom:50%;

    z-index: 3;
}

.Rock
{
    display:none;
    position: absolute;

    width: 15%;
    aspect-ratio: 1 / 1;

    background-image: url("Assets/Rock1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0px 0px;

    image-rendering: pixelated;
    pointer-events: none;
    left:100%;

    bottom: 26%;

    z-index: 3;
}

#JumpScreen
{
    position: absolute;
    display:none;

    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;

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

#Jump
{
    position: absolute;
    display:block;

    background-color: transparent;

    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
     border: none;
    outline: none;

    z-index: 4;
    pointer-events: auto;
}

#PupHitBox
{
    position: absolute;
    display:block;
    inset: 0;

    left: 30%;
    top: 0%;

    width: 40%;
    height: 80%;
    z-index: 3;
}

.RockHitBox
{
    display:block;
    position: absolute;

    width: 45%;
    aspect-ratio: 1 / 1;

    pointer-events: none;
    left:30%;
    top:30%;

    z-index: 3;
}

.CoinRockHitBox
{
    position:absolute;
    display:block;
    width: 400%;
    height:400%;
    aspect-ratio: 1 / 1;
    top:-150%;
    left:-150%;
    pointer-events: none;
    background-position: 0px 0px;


    z-index: 3;
}


#LastHighScore
{
    position: absolute;
    bottom: 56%;
    right:35%;

    font-size: var(--profileanswer-size);
}

@media (max-height: 800px)
{
    :root
    {
        --crt-scale: 0.70;
    }

    #StartText
    {
        bottom: 53%;
    }

    #StartButton
    {
        bottom: 53%;
    }

    #LastHighScore
    {
        bottom: 35%;
    }
}

#PupCRTBackground
{
    position:absolute;

    width:100%;
    height:100%;

    background-image: url(Assets/VexBackground.png);
}

#PupWin
{
    position:fixed;
    display:none;

    width:86%;
    height:80%;
    top:15%;

    background-image: url(Assets/PupWin.png);
    background-size: 100% 50%;
    background-repeat: no-repeat;
}









#NESPlusButton
{
    position:absolute;
    display:flex;
    aspect-ratio: 128 / 27;
    height: auto;
    width:min(60vw, 60vw);

    left: 20%;
    pointer-events: auto;
}

#NESPlusPage
{
    font-family:Ardron;
    font-size: var(--body-size);
    display:none;
    position:relative;
    width: 100%;
    height:auto;
    background-color: rgba(0, 0, 0, 0.50);
    z-index: 0;

    white-space: pre-line;
    pointer-events: auto;
}

.NESTitle
{
    font-family: Ardron;
    font-size: 50px;
    top: 0px;
    left:2.5%;
    width:95%;
    padding-top: 15px;
    padding-bottom: 10px;
    position: relative;
    justify-content: center;
    white-space: pre-line;

    background-color: rgba(5, 5, 5, 0.25);
}

#Mario1
{
    position:absolute;
    width: 300px;
    height:300px;
    left:43%;
    background-repeat: no-repeat;
    background-image: url(Assets/Mario1.png);
    background-size: 90%;
}

#Mario2
{
    position:absolute;
    width: 500px;
    height:500px;
    left:44%;
    background-repeat: no-repeat;
    background-image: url(Assets/Mario2.png);
    background-size: 50%;
}

#Mario1
{
    position:absolute;
    width: 300px;
    height:300px;
    left:43%;
    background-repeat: no-repeat;
    background-image: url(Assets/Mario1.png);
    background-size: 90%;
}


#MarioExample1
{
    position:absolute;
    width: 539px;
    height:580px;
    Transform: translateY(-55px);
    left:35%;
    background-repeat: no-repeat;
    background-image: url(Assets/MarioExample1.png);
    background-size: 100%;
    z-index: 10;
}




#FamiStudioPic
{
    position:absolute;
    width: 960px;
    height:auto;
    aspect-ratio: 16 /9;
    left:25%;
    background-repeat: no-repeat;
    background-image: url(Assets/Famistudio.png);
    background-size:100%;
}

#NESLimitationsButton
{
    position:absolute;
    display:flex;
    aspect-ratio: 128 / 27;
    height: auto;
    width:min(20vw, 40vw);
    top:2.5%;
    left: 40%;
    pointer-events: auto;
}