/* |---------=| ↓ |=--------=| Donate |=--------=| ↓ |=---------| */

.checkbox-don ~ .dialog {
    z-index: 2;
}

.don {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

a.don {
    color: var(--color-sec-transparent);
    text-decoration: underline;
}

a.don:hover {
    color: var(--color-sec);
}

.ico-don {
    width: calc( .8 * var(--header-position));
    height: calc( .8 * var(--header-position));
    opacity: .7;
}

.don:hover .ico-don {
    opacity: 1;
}

.button-don {
    padding: calc( .3 * var(--font-size)) calc( 1 * var(--font-size));
}

.button-open-don {
    z-index: 1;
    cursor: pointer;
}

.don div.don {
    line-height: .8em;
    letter-spacing: .1em;
    padding-bottom: .1em;
    border-bottom: calc( .1 * var(--font-size)) var(--color-sec-transparent) solid;
    border-top: calc( .1 * var(--font-size)) var(--color-sec-transparent) solid;
    border-right: calc( .1 * var(--font-size)) var(--color-sec-transparent) solid;
    font-size: calc( 1.5 * var(--font-size));
    margin-left: calc( .5 * var(--font-size));
}

.don p {
    margin-left: calc( .5 * var(--font-size));
    line-height: 1.5;
}

.don .img-don {
    width:  calc( 2.8 * var(--font-size));
    height: calc( 2.8 * var(--font-size));
    opacity: .7;
}

.align-h-don *.don {
    font-size: calc( 1.5 * var(--font-size));
    
}

.align-h-don *.don  div.don {
    font-size: calc( 2 * var(--font-size));
    margin-left: calc( .5 * var(--font-size));
}

.align-h-don *.img-don {
    width: calc( 4 * var(--font-size));
    height: calc( 4 * var(--font-size));
}

[class^="button-"]:hover div.don {
    border-color: var(--color-sec) ;
}

[class^="button-"]:hover .img-don {
    opacity: 1;
}

[class^="qr-code-"] {
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: contain;
}

.qr-code-pop {
    height: calc( 5 * var(--font-size));
    width: calc( 5 * var(--font-size));
    position: relative;
}

.qr-code-page {
    height: calc( 15 * var(--space-w));
    position: relative;
}

.qr-code-frame {
    position: absolute;
    height: 100%;
    width: auto;
    object-fit: contain;
}

.qr-code-pop .qr-code-img {
    height: 80%;
    z-index: 0;
}

.qr-code-page .qr-code-img {
    height: 25%;
    z-index: 0;
}

.qr-code-img-page {
    position: absolute;
    top: 2vh;
    height: 50%;
    filter:  blur(3px);
    -webkit-filter: blur(3px)
}

.align-h-don {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.don-align-h {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.align-h-don .align-v {
    z-index: 1;
}

.align-h-don .align-v p {
    width: max-content;
}

.align-h-don .align-v:first-of-type {
    width: calc( 6 * var(--font-size));
}

.align-h-don .align-v:last-of-type {
    z-index: 0;
}

@media screen and (width <= 430px) {
    .align-h-don, .don-align-h {
        flex-direction: column;
    }
}

/* |---------=| ↑ |=--------=| Donate |=--------=| ↑ |=---------| */