{\rtf1\ansi\ansicpg1252\cocoartf2580
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\paperw11900\paperh16840\margl1440\margr1440\vieww11520\viewh8400\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f0\fs24 \cf0 /* \uc0\u1054 \u1073 \u1097 \u1080 \u1077  \u1089 \u1090 \u1080 \u1083 \u1080  */\
body \{\
    margin: 0;\
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\
    line-height: 1.6;\
    background-color: #e0e0e0;\
    color: #333;\
\}\
\
header \{\
    background-color: #222;\
    color: #fff;\
    padding: 1rem;\
    text-align: center;\
    position: sticky;\
    top: 0;\
    z-index: 1000;\
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);\
\}\
\
header h1 \{\
    margin: 0;\
    text-transform: uppercase;\
    font-weight: 300;\
    letter-spacing: 2px;\
\}\
\
nav ul \{\
    list-style: none;\
    padding: 0;\
    display: flex;\
    justify-content: center;\
\}\
\
nav ul li \{\
    margin: 0 1rem;\
\}\
\
nav a \{\
    color: #fff;\
    text-decoration: none;\
    font-size: 1.1rem;\
    letter-spacing: 1px;\
    transition: color 0.3s;\
\}\
\
nav a:hover \{\
    color: #ff4081;\
\}\
\
main \{\
    padding: 2rem 1rem;\
    text-align: center;\
    box-sizing: border-box;\
\}\
\
footer \{\
    background-color: #222;\
    color: #fff;\
    text-align: center;\
    padding: 1rem;\
    position: fixed;\
    width: 100%;\
    bottom: 0;\
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);\
\}\
\
/* \uc0\u1057 \u1090 \u1080 \u1083 \u1100  \u1076 \u1083 \u1103  \u1089 \u1077 \u1082 \u1094 \u1080 \u1080  \u1087 \u1088 \u1086 \u1077 \u1082 \u1090 \u1086 \u1074  */\
.projects \{\
    display: grid;\
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\
    gap: 1rem;\
\}\
\
.projects article \{\
    background: #fff;\
    margin: 1rem;\
    padding: 1rem;\
    border: 2px solid #ff4081;\
    border-radius: 8px;\
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\
    transition: transform 0.3s;\
\}\
\
.projects article:hover \{\
    transform: scale(1.05);\
\}\
\
/* \uc0\u1043 \u1072 \u1083 \u1077 \u1088 \u1077 \u1103  \u1089 \u1090 \u1080 \u1083 \u1077 \u1081  */\
.gallery \{\
    display: grid;\
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\
    gap: 1rem;\
\}\
\
.gallery figure \{\
    background-color: #fff;\
    margin: 0;\
    padding: 1rem;\
    border: 2px solid #ff4081;\
    border-radius: 8px;\
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\
    transition: transform 0.3s;\
\}\
\
.gallery img \{\
    width: 100%;\
    height: auto;\
    border-radius: 8px;\
\}\
\
.gallery figure:hover \{\
    transform: scale(1.05);\
\}\
\
figcaption \{\
    margin-top: 0.5rem;\
    font-style: italic;\
    color: #666;\
\}\
\
/* \uc0\u1056 \u1077 \u1089 \u1087 \u1086 \u1085 \u1089 \u1080 \u1074 \u1085 \u1099 \u1081  \u1076 \u1080 \u1079 \u1072 \u1081 \u1085  */\
@media (max-width: 768px) \{\
    nav ul \{\
        flex-direction: column;\
    \}\
\
    nav ul li \{\
        margin: 0.5rem 0;\
    \}\
\
    .projects,\
    .gallery \{\
        grid-template-columns: 1fr;\
    \}\
\}\
}