.adv {
    display: flex;
    max-width: 25vw;
    flex-direction: column;
    padding: 1.7vw 2vw;
    position: fixed;
    bottom: 1vw;
    right: 1vw;
    background: var(--color-back);
    z-index: 98000;
    border-radius: 1vw;
    transition: .3s all ease;
    transform: translateX(120%);
}

.adv:after {
    content: '';
    display: flex;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border: 1px solid var(--color-black);
    border-radius: 1vw;
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: -1;
}

.adv__title {
    color: var(--color-black);
    font-family: var(--font-family-bold);
    font-size: 1.4vw;
    margin-block: 0 .4vw;
}

.adv__text {
    color: var(--color-black);
    font-family: var(--font-family-light);
    font-size: 1.2vw;
}

.adv__btns {
    display: flex;
    align-items: center;
    margin-block: 1vw 0;
}

.adv__btn {
    font-family: var(--font-family-bold);
    font-size: 1.1vw;
    padding: .3vw 1vw;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 1vw;
    border: 1px solid var(--color-black);
    margin-inline: 0 1.5vw;
    cursor: pointer;
    transition: .3s all ease;
}

.adv__btn:hover {
    transform: scale(1.05);
}

.adv__close {
    color: var(--color-black);
    font-family: var(--font-family-light);
    font-size: 1.1vw;
    text-decoration: underline;
    cursor: pointer;
    transition: .3s all ease;
}

.adv__close:hover {
    transform: scale(1.05);
}

.adv__container {
    display: flex;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    transition: .3s all ease;
    transform: scale(0);
}

.adv__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30vw;
    height: max-content;
    background: var(--color-back);
    position: relative;
    border-top-right-radius: 4vw;
    border-top-left-radius: .8vw;
    border-bottom-right-radius: .8vw;
    z-index: 100;
}

.adv__content:after {
    content: '';
    display: flex;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border: 2px solid var(--color-black);
    position: absolute;
    top: 3px;
    left: 3px;
    border-top-right-radius: 4vw;
    border-top-left-radius: .8vw;
    border-bottom-right-radius: .8vw;
    z-index: -1;
}

.adv__content-title {
    font-family: var(--font-family-bold);
    font-size: 1.5vw;
    margin-block: 3vw 1vw;
}

.adv__input {
    display: flex;
    width: 20vw;
    padding: .2vw 1vw;
    color: var(--color-black);
    font-family: var(--font-family-light);
    font-size: 1.2vw;
    border: 2px solid var(--color-black);
    outline: none;
    border-radius: 1vw;
    margin-block: .5vw;
}

.adv__input:nth-last-of-type(1) {
    margin-block: .5vw 1vw;
}

.adv__adv {
    font-family: var(--font-family-light);
    font-size: 1.2vw;
    max-width: 22vw;
    text-align: center;
    display: none;
}

.adv__content-btns {
    display: flex;
    align-items: center;
    margin-block: 1vw 3vw;
}

@media screen and (max-width: 600px) {
    .adv { padding: 3vw 6vw; max-width: 60vw; }
    .adv__title { font-size: 4vw; margin-block: 3vw 1vw; }
    .adv__text { font-size: 3vw; }
    .adv__btns { margin-block: 3vw; }
    .adv__btn { font-size: 2.8vw; padding: 1vw 3vw; margin-inline: 0 4vw; }
    .adv__close { font-size: 2.8vw; }
    .adv__content { width: 75vw; padding: 3vw 6vw; }
    .adv__content::after { border: 1px solid var(--color-black); }
    .adv__content-title { font-size: 4vw; margin-block: 4vw 2vw; }
    .adv__input { padding: 1vw 3vw; width: 54vw; font-size: 2.8vw; border: 1px solid var(--color-black); margin-block: 1vw; }
    .adv__input:nth-last-of-type(1) { margin-block: 1vw 2vw; }
    .adv__content-btns { margin-block: 2vw 4vw; }
    .adv__adv { font-size: 2.8vw; max-width: 60vw; }
}