@media (max-width: 900px) {

    .as-wrapper {
        background-size: 50%;
    }
    .as-container {
        margin: 20% auto auto;
        width: 93%;
        height: 58.93vw;
    }
    
    #cardDisplay .as-container {
        margin: 10% auto auto;
    }

    #cardDisplay h1 {
        font-size: 7.5vw;
    }
    
    #cardDisplay {
        min-height: 130vw;
    }

    .content {
        min-height: 90vw;
    }

    .enter h1 {
            width: 100%;
        font-size: 7vw;
        margin-top: 10%;

    }

    input, button {
        height: 13vw;
        font-size: 5vw;
    }

    .instruction  {
        top: 73vw;
        width: 83vw;
        font-size: 4vw;
        line-height: 1.2;
    }

    #logos-footer {
        top: 155vw;
        width: 80vw;
        height: 15.46vw;
        background-color: #ffffff;
        border-radius: 2vw;
    }

    .checkbox {
        width: 85%;
        height: 24%;
        top: 62%;
        left: 0;
        right: 0;
        margin: auto;
        font-size: 7vw;
        border-radius: 10px;
    }

    .text {
        color: #000000;
        top: 91%;
        width: 53%;
        left: 0;
        right: 0;
        margin: auto;
        color: #33322F;
        opacity: 0.8;
    }

    .text p {
        text-align: center;
        font-size: 3vw;
    }

    .text p span {
        font-weight: 400;
    }

    footer {
        width: 80vw;
        font-size: 4vw;
    }


    #no-card .content {
        height: auto;
    }

    .present-box {
        width: 98vw;
        height: 85.5vw;
        margin: 20% auto;
    }

    #no-card h1 {
        font-size: 4.2vw;
    }

    #no-card p {
        font-size: 2.5vw;
    }
    
    #secretCode, #codeCopiedText {
        font-size: 7vw;
        opacity: 0.6;
    }

    #errorMessage h1 {
        font-size: 4vw;    
    }
    
    #errorMessage p {
        font-size: 2.3vw;    
    }
    
}