@font-face {
    font-family: soho;
    src: url(fonts/soho.woff2);
  }

.soho {
    font-family: "soho", serif;
    font-style: normal;
}

.sacramento-regular {
    font-family: "Sacramento", serif;
    font-style: normal;
}

.raleway {
    font-family: "Raleway", serif;
    font-optical-sizing: auto;
    font-weight: 200;
  }

html {
    margin:0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background-image: url(img/bck1.avif);
    background-repeat: no-repeat;
    background-size:cover;
    background-attachment: fixed;
    font-size: 14px;
    color:#fff;
}

.svg-white {
    --fill-opacity: 1;
    --stroke-width: 0;
    --stroke: #FFFFFF;
    --stroke-opacity: 1;
    --fill: #FFFFFF;
}

.heart {
    width: 75px;
}

.logo {
    width: 300px;
}

.svg {
    display: block;
    margin: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    fill: var(--corvid-fill-color, var(--fill));
    fill-opacity: var(--fill-opacity);
    stroke: var(--corvid-stroke-color, var(--stroke));
    stroke-opacity: var(--stroke-opacity);
    stroke-width: var(--stroke-width);
}

.svg-icon {
    width: 35px;
    height:35px;
    margin:0;
    padding:0;
}

.svg-icon-smaller {
    width: 30px;
    height:30px;
    margin:0;
    padding:0;
}

.bck2 {
    background-image: url(img/bck2.webp);
    background-repeat: no-repeat;
    background-size:cover;
}

.bck3 {
    background: rgb(27,4,19);
    background: linear-gradient(90deg, rgba(27,4,19,1) 0%, rgba(27,7,20,1) 53%, rgba(27,4,19,1) 100%);
}

.bck4 {
    background-image: url(img/bck3.avif);
    background-repeat: no-repeat;
    background-size:cover;
}

h1 {
    font-size:10em;
    font-weight: bold;
    color:#fff;
}

h1.title{
    padding-top:2rem;
}

.title-quote-1 {
    color:#fff;
    font-size: 3rem;
    font-weight: bold;
    padding-top:25%;
}

.title-quote-2 {
    color:#fff;
    font-size: 2rem;
    font-weight: bold;
}

h2 {
    font-size:2em;
    font-weight: bolder;
    left:0;
    right:0;
    padding-top:7px;
    padding-right:25px;
    font-weight: bold;
}

h3.title{
    color:#fff;
    font-size: 4rem;
    font-weight: bold;
    padding-bottom:25px;
}

h4{
    font-size: 2rem;
    font-weight: bold;
    padding-bottom:25px;
}

.violet{
    color: #742157;
}

.pink {
    color: #B293B2;
}

.white {
    color: #fff;
}

.card-img{
    width:auto;
    height:450px;
}

h1.wann-wo {
    font-size:5em;
}

#song-form input, #song-form textarea {
    background-color: rgba(74,21,57, 0.8);
    border:none;
    color:#fff;
    width:400px;
}

#input-songwunsch{
    height:250px;
}

#submit-songwunsch {
    width: 100%;
    font-size: 2rem;
    margin:0;
    padding:0;
    border-radius: 20px 20px;
}

.galery-pic {
    border:5px solid #fff;
    border-bottom:20px solid #fff;
}

.anregungen {
    font-size: 1.5rem;
    font-weight: bold;
    width: 500px;
    text-align: justify;
}