* {
    padding: 0;
    margin: 0;

    color: #818cf8;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 30%, #16213e 60%, #0f3460 100%);
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
}

nav {
    display: flex;

    padding: 16px;

    background: rgba(0, 0, 0, 0.2);

    border: 1px solid #000;

    gap: 16px;

    font-size: 0.7rem;

    .logo {
        display: flex;

        gap: 10px;
    }

    a {
        text-decoration: none;

        font-size: 1.2rem;


    }
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #888;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

dialog {
    padding: 16px;

    background: rgba(10, 10, 30, 0.95);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(100, 108, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    max-width: 500px;
    height: 450px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    animation: modalSlideIn 0.3s ease;

    overflow: hidden;
}

button {
    border: none;
    background: #0f3460;
    color: #fff;

    width: 100%;
    height: 50px;
}

button:hover {
    background: #031e41;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;

    text-align: center;

    background: rgba(0, 0, 0, 0.2);
}

.projects {
    display: flex;

    gap: 26px;

    .project {
        padding: 16px;

        display: block;

        border-radius: 10px;
        background: rgba(0, 0, 0, 0.2);

        img {
            width: 258px;
            height: 145px;
        }

        div.desc {
            max-width: 258px;
            max-height: 258px;
        }

        button {
            margin-top: 16px;

            height: 40px;

            width: 258px;

            background-color: #006dc1;

            border: none;

            border-radius: 10px;
        }

        button:hover {
            background-color: #0f3460;

            cursor: pointer;
        }
    }
}

/* ===== МОБИЛЬНЫЕ СТИЛИ ===== */
@media (max-width: 768px) {
    /* Переопределяем body для мобильных */
    body {
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Навигация - делаем компактнее */
    nav {
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: 10px;
        flex-shrink: 0; /* не сжимается */
    }

    nav .logo {
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        gap: 8px;
    }

    nav .logo h1 {
        font-size: 1.2rem;
        width: 100%;
        text-align: center;
    }

    nav a {
        font-size: 1rem;
        width: 100%;
        text-align: center;
        padding: 4px 0;
    }

    /* Основной контент - растягивается */
    .projects {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 20px 16px 20px 16px;
        height: auto;
        overflow-y: auto;
        flex: 1 0 auto; /* растягивается, занимает всё свободное место */
    }

    .projects .project {
        width: 100%;
        max-width: 340px;
        padding: 16px;
    }

    .projects .project img {
        width: 100%;
        max-width: 258px;
        height: auto;
        aspect-ratio: 258 / 145;
        display: block;
        margin: 0 auto;
    }

    .projects .project div.desc {
        max-width: 100%;
        max-height: none;
        width: 100%;
    }

    .projects .project div.desc h2 {
        font-size: 1.3rem;
        text-align: center;
    }

    .projects .project div.desc p {
        font-size: 0.95rem;
        text-align: center;
        padding: 0 4px;
    }

    .projects .project button {
        width: 100%;
        max-width: 258px;
        display: block;
        margin: 16px auto 0 auto;
    }

    /* Футер - прижат к низу */
    footer {
        position: relative;
        bottom: auto;
        left: auto;
        width: 100%;
        z-index: 100;
        text-align: center;
        background: rgba(0, 0, 0, 0.2);
        padding: 12px 0;
        margin-top: auto; /* прижимает футер к низу */
        flex-shrink: 0; /* не сжимается */
    }

    /* Модальное окно - адаптируем под мобильные */
    dialog {
        max-width: 92%;
        width: 92%;
        height: auto;
        max-height: 90vh;
        padding: 20px 16px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow-y: auto;
    }

    dialog h1 {
        font-size: 1.3rem;
        text-align: center;
        margin-top: 8px;
    }

    dialog img {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 500 / 300;
        display: block;
        margin: 10px auto;
    }

    dialog button {
        height: 48px;
        font-size: 1rem;
    }

    .close-btn {
        top: 8px;
        right: 12px;
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    /* Анимация для модалки на мобильных */
    @keyframes modalSlideIn {
        from {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.95) translateY(20px);
        }
        to {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1) translateY(0);
        }
    }
}

/* Дополнительные стили для очень маленьких экранов (до 480px) */
@media (max-width: 480px) {
    nav .logo h1 {
        font-size: 1rem;
    }

    .projects .project {
        padding: 12px;
        max-width: 300px;
    }

    .projects .project div.desc h2 {
        font-size: 1.1rem;
    }

    .projects .project div.desc p {
        font-size: 0.85rem;
    }

    .projects .project button {
        height: 36px;
        font-size: 0.9rem;
    }

    dialog {
        padding: 16px 12px;
    }

    dialog h1 {
        font-size: 1.1rem;
    }

    dialog button {
        height: 42px;
        font-size: 0.9rem;
    }

    .close-btn {
        width: 28px;
        height: 28px;
        font-size: 16px;
        top: 6px;
        right: 10px;
    }
}