html, body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #f1ffe6;
    font-weight: 300;
    min-height: 100%;
    overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 100;
    margin-top: 3rem;
}

h2 {
    font-size: 3rem;
}

h3 {
    font-size: 1.5rem;
}

.title {
    font-weight: 100;
    font-size: 4.5rem;
    line-height: 1;
    margin-top: 0;

}

.review__stars {
    margin-top: -1rem;
    display: block;
    color:#b79400;
}

.review-title {
    margin-bottom: -1rem;
    margin-top: 4rem;
}
.review-title a{
    font-weight: 300;
}

.violin {
    background-size: cover;
    background-position: left;
    background-attachment: fixed;
    background-image: url('./leaves-1.png');
    background-color: rgb(10, 78, 66);
    aspect-ratio: 1/2;
    width: min(150px, 50%);
    margin: 0 auto;
    transform-origin: center;
    transform: translateY(-12rem) scale(2.5);
    -webkit-mask-image: url(hegedu-silhouette.svg);
    mask-image: url(hegedu-silhouette.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    animation: violin-move 500s infinite linear;
}

@keyframes violin-move {
    50% {background-position: right;}
}


@media screen and (min-width: 1023px) {
    .violin {
        transform: translateY(3rem) rotate(20deg);
        position: absolute;
        right:-130px;
        width: initial;
        height: 800px;
    }
    .wrapper-in {
        transform: translateX(
            min(0px, (calc(-0.2 * calc(100vw - 520px))))
        );
    }
}
@media screen and (min-width: 1220px) {
    .violin {
        height: 1000px;
        right: -100px;
    }
}

p {
    line-height: 1.6;
}

a {
    color: black;
}

a, strong {
    font-weight: 600;
    text-decoration: none;
}

.wrapper {
    max-width: min(60ch, calc(100% - 3rem));
    margin: 0 auto;
    padding: 4rem 0;
}

video {
    width: 100%;
    max-width: 100%;
    height: auto;
}