@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@500&display=swap");
 
main {
    margin: 30px auto;
    width: 90%;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-template-rows: auto;
    gap: 50px;
    font-family: "cairo", serif;
    text-align: right;
}
 
main div {
    width: 100%;
    max-width: 400px;
}
.heart {
    border: 2px solid #ff0000; /* Linienstärke/-typ/-farbe */
    background: #fff;
    position: relative;
    padding: 10px 30px;
}
.heart:before {
    content: "\2764"; 
    color: #fff; /* Herzfarbe oben links */
    font-size: 40px; /* Größe der Herz oben links */
    font-weight: bold;
    position: absolute;
    top: -28px;
    left: -20px;
    transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    text-shadow: 0 0 8px #ff0000, 0 0 6px #ff0000, 0 0 4px #ff0000, 0 0 2px #ff0000, 0 0 0.5px #ff0000; /* Farbe des Herzrandes oben links */
}
.heart:after {
    content: "\2764"; 
    color: #fff; /* Farbe der Herz unten rechts */
    font-size: 30px; /* Größe der unteren rechten Herz */
    font-weight: bold;
    position: absolute;
    bottom: -20px;
    right: -11px;
    transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    text-shadow: 0 0 8px #ff0000, 0 0 6px #ff0000, 0 0 4px #ff0000, 0 0 2px #ff0000, 0 0 0.5px #ff0000; /* Farbe des Randes der unteren rechten Herz */
}
 
.blur {
    background-color: #cfff8d;
    box-shadow: 0px 0px 8px 8px #cfff8d;
    padding: 10px;
}