@font-face {
    font-family: "Boingster";
    src: url("./fonts/Boingster.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}


/* =========================
   ОСНОВА САЙТА
   ========================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background-color: orange;
    color: black;

    font-family: "Boingster", sans-serif;

    text-align: center;
}


/* =========================
   ЗАГОЛОВОК
   ========================= */

.textTop {
    text-align: center;

    margin: 50px 0;

    font-size: 40px;
}


/* =========================
   ВЕРХНЕЕ МЕНЮ
   ========================= */

#sidebar {
    width: 100%;

    text-align: center;

    /*
        Важно:
        меню находится в обычном потоке страницы.
        Поэтому когда dropdown увеличивается,
        всё ниже автоматически двигается вниз.
    */
}


/* =========================
   ВЕРХНЕЕ МЕНЮ
   ========================= */
.center-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.menu-flex {
    width: 100%;

    display: flex;

    flex-direction: row;

    align-items: flex-start;

    justify-content: center;

    gap: -0px;

    flex-wrap: nowrap;
}


/* =========================
   ГРУППЫ
   ========================= */

.menu-group {
    display: flex;

    align-items: flex-start;

    gap: 0;

    transition:
        transform 0.4s ease;
}


/* =========================
   ЦЕНТРАЛЬНАЯ КНОПКА
   ========================= */

.about-dropdown {
    flex-shrink: 0;
    gap: 0;
    transition:
        transform 0.4s ease;
}


/* =========================
   РАЗДВИЖЕНИЕ
   ========================= */

.menu-flex.about-open .menu-left {
    transform: translateX(-20px);
}


.menu-flex.about-open .menu-right {
    transform: translateX(20px);
}


/* =========================
   ЭЛЕМЕНТ МЕНЮ
   ========================= */

.dropdown {
    /*
        Не используем absolute.
        Выпадающее меню будет частью
        обычной разметки.
    */

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;
}


/* =========================
   ОСНОВНЫЕ КНОПКИ
   ========================= */

.menu-group > a,
.dropdown > button {
    font-family: "Boingster", sans-serif;

    font-size: 18px;

    color: black;

    background-color: transparent;

    border: 3px solid black;

    border-radius: 5px;

    padding: 4px 15px;

    cursor: pointer;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


/* Наведение */

.menu-group > a:hover,
.dropdown > button:hover {
    background-color: black;

    color: orange;

    transform: translateY(-3px);
}


/* =========================
   ВЫПАДАЮЩЕЕ МЕНЮ
   ========================= */

.dropdown-menu {
    /*
        Самое важное свойство.

        Меню находится в обычном потоке,
        поэтому его высота будет толкать
        контент ниже.
    */

    position: static;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;


    /*
        В закрытом состоянии высота равна 0.
    */

    max-height: 0;



    /*
        Пока закрыто — невидимо.
    */

    opacity: 0;


    /*
        Небольшой эффект движения.
    */

    transform: translateY(-10px);


    /*
        Сбрасываем стандартные
        отступы <ul>.
    */

    margin: 0;

    padding: 0;

    list-style: none;


    /*
        Анимация раскрытия.
    */

    transition:
        max-height 0.45s ease,
        opacity 0.3s ease,
        transform 0.45s ease,
        margin 0.45s ease,
        padding 0.45s ease;
}


/* =========================
   ОТКРЫТИЕ DROPDOWN
   ========================= */

/*
    Курсор находится на .dropdown:

    ┌─────────────────────────┐
    │ Творчество & 3D приколы │
    └─────────────────────────┘
              ↓
         Мои творения
         Музыка
         WEB3D

    При этом dropdown увеличивает
    высоту самого меню.
*/

.dropdown:hover .dropdown-menu {
    max-height: 250px;

    opacity: 1;

    transform: translateY(0);

    margin-top: 8px;

    padding: 0;
}


/* =========================
   ЭЛЕМЕНТЫ ВЫПАДАЮЩЕГО МЕНЮ
   ========================= */

.dropdown-menu li {
    width: 100%;

    display: flex;

    justify-content: center;
}


/* Ссылки */

.dropdown-menu a {
    display: block;

    width: 170px;

    padding: 5px 10px;

    border: 3px solid black;

    border-radius: 5px;

    background-color: transparent;

    color: black;

    font-family: "Boingster", sans-serif;

    font-size: 18px;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


/* Наведение на выпавшую кнопку */

.dropdown-menu a:hover {
    background-color: black;

    color: orange;

    transform: translateX(4px);
}


/* =========================
   ОСНОВНОЙ КОНТЕНТ
   ========================= */

.content {
    width: min(900px, calc(100% - 40px));

    margin: 60px auto 0;

    text-align: center;
}


/*
    Никакого position: absolute здесь нет.

    Когда dropdown раскрывается:

        меню становится выше
              ↓
        .content автоматически
        сдвигается вниз
*/

.content p {
    margin: 20px 0;
}


/* =========================
   ССЫЛКА TELEGRAM
   ========================= */

.content a {
    color: blue;
}


/* =========================
   КАРТИНКА
   ========================= */

.image-container {
    position: relative;

    display: inline-block;
}


.imageNick1 {
    width: 300px;
    height: 200px;

    display: block;

    margin: 20px auto;
}


/* =========================
   ТЕКСТ НА КАРТИНКЕ
   ========================= */

.image-text {
    position: absolute;

    bottom: 0;

    left: 0;
    right: 0;

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

    color: white;

    padding: 10px;

    opacity: 0;

    transition: opacity 0.3s ease;
}


.image-container:hover .image-text {
    opacity: 1;
}


/* =========================
   ЗАГОЛОВОК "ВЕЩИ..."
   ========================= */

.content h2 {
    margin-top: 45px;
}


/* =========================
   АДАПТИВНОСТЬ
   ========================= */

@media (max-width: 700px) {

    .menu-flex {
        flex-direction: column;

        align-items: center;

        gap: 10px;
    }


    .dropdown {
        width: 170px;
    }


    .dropdown > button {
        width: 170px;
    }


    .content {
        width: calc(100% - 30px);

        margin-top: 40px;
    }


    .textTop {
        font-size: 32px;

        margin: 35px 0;
    }
}

.footer {
    width: 100%;

    margin-top: 80px;
    padding: 30px 20px;

    border-top: 3px solid black;

    text-align: center;

    font-size: 16px;
}

.footer p {
    margin: 5px 0;
}


/* ==================================================
   СТРАНИЦА "ОБО МНЕ"
   ================================================== */

.about-page {

    width: min(1000px, calc(100% - 40px));

    margin: 60px auto 0;

    text-align: center;
}


/* ==================================================
   ОСНОВНАЯ РАМКА О СЕБЕ
   ================================================== */

.about-box {

    padding: 35px 40px;

    background: transparent;

    border: 3px solid black;

    border-radius:
        7px 5px 8px 4px /
        5px 8px 4px 7px;

    transform: rotate(-0.3deg);

    text-align: left;
}


.about-box h2 {

    margin: 0 0 25px;

    font-size: 36px;

    font-weight: normal;

    text-align: center;
}


.about-box p {

    margin: 0 0 18px;

    font-size: 19px;

    line-height: 1.6;

    text-indent: 30px;
}


/* ==================================================
   ГАЛЕРЕЯ
   ================================================== */

.about-gallery {

    margin-top: 60px;
}


.about-gallery h2 {

    margin-bottom: 30px;

    font-size: 32px;

    font-weight: normal;
}


/* ==================================================
   СЕТКА КАРТИНОК
   ================================================== */

.gallery-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;

    align-items: start;
}


/* ==================================================
   ОТДЕЛЬНАЯ КАРТИНКА
   ================================================== */

.gallery-item {

    position: relative;

    width: 100%;

    border: 3px solid black;

    background: transparent;

    padding: 10px;

    border-radius:
        5px 8px 4px 7px /
        7px 4px 8px 5px;

    transition:
        transform 0.2s ease;
}


/*
    Небольшая разница в наклонах,
    чтобы блоки выглядели живее.
*/

.gallery-item:nth-child(1) {

    transform: rotate(-1deg);
}


.gallery-item:nth-child(2) {

    transform: rotate(0.8deg);
}


.gallery-item:nth-child(3) {

    transform: rotate(-0.5deg);
}


.gallery-item:hover {

    transform:
        translateY(-5px)
        rotate(0deg);
}


/* ==================================================
   НАСТОЯЩАЯ КАРТИНКА
   ================================================== */

.gallery-item img {

    display: block;

    width: 100%;

    height: 220px;

    object-fit: cover;
}


/* ==================================================
   ЗАГЛУШКА ДЛЯ КАРТИНКИ
   ================================================== */

.image-placeholder {

    width: 100%;

    height: 220px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;

    border: 2px dashed black;

    font-size: 20px;

    line-height: 1.4;
}


/* ==================================================
   ПОДПИСЬ ПОД КАРТИНКОЙ
   ================================================== */

.gallery-caption {

    padding: 10px 5px 5px;

    font-size: 16px;

    text-align: center;
}


/* ==================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ================================================== */

@media (max-width: 900px) {

    .about-page {

        width: calc(100% - 30px);

        margin-top: 40px;
    }


    .gallery-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .about-page {

        width: calc(100% - 20px);
    }


    .about-box {

        padding: 25px 20px;
    }


    .about-box h2 {

        font-size: 30px;
    }


    .about-box p {

        font-size: 17px;
    }


    .gallery-grid {

        grid-template-columns: 1fr;

        gap: 25px;
    }


    .gallery-item img,
    .image-placeholder {

        height: 250px;
    }


    .about-gallery h2 {

        font-size: 28px;
    }

}