@font-face {
    font-family: "normal";
    src: url('./font');
}
@font-face {
    font-family: "italic";
    src: url('./fontit');
}
@font-face {
    font-family: "special";
    src: url('./specialfont') format('opentype');
}

html,body{
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
}
.card {
    /* height: 100%;
    width: 100%; */
    height: auto;
    width:  100%;
    border: 1px solid black;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    font-size: xx-large;
    color: black;
    background-size: cover;
    aspect-ratio: 4/6;
    cursor: pointer;
    transition: all 300ms;
    backdrop-filter: opacity(0.5);
    -webkit-backdrop-filter: opacity(0.5);
}
.gruen{
    background-color: #d5d0d0;
    background-image: radial-gradient(circle at center center, #0fa31981, #d5d0d0), repeating-radial-gradient(circle at center center, #0fa31981, #0fa31981, 10px, transparent 20px, transparent 10px);
    background-blend-mode: multiply;
}
.gelb{
    background-color: #d5d0d0;
    background-image: radial-gradient(circle at center center, #f0ea3188, #d5d0d0), repeating-radial-gradient(circle at center center, #f0ea3188, #f0ea3188, 10px, transparent 20px, transparent 10px);
    background-blend-mode: multiply;
}
.rot{
    background-color: #d5d0d0;
    background-image: radial-gradient(circle at center center, #c325257c, #d5d0d0), repeating-radial-gradient(circle at center center, #c325257c, #c325257c, 10px, transparent 20px, transparent 10px);
    background-blend-mode: multiply;
}
.blau{
    background-color: #d5d0d0;
    background-image: radial-gradient(circle at center center, #2051cd86, #d5d0d0), repeating-radial-gradient(circle at center center, #2051cd86, #2051cd86, 10px, transparent 20px, transparent 10px);
    background-blend-mode: multiply;
}
.null{
    background-color: #d5d0d0;
    background-image: radial-gradient(circle at center center, #889dd185, #d5d0d0), repeating-radial-gradient(circle at center center, #889dd185, #889dd185, 10px, transparent 20px, transparent 10px);
    background-blend-mode: multiply;
}
.lila {
    background-color: #d5d0d0;
    background-image: radial-gradient(circle at center center, #7120cd86, #d5d0d0), repeating-radial-gradient(circle at center center, #7120cd86, #7120cd86, 10px, transparent 20px, transparent 10px);
    background-blend-mode: multiply;
}
.all {
    opacity: 0.5;
    background: rgb(32,81,205);
    background: linear-gradient(140deg, rgba(32,81,205,1) 0%, rgba(15,163,26,1) 33%, rgba(240,234,49,1) 66%, rgba(195,37,37,1) 100%);
}
.inner{
    background: wheat;
    border-radius: 100px;
    min-width: 60%;
    max-width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    width: max-content;
}
.game {
    --card-distance: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: var(--card-distance);
    grid-row-gap: var(--card-distance);
    height: 40dvh;
    width: auto;
    max-width: 50dvw;
    aspect-ratio: 16/18;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 5dvh;
    left: 50%;
    transform: translate(-50%);
}

.heading {
    position: absolute;
    bottom: 45dvh;
    left: 50%;
    transform: translate(-50%);
}
.specialfont {
    font-family: "special";
    letter-spacing: 1px;
}

.stackcard {
    height: calc(calc(40dvh - calc(4 * 10px /* cardDistance */)) / 3); /* Gleiche Größe wie andere Karten */
    width: auto;
}