*{
    font-weight: 600;
    font-family: 'Nunito', sans-serif;
}

.inner-background{
    border: 2px solid #F1E1B5;
    background-color: #F5F3D2;
    height: max-content;
    width: auto;
    padding: 2em;
    border-radius: 2em;
}

.inner-background h4{
    width: 100%;
    text-align: center;
    margin-top: 0;
    color: white;
    font-size: clamp(1.8em, 4vw, 3em);
}

.inner-background p{
    text-align: center;
    color: white;
    font-size: clamp(1em, 2.5vw, 1.4em);
}

.outline {
    color: white;
    text-shadow: 
      -2px 0 #4A2C1D,
       2px 0 #4A2C1D,
       0 -2px #4A2C1D,
       0 2px #4A2C1D,
      -2px -2px #4A2C1D,
       2px -2px #4A2C1D,
      -2px 2px #4A2C1D,
       2px 2px #4A2C1D,
      -1px -2px #4A2C1D,
       1px -2px #4A2C1D,
      -1px 2px #4A2C1D,
       1px 2px #4A2C1D,
      -2px -1px #4A2C1D,
       2px -1px #4A2C1D,
      -2px 1px #4A2C1D,
       2px 1px #4A2C1D;
}

.marmeladka {
    position: relative;
    margin: 0 auto;
    width: 50%;
    max-width: 900px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 2em;
    padding: 4em 2em;
    padding-top: 4em;
}

.marmeladka > img {
    position: absolute;
    top: -15%;
    left: 50%;
    transform: translateX(-50%);
    height: clamp(6em, 20vw, 10em);
    width: clamp(6em, 20vw, 10em);
    z-index: 10;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

@media (max-width: 768px) {
    .marmeladka {
        width: 90%;
        padding: 3em 1.5em;
    }
}