:root {     --primary: #0d3b66;     --secondary: #1c77c3;     --accent: #00ffcc;     --text: #ffffff;     --light-bg: rgba(255, 255, 255, 0.1);     --dark-bg: rgba(13, 59, 102, 0.9);     --shadow: 0 4px 20px rgba(0, 0, 0, 0.2);   }    * {     margin: 0;     padding: 0;     box-sizing: border-box;   }    body {     background: linear-gradient(135deg, var(--primary), var(--secondary));     color: var(--text);     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;     line-height: 1.6;     min-height: 100%;     overflow-x: hidden;   }    .container {     max-width: 1200px;     margin: 0 auto;     padding: 0 20px;   }    /* Header & Navigation */   .header {     position: fixed;     top: 0;     left: 0;     width: 100%;     background-color: var(--dark-bg);     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);     z-index: 1000;     padding: 15px 0;     transition: all 0.3s ease;   }    .nav-container {     display: flex;     justify-content: space-between;     align-items: center;   }    .logo {     font-size: 1.5rem;     font-weight: bold;     color: var(--accent);     text-decoration: none;   }    .nav-links {     display: flex;     gap: 30px;   }    .nav-links a {     color: var(--text);     text-decoration: none;     font-weight: 500;     position: relative;     transition: all 0.3s ease;   }    .nav-links a::after {     content: '';     position: absolute;     width: 0;     height: 2px;     bottom: -5px;     left: 0;     background-color: var(--accent);     transition: width 0.3s ease;   }    .nav-links a:hover {     color: var(--accent);   }    .nav-links a:hover::after {     width: 100%;   }    /* Hero Section */   .hero {     padding: 150px 0 100px;     text-align: center;     position: relative;     overflow: hidden;   }    .hero::before {     content: '';     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;     background: linear-gradient(270deg, var(--secondary), var(--primary), var(--secondary));     background-size: 600% 600%;     animation: flow 15s ease infinite;     z-index: -1;     opacity: 0.7;   }    @keyframes flow {     0% { background-position: 0% 50%; }     50% { background-position: 100% 50%; }     100% { background-position: 0% 50%; }   }    .hero h1 {     font-size: 3rem;     margin-bottom: 20px;     text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);   }    .hero p {     font-size: 1.2rem;     max-width: 800px;     margin: 0 auto 30px;   }    .notice {     background-color: rgba(0, 255, 204, 0.2);     padding: 15px;     border-radius: 8px;     margin: 30px auto;     max-width: 600px;     border: 1px solid var(--accent);   }    /* Article Content */   .article-container {     background-color: rgba(13, 59, 102, 0.7);     border-radius: 15px;     padding: 40px;     margin: 50px auto;     box-shadow: var(--shadow);   }    article {     max-width: 900px;     margin: 0 auto;   }    article h2 {     font-size: 2rem;     margin-bottom: 30px;     color: var(--accent);     position: relative;     padding-bottom: 10px;   }    article h2::after {     content: '';     position: absolute;     bottom: 0;     left: 0;     width: 100px;     height: 3px;     background: linear-gradient(90deg, var(--accent), transparent);   }    article h3 {     font-size: 1.5rem;     margin: 30px 0 20px;     color: var(--accent);   }    article p {     margin-bottom: 20px;     font-size: 1.1rem;   }    article strong {     color: var(--accent);   }    /* Code Blocks */   pre {     background-color: rgba(0, 0, 0, 0.3);     border-radius: 8px;     padding: 20px;     margin: 20px 0;     overflow: auto;     border-left: 4px solid var(--accent);   }    code {     font-family: 'Courier New', monospace;     color: var(--accent);   }    /* Tables */   table {     width: 100%;     border-collapse: collapse;     margin: 20px 0;     background-color: rgba(0, 0, 0, 0.2);   }    th, td {     padding: 12px 15px;     text-align: left;     border-bottom: 1px solid rgba(255, 255, 255, 0.1);   }    th {     background-color: rgba(0, 255, 204, 0.1);     color: var(--accent);   }    /* Image Gallery */   .image-gallery {     display: grid;     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));     gap: 20px;     margin: 40px 0;   }    .gallery-item {     position: relative;     border-radius: 10px;     overflow: hidden;     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);     transition: transform 0.3s ease, box-shadow 0.3s ease;   }    .gallery-item:hover {     transform: translateY(-10px);     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);   }    .gallery-item img {     width: 100%;     height: 100%;     object-fit: cover;     transition: transform 0.5s ease;   }    .gallery-item:hover img {     transform: scale(1.05);   }    /* Buttons */   .btn {     display: inline-block;     background-color: var(--accent);     color: var(--primary);     padding: 12px 25px;     border-radius: 5px;     text-decoration: none;     font-weight: bold;     transition: all 0.3s ease;     border: none;     cursor: pointer;     box-shadow: 0 4px 10px rgba(0, 255, 204, 0.3);   }    .btn:hover {     background-color: var(--secondary);     color: white;     transform: translateY(-3px);     box-shadow: 0 6px 15px rgba(0, 255, 204, 0.4);   }    /* Grid Layout */   .grid-container {     display: grid;     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));     gap: 30px;     margin: 40px 0;   }    .grid-item {     background-color: var(--light-bg);     padding: 30px;     border-radius: 10px;     transition: all 0.3s ease;   }    .grid-item:hover {     transform: translateY(-10px);     box-shadow: var(--shadow);   }    /* Footer */   .footer {     background-color: var(--dark-bg);     padding: 50px 0 20px;     text-align: center;   }    .footer-links {     display: flex;     justify-content: center;     gap: 30px;     margin-bottom: 30px;   }    .footer-links a {     color: var(--text);     text-decoration: none;     transition: color 0.3s ease;   }    .footer-links a:hover {     color: var(--accent);   }    .copyright {     color: rgba(255, 255, 255, 0.6);     font-size: 0.9rem;   }    /* Responsive Design */   @media (max-width: 768px) {     .nav-container {       flex-direction: column;       gap: 20px;     }      .nav-links {       flex-direction: column;       gap: 15px;       align-items: center;     }      .hero h1 {       font-size: 2.2rem;     }      .article-container {       padding: 30px 20px;     }      .grid-container {       grid-template-columns: 1fr;     }   }