/* =========================
   Заголовок
   ========================= */

h1 {
    margin-top: 70px;
}


/* =========================
   Основной контейнер
   ========================= */

.container {
    max-width: 600px;

    margin: 50px auto;

    padding: 20px;
}


/* =========================
   Карточка
   ========================= */

.card {
    margin: 20px auto;

    padding: 25px;

    background: var(--panel-bg);
    color: var(--text-main);

    border-radius: var(--radius);

    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
}


/* =========================
   URL
   ========================= */

.url-input {
    width: 90%;

    padding: 15px;

    background: rgba(0, 0, 0, 0.75);
    color: var(--text-main);

    border: 1px solid var(--border);
    border-radius: 10px;

    font-size: 18px;

    outline: none;

    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));

    transition:
        background 0.2s,
        border-color 0.2s;
}

.url-input:hover {
    border-color: rgba(255, 255, 255, 0.25);
}

.url-input:focus {
    background: rgba(10, 10, 10, 0.82);

    border-color: rgba(255, 255, 255, 0.4);
}

.url-input::placeholder {
    color: #777;
}


/* Chrome autofill */

.url-input:-webkit-autofill,
.url-input:-webkit-autofill:hover,
.url-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #111 inset;
    -webkit-text-fill-color: white;
}


/* =========================
   Обычный input
   ========================= */

input {
    width: 90%;

    padding: 12px;

    font-size: 16px;

    background: rgba(0, 0, 0, 0.75);
    color: var(--text-main);

    border: none;
    border-radius: 10px;

    outline: none;
}


/* =========================
   Выбор формата
   ========================= */

select {
    width: 200px;

    padding: 12px;

    font-size: 16px;

    background: var(--panel-bg);
    color: var(--text-main);

    border: 1px solid var(--border);
    border-radius: 10px;

    outline: none;

    cursor: pointer;

    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
}


/* =========================
   Кнопки Downloader
   ========================= */

button,
.download-button,
.back-button,
.button {
    display: inline-block;

    padding: 15px 30px;

    background: var(--panel-bg);
    color: var(--text-main);

    border: 1px solid var(--border);
    border-radius: 10px;

    font-size: 18px;

    cursor: pointer;

    text-decoration: none;

    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));

    transition:
        background 0.2s,
        border-color 0.2s,
        transform 0.2s,
        box-shadow 0.2s;
}

button:hover,
.download-button:hover,
.back-button:hover,
.button:hover {
    background: var(--panel-hover);

    border-color: rgba(255, 255, 255, 0.25);

    box-shadow: 0 0 12px rgba(255, 255, 255, 0.08);

    transform: scale(1.03);
}

button:active,
.download-button:active,
.back-button:active,
.button:active {
    transform: scale(0.97);
}


/* =========================
   Статус загрузки
   ========================= */

.status {
    font-size: 18px;

    line-height: 1.8;
}


/* =========================
   Ссылки
   ========================= */

a {
    color: var(--text-main);
}


/* =========================
   Мобильная версия
   ========================= */

@media (max-width: 700px) {

    h1 {
        margin-top: 65px;
    }

    .container {
        margin: 20px auto;
        padding: 10px;
    }

    .card {
        padding: 20px;
    }

    .url-input {
        width: 95%;
    }

    select {
        width: 90%;
        max-width: 250px;
    }

}