*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    min-height:100vh;

    background:
        radial-gradient(
            circle at center,
            rgba(180,140,70,0.12),
            transparent 55%
        ),
        linear-gradient(
            135deg,
            #241b14,
            #080706
        );

    font-family:Georgia, "Times New Roman", serif;

    overflow:hidden;
}



/* Hauptcontainer */

.content{

    height:100vh;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    padding-top:20px;

}



/* Überschrift */

h1{

    color:white;

    text-align:center;

    font-size:2.1rem;

    line-height:1.2;

    margin-bottom:20px;


    text-shadow:

        0 0 10px black,

        0 0 25px black;

}



h1 span{

    display:block;

    font-size:1.25rem;

    font-weight:normal;

    margin-top:8px;

}



h1 span small{

    display:block;

    font-size:1.1rem;

    font-weight:normal;

    margin-top:5px;

}



/* Bilderrahmen */

.frame{

    width:380px;

    padding:10px;


    background:#5d4322;


    border:8px solid #d2b36a;


    box-shadow:

        0 0 40px rgba(0,0,0,.9),
        0 0 80px rgba(255,180,70,.15);

    border-radius:5px;

}



/* Bild Hochformat */

.frame img{

    width:100%;

    height:55vh;


    object-fit:contain;


    display:block;

}



/* Kerze */

.candle{

    position:relative;

    margin-top:15px;


    width:60px;

    height:110px;


    transform:scale(.8);

}



/* Kerzenkörper */

.candle-body{

    position:absolute;


    bottom:0;

    left:0;


    width:60px;

    height:75px;


    background:

        linear-gradient(
            to right,
            #ddd,
            #fff,
            #ddd
        );


    border-radius:5px;


    box-shadow:

        0 0 20px rgba(255,220,120,.5);

}



/* Docht */

.wick{

    position:absolute;


    bottom:75px;


    left:29px;


    width:3px;

    height:12px;


    background:#222;

}



/* Flamme */

.flame{

    position:absolute;


    bottom:85px;


    left:15px;


    width:30px;

    height:45px;


    background:

        radial-gradient(
            ellipse at center bottom,
            #fff7b0 0%,
            #ffd23f 40%,
            #ff8c00 70%,
            transparent 75%
        );


    border-radius:50%;


    filter:

        drop-shadow(0 0 15px orange);


    animation:flicker .25s infinite alternate;

}



/* Flackern */

@keyframes flicker{


    from{

        transform:

        rotate(-3deg)

        scale(1);

    }


    to{

        transform:

        rotate(3deg)

        scale(1.1);

    }

}



/* Kleine Bildschirme */

@media(max-width:700px){


    body{

        overflow:auto;

    }


    .content{

        height:auto;

        padding-top:15px;

        padding-bottom:20px;

    }


    h1{

        font-size:1.6rem;

    }


    h1 span{

        font-size:1rem;

    }


    .frame{

        width:80vw;

    }


    .frame img{

        height:50vh;

    }

}