@import url('https://fonts.googleapis.com/css2?family=Libertinus+Sans:ital,wght@0,400;0,700;1,400&display=swap');

@font-face {
    font-family: 'Pristina';
    font-style: normal;
    font-weight: normal;
    src: local('Pristina'), url('../fonts/Pristina.woff') format('woff');
}

:root {
    --brown: #441c16;
    --lbrown: #bf9884;
    --tan: #eddec2;
    --cream: #f7f2e4;

    --w: 500px;
    --h: 875px;

    --sw: -41px;
    --hw: -31px;
}

* { box-sizing: border-box; }

body {
    color: var(--brown);
    font-family: Libertinus Sans;
    font-size: 16px;

    background: linear-gradient(#050C1F, #222D48);

    overflow: visible;

    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

::selection {
    background-color: #c0caed;
}

a {
    color: var(--brown);
    font-weight: 500;
}

br {
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

h1 {
    font-family: Pristina;
    font-weight: normal;
    font-size: 28px;
    line-height: 1;

    margin: 25px 0px 0px -10px;

    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

h2 {
    font-size: 18px;
    line-height: 1;
    margin: 2px 0px;

    font-style: italic;
}

h3 {
    font-size: 80%;
    text-transform: uppercase;
    margin: 0px;
}

h4 {
    font-size: 85%;
    font-weight: 100;
    text-transform: uppercase;
    display: inline;
}

b {
    font-weight: 1000;
    font-size: 80%;
}

ul {
    margin: 0px;
    padding: 0px 20px;

    list-style-type: "◌˚  ";
}

ul .sub {
   list-style-type: "◦˚ ";
}

li::marker {
    font-size: .75em;
}

input[type='range'] {
    -webkit-appearance: none !important;

    width: 100%;
    height: 30px;

    border-radius: 50px;

    height: 4px;

    margin: 8px 0px;
    padding: 0px;

    cursor: pointer;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;

    width: 16px;
    height: 16px;

    padding: 0px;

    background: url('../img/orb.png');
    background-size: cover;

    clip-path: circle(50% at 50% 50%);
}

#eyes-hue {
    background: linear-gradient(to right, #b2b5db, #ab84c2, #e0828a, #e0b182, #b7e082, #b2b5db);
}

.clothes-slider input[type='range'] {
    width: 80% !important;
}

.slider-hue-full {
    background: linear-gradient(to right, #8dc7ba, #b2b5db, #ab84c2, #e0828a, #e0b182, #b7e082, #8dc7ba);
}

.slider-hue {
    background: linear-gradient(to right, #cfa7c6, #cccfa7);
}

.slider-saturate {
    background: linear-gradient(to right, #b2b5db, #3847d1);
}

.slider-brightness {
    background: linear-gradient(to right, #22296e, #e1e1e6);
}

#preloader {
    width: 100%;
    height: 100vh;

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

    background: linear-gradient(#050C1F, #222D48);
    align-items: center;
    justify-content: center;

    display: flex;

    font-family: Pristina;
    color: white;
    font-size: 24px;

    z-index: 9999;
}

#load::after {
    width: 0px;

    overflow: hidden;
    display: inline-block;

    font-family: Libertinus Sans;
    font-size: 16px;

    animation: ellipsis steps(4, end) 0.75s infinite;
    content: '\2026';

}

#enter {
    height: 35px;

    display: flex;
    align-items: center;
    font-size: 48px;
    line-height: 0.8;
    text-align: center;

    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

#enter:hover {
    background-image: radial-gradient(rgba(255, 175, 0), rgba(255, 175, 0, .5));
    border-radius: 500px;
    box-shadow: 0px 0px 20px rgba(255, 175, 0), 0px 0px 100px rgba(255, 175, 0), 0px 0px 150px rgba(255, 175, 0);
    transform: scale(1.1);
    transition: transform 0.5s ease-out;
}

#warning {
    width: 250px;
    text-align: center;
    font-family: Libertinus Sans;
    font-size: 12px;
    font-style: italic;

    position: absolute;
    top: 55%;

    pointer-events: none;
}

#loader-music {
    width: 100px;
    height: 100px;
    transform: scale(.6);
    background: url('../img/icons.png');
    background-position: -200px 0px;

    position: absolute;
    top: 60%;
}

#loader-music::after {
    position: absolute;
    width: 130px;

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


    content: 'Autoplay music?';

    font-family: Libertinus Sans;
    font-size: 18px;
}

@keyframes ellipsis {
  to {
    width: 16px;
  }
}

.subtitle {
    border-left: 1px solid var(--brown);
    padding-left: 8px;
    margin-left: 3px;

    font-size: 80%;
    line-height: 1;
}

#screen {
    width: 1100px;
    height: 600px;

    position: absolute;
    top: 365px;
    left: 50%;
    transform: translate(-50%, -50%);

    border-radius: 1000px;

    display: flex;
    align-items: center;

    margin: auto;
    overflow: hidden;
}

#outer {
    width: 1125px;

    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: 10;
}

#journal-icon {
    width: 100px;
    height: 100px;

    background: url('../img/icons.png');
    background-position: -100px 0px;

    position: absolute;
    top: 45px;
    left: -20px;

    transform: rotate(10deg);

    cursor: pointer;
}

