/*
Theme Name: Adamopoulos Modern
Theme URI: https://adamopoulos.net
Author: George Adamopoulos
Author URI: https://adamopoulos.net
Description: A modern, tech-forward WordPress theme with neon aesthetics, dynamic animations, and complete Gutenberg block editor support. Perfect for tech professionals and creative individuals. Features custom color palette, font sizes, and full styling for all WordPress core blocks.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: adamopoulos-modern
Tags: one-column, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, editor-style
*/

:root {
    --neon-green: #00FF9F;
    --electric-blue: #0066FF;
    --deep-purple: #1A0B2E;
    --dark-bg: #0A0A0F;
    --card-bg: #16161D;
    --text-primary: #FFFFFF;
    --text-secondary: #A0A0B0;
    --accent-orange: #FF6B35;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Syne', sans-serif;
    background: var(--dark-bg);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

.background-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 255, 159, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 159, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -1;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}

.glow-orb {
    position: fixed;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
    z-index: -1;
    pointer-events: none;
}

.orb-1 {
    top: -250px;
    right: -100px;
    background: radial-gradient(circle, var(--neon-green), transparent);
    animation: float 8s ease-in-out infinite;
}

.orb-2 {
    bottom: -200px;
    left: -150px;
    background: radial-gradient(circle, var(--electric-blue), transparent);
    animation: float 10s ease-in-out infinite reverse;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(30px, -30px);
    }
}

nav.main-navigation {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 2rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(10, 10, 15, 0.8);
    backdrop-filter: blur(20px);
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    animation: slideDown 0.6s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.site-logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
}

.site-logo::before {
    content: '//';
    color: var(--neon-green);
    margin-right: 0.3rem;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.status-dot {
    width: 8px;
    height: 8px;
    background: var(--neon-green);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 10px var(--neon-green);
    }
    50% {
        opacity: 0.5;
        box-shadow: 0 0 5px var(--neon-green);
    }
}

.site-content {
    padding-top: 120px;
}

.hero {
    max-width: 1400px;
    margin: 0 auto;
    padding: 4rem 3rem;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    animation: fadeInUp 0.8s ease-out 0.3s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: var(--neon-green);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.hero-title {
    font-size: 6rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 2rem;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--text-primary), var(--neon-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    max-width: 800px;
}

.hero-subtitle span {
    color: var(--neon-green);
}

.intro-text {
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 900px;
    margin-bottom: 3rem;
}

.intro-text a {
    color: var(--neon-green);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.intro-text a:hover {
    border-bottom-color: var(--neon-green);
}

.cta-buttons {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.btn {
    padding: 1rem 2rem;
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.btn-primary {
    background: var(--neon-green);
    color: var(--dark-bg);
    border: 2px solid var(--neon-green);
}

.btn-primary:hover {
    background: transparent;
    color: var(--neon-green);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 255, 159, 0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    border-color: var(--text-primary);
    transform: translateY(-2px);
}

.content-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 6rem 3rem;
    animation: fadeInUp 0.8s ease-out both;
}

.section-header {
    margin-bottom: 4rem;
}

.section-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--electric-blue);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
}

.section-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.section-description {
    font-size: 1.2rem;
    color: var(--text-secondary);
    max-width: 700px;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.card {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 2.5rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--neon-green), var(--electric-blue));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 255, 159, 0.3);
    box-shadow: 0 20px 60px rgba(0, 255, 159, 0.1);
}

.card:hover::before {
    transform: scaleX(1);
}

.card-icon {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    display: block;
}

.card-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.card-description {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.card-link {
    color: var(--neon-green);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.3s ease;
}

.card-link:hover {
    gap: 1rem;
}

.card-link::after {
    content: '→';
    font-size: 1.2rem;
}

.profile-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.profile-image-container {
    position: relative;
}

.profile-image-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid rgba(0, 255, 159, 0.3);
    box-shadow: 0 20px 60px rgba(0, 255, 159, 0.2);
    transition: transform 0.4s ease;
}

.profile-image-wrapper:hover {
    transform: scale(1.02);
}

.profile-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.floating-badge {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: var(--neon-green);
    color: var(--dark-bg);
    padding: 1rem 1.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 10px 30px rgba(0, 255, 159, 0.5);
    animation: floatBadge 3s ease-in-out infinite;
}

@keyframes floatBadge {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.profile-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.profile-content p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.8;
}

