html {
    min-height: 100%;
}


/* xs */
@media (max-width: 576px) {
    img.logo {
        width: 173px;
        height: auto;
    }

    .title {
        font-size: 22px;
    }

    .sizeText {
        font-size: 11px;
    }

    span.size {
        font-size: 17px;
    }

    span.details {
        font-size: 13px;
    }

    span.sizeText {
        font-size: 13px;
        text-decoration: underline;
        color: #fff;
    }

    p.sizeText {
        font-size: 13px;
    }

    .agree {
        font-size: 13px;
        margin-top: 4px;
        color: #fff;
    }

    .text {
        font-size: 13px;
        margin-top: 4px;
        text-decoration: underline;
        color: #fff;
    }

    .sizeText {
        font-size: 13px;
    }
}

/* sm */
@media (min-width: 576px) {
    img.logo {
        width: 185px;
        height: auto;
    }

    .title {
        font-size: 22px;
    }

    .sizeText {
        font-size: 13px;
    }

    span.size {
        font-size: 20px;
    }

    span.details {
        font-size: 13px;
    }

    span.sizeText {
        font-size: 13px;
        text-decoration: underline;
        color: #fff;
    }

    p.sizeText {
        font-size: 13px;
    }

    p.sizeText {
        font-size: 13px;
    }

    .agree {
        font-size: 13px;
        margin-top: 4px;
        color: #fff;
    }

    .text {
        font-size: 13px;
        margin-top: 4px;
        text-decoration: underline;
        color: #fff;
    }
}

/* md iPhone 7 and up biggest screen*/
@media (min-width: 768px) {
    img.logo {
        width: 200px;
        height: auto;
    }

    .title {
        font-size: 25px;
    }

    .sizeText {
        font-size: 14px;
    }

    span.size {
        font-size: 34px;
    }

    span.details {
        font-size: 13px;
    }

    span.sizeText {
        font-size: 13px;
        text-decoration: underline;
        color: #fff;
    }

    p.sizeText {
        font-size: 14px;
    }

    .agree {
        font-size: 13px;
        margin-top: 4px;
        color: #fff;
    }

    .text {
        font-size: 13px;
        margin-top: 4px;
        text-decoration: underline;
        color: #fff;
    }
}

/* lg */
@media (min-width: 992px) {
    img.logo {
        width: 210px;
        height: auto;
    }

    .title {
        font-size: 25px;
    }

    .sizeText {
        font-size: 15px;
    }

    span.size {
        font-size: 25px;
    }

    span.details {
        font-size: 13px;
    }

    span.sizeText {
        font-size: 13px;
        text-decoration: underline;
        color: #fff;
    }

    p.sizeText {
        font-size: 14px;
    }

    .agree {
        font-size: 13px;
        margin-top: 4px;
        color: #fff;
    }

    .text {
        font-size: 13px;
        margin-top: 4px;
        text-decoration: underline;
        color: #fff;
    }
}

/* xlg */
@media (min-width: 1200px) {
    img.logo {
        width: 220px;
        height: auto;
    }

    .title {
        font-size: 28px;
    }

    .sizeText {
        font-size: 16px;
    }

    span .size {
        font-size: 30px;
    }

    span.details {
        font-size: 13px;
    }

    span.sizeText {
        font-size: 13px;
        text-decoration: underline;
        color: #fff;
    }

    p.sizeText {
        font-size: 14px;
    }

    .agree {
        font-size: 13px;
        margin-top: 4px;
        color: #fff;
    }

    .text {
        font-size: 13px;
        margin-top: 4px;
        text-decoration: underline;
        color: #fff;
    }
}

.card-block {
    background: #000;
    border-radius: 20px;
}


.container {
    top: 50%;
}

body {
    background: linear-gradient(to top, #F84352, #EA4524);
}

.static-container {
    position: absolute;
    top: 2rem;
    left:2rem;
    right:2rem;
    bottom:2rem;
}
.mt-10 {
    margin-top:3rem;
}