:root {
    --black: #000;
    --narrator: rgb(218, 18, 191);
    --vamp: rgb(143, 2, 199);
    --yami: red;

    --narrator-font: 
    "Nimbus Mono L", 
    "Nimbus Mono", 
    "Courier New", 
    monospace;

    --vamp-font: 
    "URW Chancery L", 
    "Apple Chancery", 
    "Monotype Corsiva", 
    "Brush Script MT",
    cursive;
    
    --yami-font: 
    "Times New Roman", 
    Times, 
    serif;
}


/* Base */
html,
body {
    width: 100%;
    min-width: 1000px;
    min-height: 100%;
    margin: 0;
    padding: 0;
    background: var(--black);
}


body {
    color: var(--narrator);
    overflow-x: hidden;
}


* {
    box-sizing: border-box;
}


/*  Border */
.page-border {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    z-index: 1;

    pointer-events: none;
}


.page-border img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: fill;
}


/* Main content */

.site-content {
    position: relative;

    z-index: 5;

    width: 720px;
    min-height: 100vh;

    margin: 0 auto;

    padding-top: 55px;
    padding-bottom: 45px;

    text-align: center;
}


.intro-text {
    width: 73%;

    color: var(--narrator);

    font-family: var(--narrator-font);
    font-size: 20px;
    line-height: 1.45;
}


.intro-text p {
    margin: 0 0 20px;
}


.story-text {
    width: 100%;

    color: var(--narrator);

    font-family: var(--narrator-font);
    font-size: 20px;
    line-height: 1.45;
}


.story-text p {
    margin: 0 0 20px;
}


.lily-intro {
    width: 85%;
    margin-left: auto;
    margin-right: auto;

    color: var(--narrator);

    font-family: var(--narrator-font);
    font-size: 20px;
    line-height: 1.45;
}


.lily-intro p {
    margin: 0 0 20px;
}


.bad-luck {
    width: 85%;
    margin-left: auto;
    margin-right: auto;

    color: var(--narrator);

    font-family: var(--narrator-font);
    font-size: 20px;
    line-height: 1.45;
}


.bad-luck p {
    margin: 0 0 20px;
}


.cat-encounter {
    width: 85%;
    margin-left: auto;
    margin-right: auto;

    color: var(--narrator);

    font-family: var(--narrator-font);
    font-size: 20px;
    line-height: 1.45;
}


.cat-encounter p {
    margin: 0 0 20px;
}


.decision-text {
    width: 100%;

    color: var(--narrator);

    font-family: var(--narrator-font);
    font-size: 22px;
    line-height: 1.45;
}


.decision-text p {
    margin: 0 0 20px;
}


.vamp-text {
    width: 100%;

    color: var(--vamp);

    font-family: var(--vamp-font);
    font-size: 25px;
    line-height: 1.3;
}


.vamp-text p {
    margin: 0 0 20px;
}


.yami-text {
    width: 100%;

    color: var(--yami);

    font-family: var(--yami-font);
    font-size: 22px;
    line-height: 1.35;
}


.yami-text p {
    margin: 0 0 20px;
}


/* Entrance */
.entrance-content {
    width: 700px;

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

    padding-top: 70px;
}


.castle-gif {
    display: block;

    width: 390px;
    max-height: 300px;

    margin: 5px auto 20px;

    object-fit: contain;
}


.enter-link {
    display: block;

    margin: 0 auto;
}


.enter-link img {
    display: block;

    width: 190px;
    height: auto;
}


/* Castle / choice page */

.castle-content {
    width: 690px;

    padding-top: 70px;
}


.castle-page {
    position: relative;
    min-height: 100vh;
}

.corner-image {
    pointer-events: none;
}

.skeleton {
    position: absolute;
    top: 20px;
    left: 0px;
    max-width: 200px;
    max-height: 350px;
}

.bones {
    position: absolute;
    right: 25px;
    bottom: 20px;
    max-width: 250px;
    max-height: 500px;
}


.cat-image {
    display: block;

    width: auto;
    max-width: 150px;
    max-height: 300px;

    margin: 0 auto;


    filter:
        drop-shadow(0 0 4px rgb(143, 2, 199))
        drop-shadow(0 0 8px rgb(143, 2, 199));
}


.vamp-portrait {
    display: block;

    width: 250px;
    height: auto;
    max-height: 500px;

    margin: 0.5rem auto;

    object-fit: contain;
}

.choices {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    margin-top: 12px;

    gap: 14px;
}


.choices a {
    color: var(--narrator);

    font-family: var(--narrator-font);
    font-size: 22px;

    text-decoration: underline;

    text-underline-offset: 3px;
}


.choices a:visited {
    color: var(--narrator);
}


.choices a:hover {
    color: #d083a5;
}


/* Lily */

.lily-content {
    width: 680px;

    padding-top: 70px;
}


.lily-introduction {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 30px;

    margin-bottom: 15px;
}

.lily-image {
    width: 250px;
    height: auto;
}


.butterfly-gif {
    display: block;

    width: 280px;
    height: auto;

    margin: 10px auto 20px;
}



.back-link {
    color: var(--narrator);

    font-family: var(--narrator-font);
    font-size: 15px;

    text-decoration: underline;

    text-underline-offset: 3px;
}


.back-link:visited {
    color: var(--narrator);
}


.back-link:hover {
    color: #d083a5;
}


/* Question --> death  */

.question-content {
    width: 680px;

    padding-top: 70px;
}


.scene-image {
    display: block;

    width: 300px;
    height: auto;

    margin: 5px auto 20px;
}


.death-screen {
    display: block;

    width: 270px;
    height: auto;

    margin: 5px auto 15px;
}


.return-image {
    display: inline-block;
}


.return-image img {
    display: block;

    width: 100px;
    height: auto;
}


/* Yami */
.yami-content {
    width: 610px;

    margin-left: 220px;
    margin-right: auto;

    padding-top: 100px;
}


.yami-border img {
    object-position: right center;
}


.spider-image {
    display: block;

    width: 230px;
    height: auto;

    margin: 15px auto 20px;
}