@import "base.css";

.giveaway-content {
    color: #fff;
}

section.win-gift {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 60px 0;
    background: #6713c9;
}

.theme-color {
    color: #6713c9;
}

.win-title {
    font-size: var(--font-size-title);
}

.win-prize {
    color: #f9d602;
    font-size: 10rem;
    animation: 1.1s ease-in-out 0s infinite normal none running breathe;
}

.step-content {
    background: url('../images/watermask.png') repeat;
    background-size: auto 222px;
}

.step-wrapper {
    display: flex;
    justify-content: center;
    align-items: stretch;
    max-width: 75rem;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 0;
}

.step-wrapper>* {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-wrapper>.step-one {
    flex: 4 1 0;
}

.step-wrapper>.step-arrow {
    flex: 2 1 0;
    padding-top: 13px;
}

.step-wrapper>.step-two {
    flex: 4 1 0;
    justify-content: space-between;
}

.step-wrapper .step-one {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.step-arrow {
    color: #6713c9;
    font-size: var(--font-size-title);
}

.step-title {
    text-align: center;
    font-size: var(--font-size-title);
}

.step-title>span {
    display: inline-block;
    background: #6713c9;
    padding: 0.75rem 4.6875rem;
}

.step-wrapper>.step-one .step-operation {
    margin: 12.5rem auto;
}

.step-operation a {
    background: #ee3c70;
    border-radius: 1.125rem;
    font-size: var(--font-size-desc);
    padding: 1.8rem 5rem;
}

.step-desc {
    color: #000;
    text-align: center;
}

@keyframes breathe {
    0% {
        transform: scale(0.92);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.92);
    }
}

@media (max-width: 768px) {

    section.win-gift {
        padding: 3rem .5rem;
    }

    .step-wrapper {
        max-width: 100%;
        flex-direction: column;
        padding: .5rem;
    }

    .step-wrapper .step-one {
        gap: 40px;
    }

    .step-wrapper>.step-one .step-operation {
        margin: 1rem auto;
    }
    .step-wrapper .step-one {
        border-bottom: 1px solid #ccc;
        padding-bottom: 1rem;
    }

    .step-wrapper>.step-arrow {
        display: none;
    }

    .step-wrapper>.step-one,
    .step-wrapper>.step-two {
        margin-top: 1rem;
    }
}