section{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--logoblue);
    padding: 4em 0;
}

section h2{
    font-size: 2.2em;
    padding: 0em 0 2em 0;
    color: #ffffff;
    text-shadow: 1px 1px 3px #000000;
}

#codes{
    display: flex;
    align-items: center;
    padding-bottom: 3em;
}

#codes h3{
    font-size: 1.7em;
    max-width: 25vw;
    text-align: center;
    padding-inline: 3vw;
    color: #ffffff;
    font-weight: 200;
}

#codes img{
    max-width: 300px;
}

.qrCode{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

.qrCode h3{
    display: flex;
    align-items: center;
    gap: .2em;
}

#codes .qrCode h3{
    font-size: 3em;
    letter-spacing: 2px;
    text-shadow: 1px 1px 3px #000000;
}

@media (max-width: 1080px){
    section{
        padding: 4em 2em;
    }

    section h2{
        width: 100%;
        text-align: center;
    }

    #codes{
        flex-direction: column;
    }
    #codes .qrCode h3{
        justify-content: center;
    }
    #codes > h3{
        max-width: 100%;
        font-weight: 200;
        padding: 2em 3vw;
    }
}