html {
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-color: yellow black;
    cursor: url(../images/lexieland/cursor.png) 0 0, auto;

    body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0;
    }

    p, ul {
        margin: 0;
        padding: 0;
    }

    a:hover, button:hover, #guestbook:hover, #journal:hover {
        cursor: url(../images/lexieland/cursor_hover.webp) 0 0, auto;
    }
}

.lexietop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -9;
}
.lexiebottom {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;

    background-image:
        radial-gradient(circle at center 20%,
            #000000 0%,
            #ffa600 35%),
        repeating-radial-gradient(circle at center 20%,
            #f7c1a1,
            #a02500,
            .2em,
            transparent .3em,
            transparent .1em);
}
.sun {
    position: fixed;
    top: 0vh;
    width: 20vw;
    height: 20vw;
    z-index: -8;

    background-image: url(../images/lexieland/sunquestionmark.gif);
    background-size: 100% 100%;
}
.cloud {
    position: fixed;
    width: 20vw;
    height: 10vw;
    z-index: -7;

    background-size: 100% 100%;
}
.alpha {
    top: 5vh;

    background-image: url(../images/lexieland/cloud.webp);
    animation: cloud1 300s -55s linear infinite;
}
.bravo {
    top: 15vh;

    background-image: url(../images/lexieland/cloudright.webp);
    animation: cloud1 300s -15s linear reverse infinite;
}
@keyframes cloud1 {
    0% {
        right: -20vw;
    }
    100% {
        right: 120vw;
    }
}

#sitecontainer {
    display: none;
    height: 0;
    width: 0;
    transition: 2s ease-out;

    position: fixed;
    top: 0;

    background: black;
    border: .1em solid white;
    box-sizing: border-box;

    #siteframe {
        width: 100%;
        height: calc(100% - 1.5em);

        border: none;
    }
    #topbar {
        width: 100%;
        height: 1.5em;

        background: black;
        border-bottom: .1em solid white;
        box-sizing: border-box;

        display: flex;
        align-items: center;
        
        #title {
            flex: 1;
            padding-left: .5em;
        }

        #closer {
            background: black;
            color: #FF1D00;
            border: none;
            border-left: .1em solid white;
            box-sizing: border-box;
            border-radius: 0;
            height: 100%;
            width: 2em;
        }
    }
}