#music-icon {
    top: -10px;
    left: 80px;
}

.music-icon {
    width: 100px;
    height: 100px;

    background: url('../img/icons.png');
    background-position: -200px 0px;

    position: absolute;

    cursor: pointer;
}

#music-icon:hover {
    transform: rotate(-5deg);
}

#journal-icon:hover {
    transform: none;
}

#sit {
    width: 100px;
    height: 100px;
    transform: scale(1.12);
    background: url('../img/icons.png');
    background-position: 0px 0px;

    position: absolute;
    top: 550px;
    right: 185px;

    clip-path: circle(50% at 50% 50%);

    cursor: pointer;
}

#sit-icon:hover {
    filter: brightness(1.15);
    transition: filter .15s ease-out;
}

#border {
    width: 1125px;
    content: url('../img/border.png');
    position: absolute;
    pointer-events: none;

    z-index: 10;
}

#bounds {
    width: 500px;
    height: 300px;

    position: relative;
    margin: auto;

    display: flex;
    align-items: center;

    pointer-events: none;
}


#background {
    background-image: url('../img/background.png');
    background-size: cover;

    position: absolute;
    left: -60%;
    width: 230%;
    height: 570%;

    position: absolute;
    transition: transform 0.1s ease-out;
}

#parallax {
    background-image: url('../img/parallax.png');
    background-size: cover;

    position: absolute;
    top: -180%;
    width: 100%;
    height: 400%;

    position: absolute;
    transition: transform 2s ease-out;
}

.sign {
    width: 180px;
    height: 162px;
    transform: scale(1.25);

    background: url('../img/signs.png');

    position: absolute;

    cursor: pointer;
}

.sign:hover {
    filter: brightness(1.2);

}

.top-sign {
    background-position: 0 0;

    left: 568px;
    top: 400px;
}

.bottom-sign {
    background-position: -180px 0;

    right: 293px;
    bottom: 715px;
}

.sign-text {
    position: relative;
    top: 30px;
    left: 53px;

    font-size: 32px;
    font-family: Pristina;

    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

#shadow {
    width: 100%;
    height: 100vh;

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

    background: linear-gradient(#050C1F, #222D48);
    opacity: 0.5;

    z-index: 998;
}

#chattable {
    width: 350px;
    height: 400px;

    border: 0px;

    position: absolute;
    top: 100px;
    right: 215px;

    transform: rotate(-2deg);
}

#journal {
    width: 1150px;
    height: 575px;

    background-image: url('../img/journal.png');
    background-size: cover;

    position: absolute;
    top: 375px;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: 999;
}

#close::after {
    content: '✕';

    width: 100px;
    height: 60px;

    position: absolute;
    top: 390px;
    right: 20px;

    text-align: center;
    color: var(--cream);
    opacity: 1;

    font-weight: 1000;
    font-size: 45px;

    cursor: pointer;
}

.title {
    width: 250px;
    height: 60px;

    padding: 8px 12px;

    position: absolute;

    font-family: Pristina;
    font-size: 40px;

    background-color: var(--tan);

    outline: 1px dashed var(--brown);
    outline-offset: -5px;
    border: 2px solid var(--brown);

    z-index: 5;

    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;

    box-shadow: 0 5px 5px rgba(0, 0, 0, .25), 0 15px 20px #594b47;
}

.box {
    width: 315px;
    height: 350px;

    position: absolute;

    background-color: var(--cream);

    text-align: justify;

    border: 2px solid var(--brown);
    padding: 25px;

    overflow-y: auto;

    box-shadow: 5px 5px 15px #594b47;
}

.text-box {
    width: 315px;
    height: 350px;

    top: 140px;
    left: 200px;

    transform: rotate(3deg);

    user-select: text;
    -webkit-touch-callout: text;
    -webkit-user-select: text;
}

#select-box {

    width: 250px;
    height: 350px;

    top: 135px;
    left: 275px;

    transform: rotate(0deg);
    background-color: var(--tan);

    padding: 20px;
    padding-top: 5px;
    text-align: right;
    overflow-y: auto;

    box-shadow: 5px 5px 15px #594b47;
}

.match {
    padding: 2px 0px;
    cursor: pointer;
}

.option {
    width: 100%;
    padding: 5px 0px;
    border-bottom: 1px dashed var(--lbrown);

    cursor: pointer;
}

.option:hover::after, .match:hover::after {
    content: ' ■ ';
}

.selected {
    font-weight: bold;
    font-style: italic;
}

.break {
    height: 25px;
}

.select-menu {
    width: 120px;
    height: auto;

    position: absolute;
    top: 75px;
    left: 175px;

    background-color: var(--cream);
    transform: rotate(3deg);

    text-align: justify;

    border: 2px solid var(--brown);
    padding: 5px 15px;

    overflow-x: visible;

    box-shadow: 5px 5px 15px #594b47;
}

