body{
    background: black;
    margin: 0;
    padding: 0;
}

@media screen and (max-width:772px) {
    body{
        background: blue;
    }

    #hülle{
        grid-area:3/2/8/7 ;
    }
    #glow{
        grid-area: 3/3/6/6;
        visibility: hidden;
    }
    #Knopf{
        grid-area: 2 / 3 / 3 / 6;
        z-index: 2;
        padding: 0;
        margin: 0;
        border: none;
    }
    #hülle{
        visibility: hidden;
        grid-area: 3/2/8/7;
        margin-top: 12.5%;
    }
    #hülle img{
        border-radius: 0px;
        width: 75%;
        height: 75%;
        margin: 12.5%;
    }
    #gatecrash{
        grid-area: 2/6/3/8;
        background: transparent;
        border: none;
    }
    #ravnica{
        grid-area: 2/1/3/3;
        background: transparent;
        border: none;
    }
}

@media screen and (min-width:773px) {
    body{
        background-image: url(bilder/rakdoscrypt.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    #glow{
        grid-area: 3/4/6/5;
        visibility: hidden;
    }
    #Knopf{
        grid-area: 2 / 4 / 3 / 5;
        z-index: 2;
        padding: 0;
        margin: 0;
        border: none;
    }
    #hülle{
        visibility: hidden;
        grid-area: 4 / 4 / 7 / 5;
    }
    #hülle img{
        border-radius: 0px;
        width: 100%;
        height: 100%;
        
    }   
    #ravnica{
        grid-area: 2/1/3/3;
        background: transparent;
        border: none;
        height: 100%;
        margin: auto;
    }
    #gatecrash{
        grid-area:2/6/3/8;
        background: transparent;
        border: none;
        width: auto;
        height: 100%;
        font-size: xx-large;
        margin: auto;
    }
}

#ravnica img{
    border-radius: 0;
}

#gatecrash img{
    border-radius: 0;
}

img{
    width: 90%;
    padding: 0;
    margin: 0;
    z-index: 1;
    border-radius: 15px;
}

#glüh{
    width: 100%;
    height: 100%;
}

#leer{
    width: 95%;
}

.container{
    display: grid;
    grid-template-columns:repeat(7, 14vw);
    grid-template-rows:1vh 8.5vh repeat(6, 15vh);
    border: none;
}

#Knopf img{
    border-radius: 0;
    width: 100%;
}

.cards{
    grid-area: 4 / 5 / 7 / 4;
    align-content: center;
    text-align: center;
}