#hud {
    width: 100vw;
    height: 100%;

    position: fixed;
    top: 0;
    left: 0;

    pointer-events: none;

    div {
        img {
            height: 100%;
            image-rendering: pixelated;
        }
    }

    #frame {
        width: 100%;
        height: 100%;
        border: .1em solid #FF1D00;
        box-sizing: border-box;
    }
    #hud_tl {
        position: absolute;
        top: 0;
        left: 0;

        background: black;
        border: .1em solid #FF1D00;
        border-left: none;
        border-top: none;
        border-radius: 0 0 100% 0;

        img {
            image-rendering: pixelated;
            position: relative;
            pointer-events: all;
        }
        img:nth-of-type(1) {
            top: 0;
            left: 0;
            width: 10em;
            margin: 0 0 0 1em;
        }
        img:nth-of-type(2) {
            top: -1em;
            left: -.5em;
            width: 12em;
            margin: 0 1em 1em 0;
        }
    }
    #hud_tr {
        position: absolute;
        top: 0;
        right: 0;

        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2em;
        padding: .5em 1em .5em 3em;
        background-color: black;
        border: .1em solid #FF1D00;
        border-top: none;
        border-right: none;
        border-radius: 0 0 0 999px;

        #lastfm {
            padding-top: 1em;
            width: 12em;
            
            background-color: yellow;
            border: .1em solid yellow;
            box-sizing: border-box;
        }
        #guestbook, #journal {
            pointer-events: all;
            display: block;
            width: auto;
            height: 3em;
            aspect-ratio: 1 / 1;
            border: .1em solid #FF1D00;
            border-radius: 100%;
            background-position: 0 0;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        #guestbook {
            background-image: url(../images/lexieland/guestbook.webp);
        }
        #journal {
            background-image: url(../images/lexieland/journal.webp);
        }
    }
    #hud_mr {
        position: absolute;
        right: 0;
        top: 18vh;
        height: 16em;
        width: 10em;
        overflow-y: scroll;
        pointer-events: all;
        transition: .5s ease-out;

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2em;
        padding: .5em;
        background-color: black;
        border: .1em solid #FF1D00;
        border-right: none;

        #tyvnjam {
            border-radius: 0;
            font-size: 0.8em;

            table {
                background-color: black;
            }

            .webring-prev, .webring-next, .webring-info {
                padding: 0;
            }
        }
        #yevn {
            border-radius: 0;
            font-size: 0.8em;
            padding: 0;

            table {
                border-radius: 0;
                border: .1em solid #d15d5d;
                background-color: black;
                color: #ffd3d3;
            }
        }
        #buttons {
            width: 100%;
            text-align: center;

            img {
                width: 88px;
                height: 31px;
            }
        }
    }
    #hud_bl {
        position: absolute;
        bottom: 0;
        left: 0;

        width: 11vw;

        background: black;
        border: .1em solid #FF1D00;
        border-left: none;
        border-bottom: none;
        border-radius: 0 999px 0 0;

        #item-left {
            width: 3vw;
            height: 3vw;
            margin-left: 1vw;
            margin-top: 2vh;
            
            background-image: url(../images//lexieland/items/websites.webp);
        }
        #item-focus {
            width: 5vw;
            height: 5vw;
            margin-left: 2vw;

            background-image: url(../images//lexieland/items/games.webp);

            #item-focus-name {
                position: relative;
                top: 0;
                left: 100%;
                border-radius: 999px;
                padding-left: .5em;
                padding-right: .5em;
                color: white;
                background-color: black;
                border: .1em #ff1d00 solid;
                box-sizing: border-box;
            }
        }
        #item-right {
            width: 3vw;
            height: 3vw;
            margin-left: 5vw;
            margin-bottom: 1vh;

            background-image: url(../images//lexieland/items/visunovos.webp);
        }
        #item-left, #item-focus, #item-right {
            border: .1em #ff1d00 solid;
            box-sizing: border-box;
            border-radius: 100%;

            pointer-events: all;

            background-size: 100% 100%;
        }
        #item-left:hover, #item-focus:hover, #item-right:hover {
            cursor: url(../images/lexieland/cursor_hover.webp) 0 0, auto;
        }
    }
    #hud_bio {
        position: absolute;
        bottom: 0;
        left: 35vw;

        width: 30vw;
        height: 81vh;

        background: black;
        border: #FF1D00 .1em solid;
        border-radius: 100px 100px 0 0;

        transform: translateY(73vh);

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: baseline;
        gap: 5vh;

        transition: .5s ease-out;

        #itske {            
            width: 10vw;
            height: 10vw;
            margin-top: -7vw;
            border-radius: 100%;
            border: .1em solid #FF1D00;
            image-rendering: pixelated;
        }
        #bio-handle {
            position: absolute;
            top: -5vw;
            right: 9vw;
            background: black;
            border: #FF1D00 .1em solid;
            border-radius: 100%;
            width: 2vw;
            height: 2vw;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5em;
            rotate: 15deg;
            pointer-events: all;
        }
        #bio-handle:hover {
            cursor: url(../images/lexieland/cursor_hover.webp) 0 0, auto;
        }
        #bio-container {
            display: flex;
            flex-direction: row;

            #bio-content {
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                #bio-stats {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;

                    margin: 0 .25em .25em .5em;

                    overflow: hidden;
                    border: .01em solid yellow;
                    padding: .5em;
                }
                #skills {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 4;

                    margin: .25em .25em .25em .5em;

                    overflow: hidden;
                    border: .01em solid yellow;
                    padding: .5em;

                    display: flex;
                    flex-direction: column;

                    .skill {
                        display: grid;
                        grid-template-columns: 25% 75%;
                        grid-template-rows: 25% 75%;
                        
                        font-size: .8em;

                        .cost, .name, .desc {
                            padding: .25em;
                        }
                        .cost {
                            grid-column-start: 1;
                            grid-column-end: 2;
                            grid-row-start: 1;
                            grid-row-end: 2;
                        }
                        .name {
                            grid-column-start: 2;
                            grid-column-end: 3;
                            grid-row-start: 1;
                            grid-row-end: 2;
                        }
                        .desc {
                            grid-column-start: 1;
                            grid-column-end: 3;
                            grid-row-start: 2;
                            grid-row-end: 3;
                            
                            border-top: .1em solid silver;
                            text-align: justify;
                        }
                    }
                    .skill:nth-of-type(1) {
                        border-bottom: .1em solid yellow;
                    }
                    .skill:nth-of-type(3) {
                        border-top: .1em solid yellow;
                    }
                }
                #obsessions {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 4;
                    grid-row-end: 5;

                    margin: .25em .25em 0 .5em;

                    overflow: hidden;
                    text-align: justify;
                    border: .01em solid yellow;
                    padding: .5em;

                    p:nth-of-type(1) {
                        border-bottom: solid .1em silver;
                    }
                    p:nth-of-type(2) {
                        font-size: .8em;
                    }
                }
                #backstory {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 4;

                    margin: 0 .5em .25em .25em;

                    overflow: hidden;
                    border: .01em solid yellow;
                    padding: .5em;
                    text-align: justify;

                    p:nth-of-type(1) {
                        border-bottom: solid .1em silver;
                        font-size: 1.2em;

                        span {
                            color: silver;
                            font-style: italic;
                        }
                    }
                }
                #inventory {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 4;
                    grid-row-end: 5;

                    margin: .25em .5em 0 .25em;

                    overflow: hidden;
                    border: .01em solid yellow;
                    border-collapse: collapse;

                    tr {
                        td {
                            vertical-align: middle;
                            text-align: center;

                            padding: .25em;
                            border: .01em solid silver;
                        }
                    }
                }
            }
        }
        
    }
    #hand {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 50%;
        height: 50%;

        transform: scaleX(-1);
        filter: saturate(6) grayscale(1) contrast(10);

        z-index: -1;
    }
    #clap {
        display: none;
    
        bottom: 0;
        left: 0;

        z-index: -1;

        img {
            width: 100%;
            image-rendering: pixelated;
            filter: contrast(5) saturate(4) grayscale(1) contrast(5);
        }
    }
    #talker {
        display: none;
        position: fixed;
        bottom: 0;
        left: 25vw;
        width: 50vw;
        height: 50vw;
        z-index: 1;

        image-rendering: pixelated;
    }
    #dialogue {
        position: fixed;
        bottom: 0;
        left: 30vw;
        width: 40vw;

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

        background-color: #000000;
        border: #FF1D00 .1em solid;

        #itske-dialogue {
            position: absolute;
            top: -7.5vw;
            left: 32vw;
            rotate: 15deg;

            width: 10vw;
            height: 10vw;
            border-radius: 100%;
            border: .1em solid #FF1D00;
            image-rendering: pixelated;
        }

        #name {
            padding: 1em 3em 0 3em;
            font-size: 1.2em;
            font-weight: 900;

            border-bottom: #FF1D00 .1em solid;
        }
        #text {
            padding: .5em 3em 1em 3em;
            text-align: justify;
        }
        #buttons {
            display: flex;
            flex-direction: row;
            gap: 1em;
            padding: .5em 3em 1em 3em;

            #link, #cancel {
                display: flex;
                justify-content: center;
                align-items: center;
                
                font-family: 'RainyHearts';
                font-size: .9em;
                text-align: center;
                background: #000000;
                border: #FF1D00 1px solid;
                color: #FF1D00;
                
                padding: .1em;
                margin-bottom: 1em;
                flex: 1;
                
                pointer-events: all;
            }
        }
    }
}