.select-option {
    margin: 5px 0px;
    padding: 5px;

    cursor: pointer;
}

.select-option:hover {
    text-decoration: underline dotted var(--brown);
    text-underline-offset: 4px;
}

.active {
    width: 115%;

    position: relative;
    top: 0px;
    right: 20px;

    padding-left: 10px;
    box-shadow: 5px 5px 15px #594b47;

    background-color: var(--cream);

    text-decoration: none !important;
}

.active::before {
    content: '■ ';
}

.portrait {
    width: 240px;
    height: 360px;

    top: 125px;
    right: 300px;

    overflow: hidden;

    background-color: var(--tan);
    transform: rotate(5deg);

    border: 4px double var(--brown);
    border-radius: 200px;
    padding: 10px 15px;

    overflow: none;
}

.color-select {
    margin-top: 10px;
}

#clothes-pagination {
    width: 100%;
    display: flex;
    justify-content: center;

    margin-top: 25px;
}

.clothes-icon {
    width: 30px;
    margin: 0px 5px;

    opacity: .5;

    cursor: pointer;
}

.clothes-active {
    transform: scale(1.1);
    transform-origin: bottom;
    opacity: 1;
}

#top-icon {
    content: url('../img/clothes/1.png');
}

#bottom-icon {
    content: url('../img/clothes/2.png');
}

#shoes-icon {
    content: url('../img/clothes/3.png');
}

.divider {
    height: 0px;
    width: 110%;

    border: 0.5px solid var(--brown);
    margin: 10px -10px;
}

.links {
    width: 90%;
    margin-left: 5%;
    margin-top: 10px;
    display: inline-flex;
    justify-content: space-between;

    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

.links a {
    text-decoration: none;
    border-bottom: 1px dashed var(--brown);
    color: var(--brown);

    font-weight: 1000;
}

.links a::after {
    content: "";
    width: 12px;
    height: 12px;
    display: inline-block;
    background-color: var(--brown);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-external-link'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");

    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;

    margin-left: 2px;
}

#icon-page1::after {
    position: absolute;
    top: 65px;
    left: 65px;

    content: "";
    width: 55px;
    height: 55px;
    display: inline-block;
    background-color: var(--cream);

    mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M128 128C128 92.7 156.7 64 192 64L341.5 64C358.5 64 374.8 70.7 386.8 82.7L493.3 189.3C505.3 201.3 512 217.6 512 234.6L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 128zM336 122.5L336 216C336 229.3 346.7 240 360 240L453.5 240L336 122.5zM248 320C234.7 320 224 330.7 224 344C224 357.3 234.7 368 248 368L392 368C405.3 368 416 357.3 416 344C416 330.7 405.3 320 392 320L248 320zM248 416C234.7 416 224 426.7 224 440C224 453.3 234.7 464 248 464L392 464C405.3 464 416 453.3 416 440C416 426.7 405.3 416 392 416L248 416z'/%3E%3C/svg%3E");
}

#icon-page2::after {
    position: absolute;
    top: 162px;
    left: 58px;

    content: "";
    width: 60px;
    height: 60px;
    display: inline-block;
    background-color: var(--cream);

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 128C296.8 128 277.4 144.5 273 166.4C269.5 183.7 252.6 194.9 235.3 191.4C218 187.9 206.8 171 210.3 153.7C220.7 102.6 265.8 64.1 320.1 64.1C382 64.1 432.1 114.2 432.1 176.1C432.1 216.8 411.8 254.8 377.9 277.4L370.8 282.1L573.7 408.9C595.1 422.3 608.1 445.7 608.1 471C608.1 511.4 575.3 544.2 534.9 544.2L105.7 544C65 544 32 511 32 470.3C32 445.7 44.3 422.7 64.8 409L342.3 224C358.4 213.3 368 195.3 368 176C368 149.5 346.5 128 320 128zM312.3 320.9L100.3 462.2C97.6 464 96 467 96 470.3C96 475.7 100.3 480 105.7 480L534.8 480C539.9 480 544 475.9 544 470.8C544 467.6 542.4 464.7 539.7 463L312.3 320.9z'/%3E%3C/svg%3E");
}

.tab-icon::after {
    transform: scale(.9);
    opacity: .85;

    cursor: pointer;
}

.tab-icon:hover::after {
    opacity: 1;
    transform: scale(1);
    transition: transform 0.25s;
}

/* width */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  opacity: 0;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
}

@media screen and (max-width: 600px) {
    body {
        transform: rotate(90deg) scale(.5);
        background: linear-gradient(to left, #050C1F, #222D48);
        overflow: hidden;
    }

    #preloader {
        transform: rotate(-90deg) scale(2);
        background: linear-gradient(to left, #050C1F, #222D48);
    }

    #shadow {
        transform: rotate(-90deg) scale(2);
    }
}