.highlight-box {
    background: rgba(0, 255, 159, 0.1);
    border-left: 3px solid var(--neon-green);
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.social-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.social-link {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: rgba(0, 255, 159, 0.05);
    border-color: var(--neon-green);
    transform: translateX(8px);
}

.social-icon {
    font-size: 1.8rem;
}

.social-info {
    flex: 1;
}

.social-name {
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.social-handle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.site-footer {
    max-width: 1400px;
    margin: 0 auto;
    padding: 4rem 3rem;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-content {
    margin-bottom: 2rem;
}

.footer-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.email-link {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    color: var(--neon-green);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.email-link:hover {
    transform: scale(1.05);
    text-shadow: 0 0 20px var(--neon-green);
}

.footer-note {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 2rem;
}

/* WordPress Content Styles */
.entry-content,
.page-content {
    max-width: 900px;
    margin: 0 auto;
    color: var(--text-secondary);
    line-height: 1.8;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.page-content h1,
.page-content h2,
.page-content h3 {
    color: var(--text-primary);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.entry-content a,
.page-content a {
    color: var(--neon-green);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.entry-content a:hover,
.page-content a:hover {
    border-bottom-color: var(--neon-green);
}

.entry-content p,
.page-content p {
    margin-bottom: 1.5rem;
}

.entry-content img,
.page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Gutenberg Block Styles */

/* Quote Block */
.entry-content .wp-block-quote,
.page-content .wp-block-quote,
.entry-content blockquote,
.page-content blockquote {
    background: rgba(0, 255, 159, 0.1);
    border-left: 3px solid var(--neon-green);
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: 8px;
    color: var(--text-secondary);
}

.entry-content .wp-block-quote cite,
.page-content .wp-block-quote cite {
    color: var(--text-primary);
    font-style: normal;
    font-size: 0.9em;
    margin-top: 1rem;
    display: block;
}

/* Pullquote Block */
.entry-content .wp-block-pullquote,
.page-content .wp-block-pullquote {
    background: rgba(0, 102, 255, 0.1);
    border: 2px solid var(--electric-blue);
    padding: 2.5rem;
    margin: 2.5rem 0;
    border-radius: 12px;
    text-align: center;
}

.entry-content .wp-block-pullquote blockquote,
.page-content .wp-block-pullquote blockquote {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

.entry-content .wp-block-pullquote p,
.page-content .wp-block-pullquote p {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.entry-content .wp-block-pullquote cite,
.page-content .wp-block-pullquote cite {
    color: var(--electric-blue);
    font-size: 1rem;
}

/* Code Blocks */
.entry-content code,
.page-content code {
    background: var(--card-bg);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
    color: var(--neon-green);
}

.entry-content .wp-block-code,
.page-content .wp-block-code {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
    overflow-x: auto;
}

.entry-content .wp-block-code code,
.page-content .wp-block-code code {
    background: transparent;
    padding: 0;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.entry-content pre,
.page-content pre {
    font-family: 'JetBrains Mono', monospace;
    overflow-x: auto;
}

/* Preformatted Block */
.entry-content .wp-block-preformatted,
.page-content .wp-block-preformatted {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    overflow-x: auto;
}

/* Lists */
.entry-content ul,
.entry-content ol,
.page-content ul,
.page-content ol {
    margin: 1.5rem 0 1.5rem 2rem;
    color: var(--text-secondary);
}

.entry-content li,
.page-content li {
    margin-bottom: 0.5rem;
}

/* Table Block */
.entry-content .wp-block-table,
.page-content .wp-block-table {
    margin: 2rem 0;
    overflow-x: auto;
}

.entry-content .wp-block-table table,
.page-content .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
}

.entry-content .wp-block-table th,
.page-content .wp-block-table th {
    background: var(--card-bg);
    color: var(--neon-green);
    font-weight: 700;
    text-align: left;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.entry-content .wp-block-table td,
.page-content .wp-block-table td {
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
.page-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background: rgba(0, 255, 159, 0.05);
}

/* Image Block */
.entry-content .wp-block-image,
.page-content .wp-block-image {
    margin: 2rem 0;
}

.entry-content .wp-block-image img,
.page-content .wp-block-image img {
    border-radius: 12px;
}

.entry-content .wp-block-image figcaption,
.page-content .wp-block-image figcaption {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 0.5rem;
    text-align: center;
    font-style: italic;
}

/* Gallery Block */
.entry-content .wp-block-gallery,
.page-content .wp-block-gallery {
    margin: 2rem 0;
}

.entry-content .wp-block-gallery .blocks-gallery-item img,
.page-content .wp-block-gallery .blocks-gallery-item img {
    border-radius: 8px;
}

/* Cover Block */
.entry-content .wp-block-cover,
.page-content .wp-block-cover {
    border-radius: 12px;
    overflow: hidden;
    margin: 2rem 0;
    min-height: 400px;
}

/* Button Block */
.entry-content .wp-block-button .wp-block-button__link,
.page-content .wp-block-button .wp-block-button__link {
    background: var(--neon-green);
    color: var(--dark-bg);
    border: 2px solid var(--neon-green);
    padding: 1rem 2rem;
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: inline-block;
}

.entry-content .wp-block-button .wp-block-button__link:hover,
.page-content .wp-block-button .wp-block-button__link:hover {
    background: transparent;
    color: var(--neon-green);
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.page-content .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover,
.page-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
    border-color: var(--neon-green);
    color: var(--neon-green);
}

/* Separator Block */
.entry-content .wp-block-separator,
.page-content .wp-block-separator {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 3rem auto;
}

.entry-content .wp-block-separator.is-style-wide,
.page-content .wp-block-separator.is-style-wide {
    border-top-width: 2px;
}

/* Columns Block */
.entry-content .wp-block-columns,
.page-content .wp-block-columns {
    margin-bottom: 2rem;
}

.entry-content .wp-block-column,
.page-content .wp-block-column {
    margin-bottom: 1rem;
}

/* Group Block */
.entry-content .wp-block-group,
.page-content .wp-block-group {
    margin: 2rem 0;
}

.entry-content .wp-block-group.has-background,
.page-content .wp-block-group.has-background {
    padding: 2rem;
    border-radius: 12px;
}

/* File Block */
.entry-content .wp-block-file,
.page-content .wp-block-file {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin: 2rem 0;
}

.entry-content .wp-block-file a,
.page-content .wp-block-file a {
    color: var(--neon-green);
}

.entry-content .wp-block-file__button,
.page-content .wp-block-file__button {
    background: var(--neon-green);
    color: var(--dark-bg);
    border-radius: 4px;
    padding: 0.5rem 1rem;
    font-weight: 600;
}

/* Video/Audio Blocks */
.entry-content .wp-block-video,
.entry-content .wp-block-audio,
.page-content .wp-block-video,
.page-content .wp-block-audio {
    margin: 2rem 0;
}

.entry-content .wp-block-video video,
.page-content .wp-block-video video {
    border-radius: 12px;
}

/* Embed Blocks */
.entry-content .wp-block-embed,
.page-content .wp-block-embed {
    margin: 2rem 0;
}

.entry-content .wp-block-embed__wrapper,
.page-content .wp-block-embed__wrapper {
    border-radius: 12px;
    overflow: hidden;
}

/* Verse Block */
.entry-content .wp-block-verse,
.page-content .wp-block-verse {
    background: var(--card-bg);
    border-left: 3px solid var(--electric-blue);
    padding: 1.5rem;
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
}

/* Color Classes */
.has-neon-green-color { color: var(--neon-green) !important; }
.has-neon-green-background-color { background-color: var(--neon-green) !important; }
.has-electric-blue-color { color: var(--electric-blue) !important; }
.has-electric-blue-background-color { background-color: var(--electric-blue) !important; }
.has-accent-orange-color { color: var(--accent-orange) !important; }
.has-accent-orange-background-color { background-color: var(--accent-orange) !important; }
.has-dark-bg-color { color: var(--dark-bg) !important; }
.has-dark-bg-background-color { background-color: var(--dark-bg) !important; }
.has-card-bg-color { color: var(--card-bg) !important; }
.has-card-bg-background-color { background-color: var(--card-bg) !important; }
.has-text-primary-color { color: var(--text-primary) !important; }
.has-text-primary-background-color { background-color: var(--text-primary) !important; }
.has-text-secondary-color { color: var(--text-secondary) !important; }
.has-text-secondary-background-color { background-color: var(--text-secondary) !important; }

/* Font Size Classes */
.has-small-font-size { font-size: 14px !important; }
.has-normal-font-size { font-size: 18px !important; }
.has-medium-font-size { font-size: 24px !important; }
.has-large-font-size { font-size: 32px !important; }
.has-huge-font-size { font-size: 48px !important; }

/* Alignment Classes */
.alignleft {
    float: left;
    margin-right: 2rem;
    margin-bottom: 1rem;
}

.alignright {
    float: right;
    margin-left: 2rem;
    margin-bottom: 1rem;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.alignfull {
    max-width: 100%;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Drop Cap */
.has-drop-cap:not(:focus)::first-letter {
    font-size: 5em;
    font-weight: 800;
    line-height: 1;
    margin: 0.05em 0.1em 0 0;
    color: var(--neon-green);
    float: left;
}

/* Responsive Embeds */
.wp-block-embed.is-type-video .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.wp-block-embed.is-type-video .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 1024px) {
    .hero-title {
        font-size: 4rem;
    }

    .hero-subtitle {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 2.5rem;
    }

    .profile-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    nav.main-navigation {
        padding: 1.5rem 1.5rem;
    }

    .hero {
        padding: 2rem 1.5rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .content-section {
        padding: 4rem 1.5rem;
    }

    .cards-grid {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}