#card-badge {
    position: absolute;
    width: 200px;
    margin-left: -190px;
    margin-top: -15px;
    border: 2px solid black;
    box-shadow: 6px 6px black;
}

@media only screen and (max-width: 750px) {
    #card-badge {
        width: 40vw;
        margin-left: -44vw;
        margin-top: -15px;
    }
}

@media only screen and (max-width: 310px) and (min-width: 285px) {
    html {
        background-image: none;
        width: fit-content;
    }

    body {
        margin: 10px;
    }

    footer {
        height: 0px;
        display: none;
    }

    .gallery {
        gap: 17px;
    }

    .gallery a p {
        font-size: large;
    }

    .header,
    header {
        display: none;
    }

    #card-badge {
        width: 110px;
        margin-left: -106px;
        margin-top: -10px;
    }
}

@media only screen and (max-height: 45vw) {
    html {
        background-image: none;
        width: fit-content;
    }

    body {
        margin: 1.2vw;
    }

    footer {
        height: 0px;
        display: none;
    }

    .header,
    header {
        display: none;
    }

    .gallery {
        display: flex;
        gap: 2vw;
    }

    .gallery a img {
        max-width: 40vw;
    }

    .gallery a p {
        font-size: 3vw;
        padding: 1vw;
    }

    #card-badge {
        width: 18vw;
        margin-left: -17.5vw;
        margin-top: -1vw;
    }
}