:root { --primary-color: #FFD700; --secondary-color: #DC143C; --text-color-light: #f0f0f0; --text-color-dark: #333; --bg-dark: #1a1a1a; --bg-light: #ffffff; --link-hover-color: var(--primary-color); } body { font-family: 'Arial', sans-serif; margin: 0; line-height: 1.6; color: var(--text-color-dark); } .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; } .site-header { background-color: var(--bg-dark); color: var(--text-color-light); padding: 15px 0; border-bottom: 3px solid var(--primary-color); position: relative; z-index: 1000; } .site-header .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .site-header .logo { font-family: 'Impact', sans-serif; font-size: 32px; font-weight: bold; color: var(--primary-color); text-decoration: none; text-transform: uppercase; letter-spacing: 1px; padding: 5px 0; } .site-header .logo:hover { color: var(--secondary-color); } .hamburger-menu { display: none; background: none; border: none; color: var(--primary-color); font-size: 30px; cursor: pointer; padding: 5px; line-height: 1; } .main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 25px; } .main-nav a { color: var(--text-color-light); text-decoration: none; font-weight: bold; font-size: 16px; padding: 10px 0; transition: color 0.3s ease, border-bottom 0.3s ease; position: relative; } .main-nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: width 0.3s ease; } .main-nav a:hover::after, .main-nav a.active::after { width: 100%; } .main-nav a:hover, .main-nav a.active { color: var(--primary-color); } .site-footer { background-color: var(--bg-dark); color: var(--text-color-light); padding: 40px 0 20px; border-top: 3px solid var(--primary-color); } .site-footer .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 30px; } .site-footer .footer-col h3 { color: var(--primary-color); font-size: 20px; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.5px; } .site-footer .footer-col p, .site-footer .footer-col ul { font-size: 15px; line-height: 1.8; margin: 0; padding: 0; } .site-footer .footer-col a { color: var(--text-color-light); text-decoration: none; transition: color 0.3s ease; } .site-footer .footer-col a:hover { color: var(--primary-color); } .site-footer .footer-nav ul { list-style: none; } .site-footer .footer-bottom { text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 20px; } .site-footer .copyright { font-size: 14px; color: rgba(255, 255, 255, 0.7); } .site-footer .footer-logo { font-family: 'Impact', sans-serif; font-size: 28px; font-weight: bold; color: var(--primary-color); text-decoration: none; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 15px; } @media (max-width: 992px) { .main-nav ul { gap: 15px; } } @media (max-width: 768px) { .site-header .container { flex-direction: row; justify-content: space-between; align-items: center; } .hamburger-menu { display: block; } .main-nav { display: none; width: 100%; order: 3; background-color: var(--bg-dark); border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 10px 0; } .main-nav.active { display: block; } .main-nav ul { flex-direction: column; text-align: center; gap: 0; } .main-nav li { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .main-nav li:last-child { border-bottom: none; } .main-nav a { display: block; padding: 15px 0; } .site-footer .footer-grid { grid-template-columns: 1fr; text-align: center; } .site-footer .footer-logo { margin-left: auto; margin-right: auto; } } @media (max-width: 480px) { .site-header .logo { font-size: 28px; } .hamburger-menu { font-size: 28px; } .site-footer .footer-col h3 { font-size: 18px; } .site-footer .footer-col p, .site-footer .footer-col ul { font-size: 14px; } }