<style>

    @font-face {
        font-family: 'MaruBuri';
        src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2) format('woff2');
        font-weight: 600;
        font-display: swap;
    }

    @font-face {
        font-family: 'MaruBuri';
        src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff2) format('woff2');
        font-weight: 700;
        font-display: swap;
    }

    html { word-break: keep-all; }
    body { margin: 0; padding: 0; }

    h1, h2, p { margin: 0; padding: 0; font-family: 'MaruBuri'; }

    h1 { 
        font-size: 5rem; 
        font-weight: 700; 
        margin-bottom: 20px; 
        line-height: var(--h1-line-height); 
    }
    
    h2 { 
        font-size: 4rem; 
        font-weight: 700; 
        margin-bottom: var(--heading-spacing); 
        line-height: var(--h2-line-height); 
    }
    
    p { 
        font-size: 2rem; 
        font-weight: 600; 
        line-height: var(--p-line-height); 
    }
    
    section {
        position: relative;
        width: 100%;
        min-height: 80vh; 
        display: flex;
        align-items: center; 
        padding: 100px 0;
    }

    :root {
        --h1-line-height: 1.7; 
        --h2-line-height: 1.7; 
        --p-line-height: 1.8; 
        
        --heading-spacing: 40px; 
    }

    .contents {
        width: 1000px;
        margin: auto;
        padding: 0px;
        position: relative; 
        z-index: 2; 
    }

    .text-box {
        position: relative;
        z-index: 2;
        width: 70%; 
    }

    .align-right {
        margin-left: auto; 
    }
    
    .fg-img {
        position: absolute;
        z-index: 3;
        height: auto; 
    }

    .fg-splatter {
        top: -100px;
        left: 50%;
        transform: translateX(-50%);
        width: 1200px; 
    }

    .fg-skeleton {
        left: -160px;
        top: 460px; 
        width: 450px;
    }

    .fg-circle-overlap {
        right: -250px; 
        bottom: -550px; 
        width: 600px;
        border-radius: 50%;
        z-index: 4; 
    }

    .fg-flask {
        left: -280px;
        top: 55%;
        transform: translateY(-50%);
        width: 500px;
    }
    
    .bg-black { background-color: black; color: white; }
    .bg-black h1 { color: #42aa8b; }
    .bg-beige { background-color: #fcf3e3; color: black; }
    .bg-green { background-color: #42aa8b; color: black; min-height: 20vh; }
    
    .bg-image {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        color: #ffffff;
        min-height: 120vh; 
    }

    footer {
        position: relative;
        z-index: 20;
        padding: 130px 0px 50px 0px; 
        background-color: dimgray;
    }

</style>