body{
    padding-top: 4rem;
}
.badge{
    position: fixed;
    bottom: 4rem;
    left: -4rem;
    width: 400px;
    padding: 1rem;
    background-color: #C3944D;
    font-weight: bold;
    text-transform: uppercase;
    color: #222222;
    text-align: center;
    transform: rotate(35deg)
}
.badge a{
    text-decoration: none;
    color: #222;
}

.cards{
    padding-top: calc(1rem + 1vh);
}
.cards__title{
    color: #FFF;
    text-transform: uppercase;
    max-width: 11ch;
    text-align: center;
    line-height: 1.1;
    font-weight: bold;
    font-size: 1.5em;
    margin: 0 auto;
    margin-bottom: 3rem;
}
.cards__title span{
    color: #C7974F;
}

.cards__main{
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 8vw, 10rem);;
    align-items: center;
}
.card{
    display: flex;
    justify-content: center;
    align-items: center;

    width: clamp(10rem, 20vw, 20rem);
    height: clamp(10rem, 20vw, 20rem);
    position: relative;
    background: #2F2F2F;
    background-image: url(../images/logo-special.svg);
    background-position: center;
    background-size: 100%;
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient(45deg,#C7974F,#F9D866) 10;
    border-radius: 0.5rem;
    transition: 0.3s all;
    box-shadow: 0 8px 6px -6px black;
    background: transparent;
}
.card__name{
    position: absolute;
    bottom: -2.5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 1rem;
    background-color: #2F2F2F;
    text-align: center;
    border-radius: 0.5rem;
    font-weight: bold;
    color: #FFF;
    border: 2px solid #F9D866;
    white-space: nowrap;
}

.card:first-of-type{
    transform: rotate(3deg);
}
.card:last-of-type{
    transform: rotate(-3deg);
}
.card:hover{
    cursor: pointer;
    transition: 0.3s all;
    transform: scale(1.1);
    box-shadow: 0 18px 6px -6px black;
}
.cards__text{
    font-size: 2rem;
    color: #FFF;
    font-weight: bold;
    position: relative;
}
.cards__text::after{
    content: "VS";
    font-family: "Inter", sans-serif;
    font-weight: bold;
    position: absolute;
    top: -4rem; 
    left: -6rem; 
    right: 0;
    opacity: 0.6;
    color: #201B1B;
    font-size: 10rem;
    z-index: -1;
}
.card img{
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}
.next-btn{
    display: block;
    padding: 1rem 4rem;
    margin: 0 auto;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    background: transparent;
    border: 2px solid #F9D866;
    color: #FFF;
    margin-top: 3.5rem;
    cursor: pointer;
    transition: all 0.4s;
}
.next-btn:hover, .next-btn:focus{
    transform: scale(0.95)
}
.next-btn.active{
    transition: all 0.4s;
    background-image: linear-gradient(to right, #C7974F, #F9D866);
}
.selected{
    box-shadow: 0px 0px 105px 15px rgba(255,237,80,0.9), 0 18px 6px -6px black;
    transform: scale(1.1);
}
.selected::after{
    content: "";
    position: absolute;
    top: -2rem;
    right: -1rem;
    width: 5rem;
    height: 5rem;
    background: url(../icons/crown.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(15deg);
}
.error-msg{
    width: 100%;
    display: block;
    text-align: center;
    color: #FFF;
    margin-top: 1rem;
}
.error-msg:empty{
    display: none;
}
.user{
    width: max-content;
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 0.5rem 2rem;
    background-color: hsla(220, 8%, 23%, 50%);
    border-radius: 0.5rem;
    margin-top: 2rem;
}
.user__avatar{
    position: relative;
}
.user__avatar img{
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    object-fit: cover;
}
.user__data{
    display: flex;
    flex-direction: column;
    margin-left: 1rem;
}
.user__name{
    color: #FFF;
    font-weight: bold;
    font-size: 1.1rem;
}
.user__discr{
    margin-top: 0.5rem;
    color: #64666A;
}
.loading-card, .loading-card-dc{
    background: transparent;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 2rem;
    height: 2rem;
    border: 3px solid #64666A;
    border-top: 3px solid rgb(253, 223, 50);
    border-radius: 50%;
    animation: loading 1s infinite;
}
@keyframes loading{
    0%{
        transform: translate(-50%, -50%) rotate(0)
    }
    100%{
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

@media (max-width: 1200px) {
    .card__name{
        bottom: -3rem;
    }
}

@media (max-width: 900px) {
    .card__name{
        width: 90%;
    }
    .cards__main{
        gap: 0.5rem;
    }
}

@media (max-width: 400px) {
    .cards__main{
        flex-direction: column;
        gap: 3rem;
        margin-top: 3rem;
    }
    .cards{
        padding-bottom: 2rem;
        padding-top: 2rem;
    }
}

@media (max-width: 600px) {
    .badge{
        display: none;
    }
}
@media (max-height: 750px) {
    .cards__title{
        margin-bottom: 1rem;
    }
}