@font-face {
        font-family: "Minecraft 1.1";
        src: url("./assets/fonts/minecraft-1-1.woff2") format("woff2");
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: "Cruinn";
        src: url("./assets/fonts/Cruinnlight.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: "Emoji";
        src: url("./assets/fonts/seguiemj.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
    }

    :root{
        --background: #232222;
        --color: rgb(194, 194, 194);
        --border-color: rgba(172, 172, 172, 0.2);
    }

    body.dark, html.dark{
        --background: #232222;
        --color: rgb(194, 194, 194);
        --border-color: rgba(172, 172, 172, 0.2);
    }

    body.light, html.light{
        --background: aliceblue;
        --color: rgb(44, 44, 44);
        --border-color: rgba(44, 44, 44, 0.5);
    }


    html, body{
    background: var(--background);
    color: var(--color);
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background-size: cover;
    transition: background 1.5s, color 1.5s;
    min-height: 300px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    user-select: none;
    }

    body::-webkit-scrollbar{
    display: none;
    }

    .lang-container{
        position: relative;
        min-height: 2em;
    }

    .lang {
        position: absolute;
        opacity: 0;
        transition: opacity 1s ease;
        pointer-events: none; 
    }
    
    .lang.active {
        opacity: 1;
        pointer-events: auto;
    }

    .important-info{
        padding: 2%;
        margin: 1%;
        border: #ff0000 1px solid;
        border-radius: 5px;
        overflow-wrap: break-word;
        word-break: break-word;
        box-shadow: 0 0 20px #ff00004d;
    }

    .header{
        display: flex;
        justify-content: center;
    }

    .head-container{
        display: flex;
        flex-direction: row;
        justify-content: end;
        height: 5%;
        padding: 1%;
    }

    .head-btn{
        border: var(--border-color) 1px solid;
        margin-right: 5%;
        background: transparent;
        color: var(--color);
        transform: color 0.5s;
        border-radius: 25%;
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: transform 1.5s;
        /*font-family: "Emoji";*/
    }

    .head-btn:hover{
        color: #c1398d;
        cursor: pointer;
        transform: scale(1.2);
    }



        .container {
            background-color: transparent;
            color: var(--color);
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 1.5s, color 1.5s;
            display: grid;
            grid-template-columns: 1fr 1fr; /* две колонки */
            gap: 1vh; /* отступ между колонками */
            width: 100%;
            box-sizing: border-box;  
            margin: 0; padding: 0;
            align-items: stretch;
        }

        .big-block {
            padding: 0.5%;
            padding-bottom: 0%;
            gap: 2vh;
            display: flex;
            height: 100%;
            flex-direction: column;
            box-sizing: border-box;
            overflow-wrap: break-word;
            word-break: break-word;
            white-space: normal;
        }

        .big-block:last-child {
            justify-content: space-between;
        }

        .sub-block{
            padding-left: 3%; 
            padding-right: 3%;
            box-sizing: border-box; 
            width: 100%;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            transition: transform 1.5s ease;
            
        }

    .sub-block:hover{
        transform: scale(1.02);
    }

    /*.sub-block:last-child {
        margin-top: auto;
    }*/

    .about-block {
        height: 100%;          /* растянуть на всю колонку */
        display: flex;         
        flex-direction: column;
        justify-content: space-between; /* если нужно разнести контент */
    }

    .about-subblock{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .about-description{
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        flex: 0 0 60%;
    }

    .projects-block{
        padding-bottom: 2%;
    }

    .skills-block{
        padding-bottom: 2%;
    }

    .skills{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        border-radius: 5px;

    }

    .skills > div {
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        border: 1px solid var(--border-color);
        border-radius: 20px;
        white-space: nowrap;
        width: 90px;
        height: 30px;
        transition: transform 0.7s ease;
        margin-top: 2%;
        margin-left: 10px;
    }

    .skills > div:hover{
        transform: scale(1.1);
    }

    .contacts-row{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        box-sizing: border-box;
        margin-bottom: 3%;
        gap: 2%;
        white-space: normal;
    }

    .contacts-btn{
        background: transparent;
        color: var(--color);
        text-align: center;
        text-decoration: none;
        border: 1px solid var(--border-color);
        border-radius: 20px;
        white-space: nowrap;
        padding-left: 1%;
        padding-right: 3%;
        box-sizing: border-box;
        transition: transform 1.2s ease, background 1.5s ease, color 1.5s ease;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: medium;
    }

    .contacts-btn:hover{
        transform: translateY(-10%);
        cursor: pointer;
    }

    .fullwidth-btn{
        border: var(--border-color) 1px solid;
        background: transparent;
        color: var(--color);
        border-radius: 5px;
        width: 100%;
        display: block;
        text-decoration: none;
        box-sizing: border-box;
        padding-left: 2%;
        transition: transform 0.5s ease, box-shadow 1.5s ease, border 1.5s, color 1.5s, background 1.5s;
    }

    .fullwidth-btn:hover{
        color:#7953cd;
        transform: scale(0.97);
        transition: transform 2s;
        box-shadow: 0 0 10px rgba(0,0,0,0.3)
    }

    .fullwidth-btn:active {
        transform: translateY(3px); /* небольшое продавливание */
        box-shadow: 0 1px 2px rgba(0,0,0,0.2); /* легкий эффект тени */
    }

    .href-btn{
        color: #c1398d;
        text-decoration: none;
        transition: 0.3s color ease;
    }

    .href-btn:hover{
        color: #6b1f91;
    }


    .theme-switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }
    
    .theme-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: #121212;
        transition: .7s;
        border-radius: 34px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 6px; /* чтобы иконки не прилипали */
        font-size: 16px;
    }
    
    .slider:before {
        content: "";
        position: absolute;
        height: 26px; width: 26px;
        left: 4px; bottom: 4px;
        background-color: rgb(88, 87, 87);
        transition: .7s;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }
    
    /* Активное состояние */
    input:checked + .slider {
        background-color: #c7c7c6;
    }
    
    input:checked + .slider:before {
        transform: translateX(26px);
        background-color: rgb(88, 87, 87);
    }
    
    /* Немного приглушаем неактивную иконку */
    .icon {
        pointer-events: none;
        transition: opacity .3s;
    }
    
    input:not(:checked) + .slider .moon {
        opacity: 0.3;
    }
    input:checked + .slider .sun {
        opacity: 0.3;
    }

    #theme-toggle:not(:checked) ~ .slider .moon {
        opacity: 0;
    }
    
    /* Если тема light (чекбокс включен) — скрываем ☀️ */
    #theme-toggle:checked ~ .slider .sun {
        opacity: 0;
    }

    .rm-underline{
        text-decoration: none;
        color: var(--color);
    }

    .return{
        color: var(--color);
        text-align: left;
        text-decoration: none;
    }

    .avatar{
        display: block;
        width: 128px;
        height: 128px;
        border-radius: 50%;
    }

    .title{
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        margin-bottom: 5%;
        margin-top: 4%;
        font-size: medium;
    }

    .title-icon{
        width: 32px;
        height: 32px;
        margin-left: 2%;
        align-items: baseline;
        justify-content: center;
    }

    .minecraft-text {
        font-family: "Minecraft 1.1", sans-serif;
        font-size: larger;
        box-sizing: border-box;
        align-items: baseline;
        align-items: start;
        margin-left: 2%;
        }

    .cruinn-text{
        font-family: "Cruinn", sans-serif;
        font-size: medium;
        box-sizing: border-box;
        align-items: baseline;
        align-items: start;
    }

    .center-text{
        text-align: center;
    }

    .line-height{
        line-height: 1.6;
    }

    .gradient-text{
        background: linear-gradient(
            to right,
            #7953cd 20%,
            #c1398d 30%,
            #b827b1 70%,
            #764ada 80%
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
        background-size: 500% auto;
        box-shadow: 0 0 10px;
        animation: textshine 5s ease-in-out infinite alternate;
        
        text-shadow: 
        0 0 5px #7953cd4d,
        0 0 10px #c1398d4d,
        0 0 15px #b827b14d,
        0 0 20px #764ada4d;

        box-shadow: none;
    }

    

    @keyframes textshine {
        0% {
        background-position: 0% 50%;
        }
        100% {
        background-position: 100% 50%;
        }
    }


    footer{
        padding: 24px 0;
        background: var(--background);
        color: rgb(88, 87, 87);
        margin-left: 2vw;
        transition: background 1.5s, color 1.5s;
        flex-shrink: 0;
    }

    .circle-hover {
        position: relative;
        display: inline-block;
        padding: 12px 24px;
        cursor: pointer;
        z-index: 1;
    }.circle-hover::before {
        content: '';
        position: absolute;
        left: 50%; top: 50%;
        width: 0; height: 0;
        background: rgba(30, 144, 255, 0.15); /* Цвет и прозрачность */
        border-radius: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
        transition: width 0.25s, height 0.25s, opacity 0.25s;
        opacity: 0;
        overflow-x: hidden;
        overflow-y: hidden;
    }.circle-hover:hover::before {
        width: 60px;
        height: 60px;
        opacity: 1;
        overflow-x: hidden;
        overflow-y: hidden;
    }

            
    @media (max-width: 900px) {
        .head-btn{
            margin-right: 5%;
        }

        .head-btn:hover{
            transform: scale(1.05);
        }

        /* На телефоне всё в одну колонку */
        .container {
            grid-template-columns: 1fr; /* одна колонка */
        }

        .big-block {
            max-width: 100%; /* растянуть */
            width: 100%;     /* на всякий случай */
        }

        .features-block {
            order: 1; /* about.md пойдёт первым */
        }
        
        /* Меняем порядок */
        .about-block {
            order: 2; /* about.md пойдёт первым */
        }
        
        .projects-block {
            order: 3; /* projects.json пойдёт вторым */
        }

        .skills-block {
            order: 4; /* about.md пойдёт первым */
        }

        .contacts-row {
            flex-direction: column; /* кнопки в колонку */
            gap: 10px; /* вертикальный отступ */
        }
    
        .contacts-btn {
            width: 100%; /* если нужно растянуть кнопки */
            white-space: normal; /* перенос текста внутри кнопки */
        }
    }

    @media (max-width: 409px){
        .about-subblock{
            flex-wrap: nowrap;
        }
    }