html {
    height: 90%;
    width: 90%;
}

body {
    width: 100%;
    min-height: 100vh;
    display: flex;
    font-family: sans-serif;
    background-color: #ffc0cb;
    overflow: hidden;
    justify-content: center;
}

.initial-letter, .word span {
        transition: all 0.3s ease;
        font-weight: bold;
        color: #000;
        text-shadow: 
            -.2px -.2px 0 #ffff,
            -.4px -.4px 0 #ffff,
            -.6px -.6px 0 #ffff,
            -.8px -.8px 0 #ffff,
            -1px -1px 0 #ffff,
            -1.2px -1.2px 0 #ffff,
            -1.4px -1.4px 0 #ffff,
            -1.6px -1.6px 0 #ffff,
            -1.8px -1.8px 0 #ffff,
            -2px -2px 0 #ffff,
            -2.2px -2.2px 0 #ffff,
            -2.4px -2.4px 0 #ffff,
            -2.6px -2.6px 0 #ffff,
            -2.8px -2.8px 0 #ffff,
            -3px -3px 0 #ffff,
            -3.2px -3.2px 0 #ffff,
            -3.4px -3.4px 0 #ffff,
            -3.6px -3.6px 0 #ffff,
            -3.8px -3.8px 0 #ffff,
            -4px -4px 0 #ffff
    }

.initial-letter {
    font-style: italic;
    font-size: 100px;
}

.letter-group:hover .initial-letter {
    transform: skewX(10deg);
}

.word {
    transition: opacity 0.3s ease;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.letter-group {
    position: relative;
    cursor: pointer;
    text-decoration: none;
}



@media (min-width:899px) {
    .word-container {
        display: flex;
        gap: 10px;
        position: absolute;
        top: 10px;
    }

    .short span,
    .long span {
        font-size: 50px;
    }

    .slim-initial {
        margin: 0 0 0 -7px;
    }

    .wide-initial {
        margin: 0 0 0 7px;
    }
    
    .descender {
        letter-spacing: 5px;
    }
    
    .before-ascender {
        letter-spacing: 0px;
    }

    .short {
        text-orientation: upright;
        writing-mode: vertical-rl;
        top: calc(100% - 15px);
        letter-spacing: -10px;
    }

    .long {
        top: 60px;
        left: 100%;
        width: 300px;
    }

    .letter-group:hover .word {
        opacity: 1;
    }
}

@media (max-width:899px) {
    body {
        align-items: center;
    }
    .initial-letter {
        display: inline-block;
        font-size: 50px;
    }

    .long {
        width: 200px;
        top: 30px;
    }

    .short {
        top: 23px;
        margin: 0 0 0 4px;
    }
    
    .word {
        display: inline-block;
    }
    
    .letter-group {
        display: block;
    }
    
    .letter-group:hover .word {
        opacity: 1;
    }

    .short span,
    .long span {
        font-size: 25px;
    }

    .word span {
        text-shadow: 
            -.2px -.2px 0 #ffff,
            -.4px -.4px 0 #ffff,
            -.6px -.6px 0 #ffff,
            -.8px -.8px 0 #ffff,
            -1px -1px 0 #ffff,
            -1.2px -1.2px 0 #ffff,
            -1.4px -1.4px 0 #ffff,
            -1.6px -1.6px 0 #ffff,
            -1.8px -1.8px 0 #ffff,
            -2px -2px 0 #ffff
    }
}