/* Фон для всего сайта */
body {
    background-image: url('https://i.imgur.com/SThncV0.png'); /* Путь к изображению */
    background-size: cover; /* Растягивает изображение на весь экран */
    background-position: center; /* Центрирует изображение */
    background-attachment: fixed; /* Фон остаётся на месте при прокрутке */
    background-repeat: no-repeat; /* Избегает повторения фона */
    color: #ffffff; /* Белый текст для контраста */
}
/* Базовые стили */
body {
    font-family: 'Celtes', sans-serif;
    margin: 0;
    line-height: 1.6;
    color: #979797;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Шапка */
footer {
    background: rgb(18, 18, 18); 
    color: white;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 2.5em;
}

nav a {
    color: #6a6464;
    text-decoration: none;
    margin: 0 15px;
    font-size: 1.2em;
}

/* Обо мне */
.about {
    padding: 60px 0;
    background: #2a2a2b;
}

.about-content {
    display: flex;
    align-items: center;
    gap: 30px;
}

.profile-photo {
    width: 200px;
    height: 200px;
    border-radius: 10%;
    object-fit: cover;
}

/* Проекты */
.projects {
    padding: 60px 0;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.project-card {
    background: #3c3b3b;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    transition: 0.3s;
}

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.project-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.project-card h3 {
    margin: 15px;
    font-size: 1.5em;
}

.project-card p {
    margin: 0 15px 15px;
    color: #ffffff;
}

.btn {
    display: inline-block;
    margin: 15px;
    padding: 10px 20px;
    background: #222323;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
}

.btn:hover {
    background: #2980b9;
}

/* Контакты */
.contact {
    padding: 60px 0;
    background: rgba(44, 44, 44, 0.58);
    text-align: center;
}

.social-links a {
    display: inline-block;
    margin: 10px;
    padding: 10px 20px;
    background: rgba(44, 44, 44, 0.34);
    color: #c3c3c3;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
}

.social-links a:hover {
    background: #2d2e30;
}

/* Подвал */
footer {
    background: rgba(18, 18, 18, 0.7); /* Полупрозрачный чёрный цвет (#121212 с прозрачностью 70%) */
    color: white;
    text-align: center;
    padding: 20px 0;
    backdrop-filter: blur(5px); /* Размытие фона */
    position: relative; /* Для корректного отображения */
    z-index: 1; /* Поднимаем подвал над фоном */
}
/* Полупрозрачный слой поверх фона */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Чёрный слой с прозрачностью 50% */
    z-index: -1; /* Слой под контентом */
}

@font-face {
    font-family: 'Celtes'; /* Название шрифта (можешь выбрать любое) */
    src: url('fonts/Celtes.ttf') format('truetype'); /* Указываем путь к файлу .ttf */
    font-weight: normal ; /* Вес шрифта (normal, bold и т.д.) */
    font-style: normal;  /* Стиль шрифта (normal, italic и т.д.) */
}

footer {
    background: rgba(75, 75, 76, 0.65);
    color: white;
    text-align: center;
    padding: 30px 0;
    margin-top: 50px;
}


a {
    color: #61c1cd; 
    text-decoration: none; 
}

/* Стиль при наведении курсора */
a:hover {
    color: #fad211; 
    text-decoration: underline; 
}

/* Стиль для посещённых ссылок */
a:visited {
    color: #88ec8a;
}

/* Стиль для активных ссылок (при нажатии) */
a:active {
    color: #FF0000; 
}