:root {
    --blue: #214C80;
    --yellow: #C89235;
    --size: 450px;
}

#container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    font-size: 10px;
}

#kaartje {
    height: var(--size);
    width: var(--size);
    position: relative;
}

#achtergrond {
    position: absolute;
    top: 0;
    width: var(--size);
    height: var(--size);
    z-index: 0;
}

#voorgrond {
    position: absolute;
    top: 0;
    width: var(--size);
    height: var(--size);
    z-index: 2;
}

#kaartje .abel {
    width: var(--size);
    text-align: center;
    position: absolute;
    top: 21%;
    left: 0;
    color: white;
    font-size: 700%;
    font-family: 'Eina01 SemiBold', sans-serif;
    z-index: 1;
}

#tekst {
    width: var(--size);
    height: var(--size);
}

#tekst div {
    width: 100%;
    text-align: center;
}

.name {
    padding-top: 16%;
    font-family: "Lora SemiBoldItalic", serif;
    color: var(--yellow);
    font-size: 530%;
    background-image: url(/img/hartjes.png);
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: top right;
    background-position-x: 300px;
}

.last-name {
    font-family: "Lora SemiBoldItalic", serif;
    color: var(--blue);
    font-size: 230%;
}

.muisjes {
    padding-top: 4%;
    font-family: "Eina01 Bold", sans-serif;
    color: var(--yellow);
    font-size: 160%;
}

.muisjes a {
    color: var(--blue);
    text-decoration: none;
}

.muisjes a:hover {
    color: var(--blue);
    text-decoration: underline;
}

.date {
    padding-top: 4%;
}
.date, .details {
    font-family: "Eina01 Bold", sans-serif;
    color: var(--yellow);
    font-size: 180%;
}

.signature {
    font-family: "Eina01 Bold", sans-serif;
    color: var(--blue);
    font-size: 160%;
    padding-top: 16%;
}