.ground {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -6;
    padding-left: 45vw;
    padding-right: 0;
    
    height: 100%;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 25vw;

    background-image: url(../images/lexieland/ground.webp);
    background-size: auto 100%;

    .house {
        position: absolute;
        bottom: 25vh;
        width: 50vw;
        height: 35vw;
        z-index: -2;

        img {
            image-rendering: pixelated;
            width: 100%;
        }
    }
    .one {
        left: 5vw;
    }
    .two {
        left: 45vw;
    }
    .three {
        left: 90vw;
        bottom: 27vh;
    }
    .four {
        left: 130vw;
        bottom: 32vh;
        z-index: -3;
    }

    .interactable {
        height: 100%;
        /* border: solid 3px blue; */

        display: flex;
        justify-content: center;
        align-items: center;
        z-index: -1;

        a {
            margin-top: 55vh;

            img {
                image-rendering: pixelated;
            }

            .tooltip {
                display: none;

                position: absolute;
                bottom: 50vh;
                margin-left: -3vw;

                width: 10vw;
                height: auto;

                padding: 1em;

                background: black;
                border: 1px solid white;

                .name {
                    font-size: 1.2em;
                    text-decoration: underline solid #FF1D00 .1em;
                    margin-bottom: .2em;
                }
                ul {
                    margin-left: -.2em;
                    font-weight: 100;
                    list-style: square;
                }
            }

            .char {
                height: 50vh;
            }

            .grabber {
                position: absolute;
                bottom: 0;

                z-index: -1;
                height: 75vh;
                margin-left: -25vw;
            }
        }
        a:hover {
            .tooltip {
                display: block;
            }

            img {
                filter: contrast(2)
            }
        }
    }
    .interactable:nth-of-type(1) {
        a {
            margin-top: 20vh;
            margin-right: 20vw;
            
            .char {
                height: 15vh;
            }
        }
    }
    .interactable:nth-of-type(2) {
        a {
            margin-top: 50vh;
            margin-right: 0;
            
            .char {
                height: 40vh;
            }
        }
    }
    .interactable:nth-of-type(3) {
        a {
            margin-top: 25vh;
            margin-right: 0;
            
            .char {
                height: 25vh;
            }
        }
    }
    .interactable:nth-of-type(4) {
        a {
            margin-top: 20vh;
            
            .char {
                height: 27vh;
            }
            .tooltip {
                bottom: 55vh;
            }
        }
    }
}
@keyframes grabber {
    0% {
        bottom: -30vh;
        margin-left: -30vw;
    }
    10% { margin-left: -31vw; }
    20% { margin-left: -28vw; }
    30% { margin-left: -29vw; }
    50% { margin-left: -28vw; }
    40% { margin-left: -26vw; }
    60% { margin-left: -27vw; }
    70% { margin-left: -26vw; }
    80% { margin-left: -27vw; }
    90% { margin-left: -24vw; }
    100% {
        bottom: -10vh;
        margin-left: -25vw;
        
    }
}

@media (orientation: portrait) {
    body::before {
        content: "THIS PAGE IS NOT MOBILE FRIENDLY, AS YOU MIGHT HAVE SURMISED! SHOO! FLEE! RETURN IN 16:9 OR WAIT PATIENTLY FOR A MOBILE VERSION!";

        z-index: 999;

        font-size: 3vh;
        font-family: 'Times New Roman', Times, serif;
        text-align: justify;
        text-justify: inter-character;
        background: #FF1D00;
        color: #000000;
    }
}