/* Общие стили */
    
    html,
    body,
    .hello-parent {
        height: 100%;
        width: 100%;
        margin: 0;
    }
    
    .hello-parent {
        display: flex;
        background: #fff;
        background: -webkit-radial-gradient(#fff, #eaeaea);
        background: -o-radial-gradient(#fff, #eaeaea);
        background: -moz-radial-gradient(#fff, #eaeaea);
        background: radial-gradient(#fff, #eaeaea);
    }
    
    .hello-word {
        margin: auto;
    }
    /* H Animation */
    
    .H-left-stroke {
        stroke-dasharray: 124px;
        stroke-dashoffset: 124px;
        animation: H-left-move 20s ease forwards;
    }
    
    .H-mid-stroke {
        stroke-dasharray: 37px;
        stroke-dashoffset: 37px;
        animation: H-mid-move 9s ease forwards;
    }
    
    .H-right-stroke {
        stroke-dasharray: 124px;
        stroke-dashoffset: 124px;
        animation: H-right-move 13s ease forwards;
    }
    
    @keyframes H-left-move {
        0% {
            stroke-dashoffset: 124px;
        }
        5% {
            stroke-dashoffset: 0px;
        }
        100% {
            stroke-dashoffset: 0px;
        }
    }
    
    @keyframes H-mid-move {
        0% {
            stroke-dashoffset: 37px;
        }
        5% {
            stroke-dashoffset: 37px;
        }
        10% {
            stroke-dashoffset: 0px;
        }
        100% {
            stroke-dashoffset: 0px;
        }
    }
    
    @keyframes H-right-move {
        0% {
            stroke-dashoffset: 124px;
        }
        5% {
            stroke-dashoffset: 124px;
        }
        10% {
            stroke-dashoffset: 0px;
        }
        100% {
            stroke-dashoffset: 0px;
        }
    }
    /* E Animation */
    
    .E-left-stroke {
        stroke-dasharray: 124px;
        stroke-dashoffset: 124px;
        animation: E-left-move 20s ease forwards;
    }
    
    .E-top-stroke {
        stroke-dasharray: 47px;
        stroke-dashoffset: 47px;
        animation: E-top-move 10s ease forwards;
    }
    
    .E-mid-stroke {
        stroke-dasharray: 42px;
        stroke-dashoffset: 42px;
        animation: E-mid-move 10s ease forwards;
    }
    
    .E-bottom-stroke {
        stroke-dasharray: 47px;
        stroke-dashoffset: 47px;
        animation: E-bottom-move 10s ease forwards;
    }
    
    @keyframes E-left-move {
        0% {
            stroke-dashoffset: 124px;
        }
        2% {
            stroke-dashoffset: 124px;
        }
        6% {
            stroke-dashoffset: 0px;
        }
        100% {
            stroke-dashoffset: 0px;
        }
    }
    
    @keyframes E-top-move {
        0% {
            stroke-dashoffset: 47px;
        }
        6% {
            stroke-dashoffset: 47px;
        }
        11% {
            stroke-dashoffset: 0px;
        }
        100% {
            stroke-dashoffset: 0px;
        }
    }
    
    @keyframes E-mid-move {
        0% {
            stroke-dashoffset: 42px;
        }
        8% {
            stroke-dashoffset: 42px;
        }
        13% {
            stroke-dashoffset: 0px;
        }
        100% {
            stroke-dashoffset: 0px;
        }
    }
    
    @keyframes E-bottom-move {
        0% {
            stroke-dashoffset: 47px;
        }
        11% {
            stroke-dashoffset: 47px;
        }
        16% {
            stroke-dashoffset: 0px;
        }
        100% {
            stroke-dashoffset: 0px;
        }
    }
    /* L One Animation */
    
    .L-one-long-stroke {
        stroke-dasharray: 124px;
        stroke-dashoffset: 124px;
        animation: L-one-long-move 20s ease forwards;
    }
    
    .L-one-short-stroke {
        stroke-dasharray: 44px;
        stroke-dashoffset: 44px;
        animation: L-one-short-move 10s ease forwards;
    }
    
    @keyframes L-one-long-move {
        0% {
            stroke-dashoffset: 124px;
        }
        2% {
            stroke-dashoffset: 124px;
        }
        7% {
            stroke-dashoffset: 0px;
        }
        100% {
            stroke-dashoffset: 0px;
        }
    }
    
    @keyframes L-one-short-move {
        0% {
            stroke-dashoffset: 44px;
        }
        13% {
            stroke-dashoffset: 44px;
        }
        18% {
            stroke-dashoffset: 0px;
        }
        100% {
            stroke-dashoffset: 0px;
        }
    }
    /* L Two Animation */
    
    .L-two-long-stroke {
        stroke-dasharray: 124px;
        stroke-dashoffset: 124px;
        animation: L-two-long-move 20s ease forwards;
    }
    
    .L-two-short-stroke {
        stroke-dasharray: 44px;
        stroke-dashoffset: 44px;
        animation: L-two-short-move 10s ease forwards;
    }
    
    @keyframes L-two-long-move {
        0% {
            stroke-dashoffset: 124px;
        }
        3% {
            stroke-dashoffset: 124px;
        }
        8% {
            stroke-dashoffset: 0px;
        }
        100% {
            stroke-dashoffset: 0px;
        }
    }
    
    @keyframes L-two-short-move {
        0% {
            stroke-dashoffset: 44px;
        }
        15% {
            stroke-dashoffset: 44px;
        }
        20% {
            stroke-dashoffset: 0px;
        }
        100% {
            stroke-dashoffset: 0px;
        }
    }
    /* O Animation */
    
    .O-stroke {
        stroke-dasharray: 302px;
        stroke-dashoffset: 302px;
        animation: O-move 20s ease forwards;
    }
    
    @keyframes O-move {
        0% {
            stroke-dashoffset: 302px;
        }
        4% {
            stroke-dashoffset: 302px;
        }
        9% {
            stroke-dashoffset: 0px;
        }
        100% {
            stroke-dashoffset: 0px;
        }
    }
    /* Red Dot Animation */
    
    .red-dot {
        stroke-width: 44px;
        stroke-linecap: round;
        animation: red-dot-grow 8s ease-out forwards;
    }
    
    @keyframes red-dot-grow {
        0% {
            stroke-width: 0px;
        }
        15% {
            stroke-width: 0px;
        }
        20% {
            stroke-width: 44px;
        }
        100% {
            stroke-width: 44px;
        }
    }
    /* Общие стили */
    
    body {
        font-family: 'Montserrat', sans-serif;
        margin: 0;
        padding: 0;
    }
    /* Шапка */
    
    .header {
        background-color: #333;
        color: #fff;
        padding: 10px 0;
    }
    
    .navigation {
        text-align: center;
    }
    
    .navigation a {
        text-decoration: none;
        color: #fff;
        font-size: 22px;
        margin: 0 15px;
        padding: 10px 15px;
        border-radius: 5px;
        transition: background-color 0.3s ease;
    }
    
    .navigation a:hover {
        background-color: #555;
    }
    
    .About_me {
        text-align: center;
        font-size: 20px;
        line-height: 42px;
        padding: 60px 0;
        opacity: 0;
        background: url(images/msg1261189515-239445.jpg);
        background-size: cover;
        /* чтобы изображение занимало всю доступную область */
        background-position: center;
        /* центрирование изображения */
        color: white;
        height: 100vh;
        /* чтобы блок занимал всю высоту экрана */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    /* Блок "Навыки" */
    /* Общие стили для блока с навыками */
    
    .skills {
        text-align: center;
        background: linear-gradient(to bottom, #4a90e2, #1e3799);
        /* Градиент, имитирующий цвета моря */
        color: #ffffff;
        padding: 50px 0;
        position: relative;
        overflow: hidden;
    }
    
    .skills::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
        animation: waves 10s linear infinite;
        transform: translate3d(0, -50%, 0);
        /* Сдвиг волны вверх, чтобы создать иллюзию моря */
    }
    
    .skills::after {
        content: "";
        position: absolute;
        top: 0;
        left: -50%;
        width: 200%;
        height: 100%;
        background: rgba(255, 255, 255, 0.3);
        animation: shimmer 3s ease forwards;
        /* Анимация срабатывает один раз и останавливается */
    }
    
    @keyframes waves {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 0 100%;
        }
    }
    
    @keyframes shimmer {
        0% {
            transform: translateX(-100%);
        }
        100% {
            transform: translateX(100%);
        }
    }
    
    .skills__heading {
        font-size: 34px;
        line-height: 42px;
        margin-top: 90px;
    }
    
    .skills__text {
        font-size: 18px;
        line-height: 22px;
        margin-top: 70px;
        margin-bottom: 84px;
    }
    
    .skills__images {
        display: flex;
        justify-content: space-around;
        margin-top: 30px;
        opacity: 0;
        /* Начальная прозрачность для анимации */
        transform: translateY(50px);
        /* Начальное положение для анимации */
        transition: opacity 0.8s ease, transform 1s ease;
        /* Плавная анимация */
    }
    
    .skills__images figure {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        /* Скругление углов для изображений */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* Тень для эффекта поднятия */
        transition: transform 0.3s ease;
        /* Плавное изменение при наведении */
    }
    
    .skills__images figure:hover {
        transform: translateY(-10px);
        /* Эффект поднятия при наведении */
    }
    
    .skills__images img {
        width: 200px;
        height: 200px;
        object-fit: cover;
        /* Чтобы изображения вписывались в размеры */
        transition: opacity 0.3s ease;
        /* Плавный переход */
    }
    
    .skills__images figcaption {
        margin-top: 23px;
        font-size: 18px;
        line-height: 22px;
    }
    /* Анимация появления элементов */
    
    .skills.animate .skills__images {
        opacity: 1;
        transform: translateY(0);
    }
    
    .skills.animate .skills__images img {
        opacity: 1;
    }
    /* Блок "Заголовок" */
    
    .title__lang {
        transform: rotate(-90deg);
    }
    
    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 80%;
        margin-top: 3%;
        margin-left: 10%;
        background-color: #97b1cc;
        /* Мягкий серый цвет фона */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* Тень для эффекта поднятия */
        transition: transform 0.3s ease;
        /* Плавное изменение при наведении */
    }
    
    .title:hover {
        transform: translateY(-5px);
        /* Эффект поднятия при наведении */
    }
    /* Прелоадер стили */
    
    .hello-parent {
        position: fixed;
        top: 0;
        left: 0;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    
    .hello-word {
        width: 150px;
        height: 150px;
        animation: rotate 1s linear;
    }
    
    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
    /* Стили для прелоадера */
    
    #preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    
    .hello-word {
        width: 150px;
        height: 150px;
        animation: rotate 2s linear infinite;
    }
    
    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
    
    figcaption {
        background: black;
    }
    
    figure {
        background: black;
    }
    
    .my-works {
        background-image: url('https://static.pexels.com/photos/414171/pexels-photo-414171.jpeg');
        padding: 50px 0;
        text-align: center;
        background-size: cover;
        -webkit-animation: slidein 100s;
        animation: slidein 40s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
    }
    
    .works__heading {
        font-size: 34px;
        margin-bottom: 50px;
    }
    
    .works__gallery {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    
    .work {
        width: 300px;
        padding: 20px;
        margin-bottom: 20px;
        background-color: #ffffff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        overflow: hidden;
    }
    
    .btn-link {
        display: inline-block;
        /* Оставляет ссылку в строке с кнопкой */
        margin-top: 25px;
        /* Отступ сверху для кнопки */
    }
    
    .work img {
        width: 100%;
        height: auto;
        border-radius: 8px 8px 0 0;
    }
    
    .work .glow-on-hover {
        margin-top: 1%;
        /* Задайте нужный отступ сверху для кнопки */
    }
    
    .work h2 {
        font-size: 23px;
        margin-top: 12px;
    }
    
    .work p {
        font-size: 16px;
        line-height: 1.5;
        padding: 0 20px;
        margin-top: 10px;
    }
    
    .work a {
        margin-top: 20px;
        /* Отступ сверху для кнопок */
    }
    
    .glow-on-hover {
        width: 200px;
        height: 40px;
        border: none;
        outline: none;
        color: #fff;
        background: #111;
        cursor: pointer;
        position: relative;
        z-index: 0;
        border-radius: 10px;
    }
    
    #work_bloclk2 .glow-on-hover {
        margin-top: 20px;
    }
    
    .glow-on-hover:before {
        content: '';
        background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 300%;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowing 25s linear infinite;
        opacity: 0;
        transition: opacity .4s ease-in-out;
        border-radius: 10px;
    }
    
    .glow-on-hover:active {
        color: #000
    }
    
    .glow-on-hover:active:after {
        background: transparent;
    }
    
    .glow-on-hover:hover:before {
        opacity: 1;
    }
    
    .glow-on-hover:after {
        z-index: -1;
        content: '';
        position: absolute;
        background: #111;
        left: 0;
        top: 0;
        border-radius: 10px;
    }
    
    @keyframes glowing {
        0% {
            background-position: 0 0;
        }
        50% {
            background-position: 200% 0;
        }
        100% {
            background-position: 0 0;
        }
    }
    
    @-webkit-keyframes slidein {
        from {
            background-position: top;
            background-size: 3000px;
        }
        to {
            background-position: -100px 0px;
            background-size: 2750px;
        }
    }
    
    @keyframes slidein {
        from {
            background-position: top;
            background-size: 3000px;
        }
        to {
            background-position: -100px 0px;
            background-size: 2750px;
        }
    }
    
    #game {
        margin-top: 1%;
        padding: 1%;
    }