/*
Theme Name: Mad Lad Dad Retro Child Theme
Description: Custom retro 80s/90s styling for Mad Lad Dad - Retro Restoration
Version: 2.2.6
Author: Mad Lad Dad
Template: twentytwentyfive
*/

/* ============================================
   RETRO COLOR PALETTE
   ============================================ */
:root {
    /* Primary Retro Colors */
    --retro-orange: #FF6B35;
    --warm-orange: #F7931E;
    --retro-teal: #4ECDC4;
    --deep-teal: #45B7D1;
    --vintage-yellow: #FFD93D;

    /* Supporting Colors */
    --cream: #FFF8E7;
    --dark-gray: #2C3E50;
    --warm-black: #1A1A1A;
    --neon-pink: #FF006E;
    --electric-blue: #00D9FF;

    /* Gradients */
    --retro-gradient: linear-gradient(135deg, var(--retro-orange) 0%, var(--warm-orange) 100%);
    --teal-gradient: linear-gradient(135deg, var(--retro-teal) 0%, var(--deep-teal) 100%);
    --sunset-gradient: linear-gradient(135deg, var(--neon-pink) 0%, var(--retro-orange) 50%, var(--vintage-yellow) 100%);
}

/* ============================================
   GLOBAL STYLES
   ============================================ */
body {
    background-color: var(--cream);
    color: var(--dark-gray);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

p {
    margin-bottom: 1.2em;
    max-width: 100%;
    /* Full width as requested */
}

/* Retro CRT Filter Effect */
body::before {
    /* Scanlines & RGB Split */
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background:
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    z-index: 9998;
    background-size: 100% 3px, 4px 100%;
    pointer-events: none;
    animation: scanline 10s linear infinite;
}

body::after {
    /* Vignette, Glow & subtle flicker */
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: radial-gradient(circle, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 9999;
    pointer-events: none;
    mix-blend-mode: multiply;
    animation: flicker 0.15s infinite;
    opacity: 0.9;
}

@keyframes flicker {
    0% {
        opacity: 0.92;
    }

    50% {
        opacity: 0.95;
    }

    100% {
        opacity: 0.92;
    }
}

@keyframes scanline {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 100%;
    }
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--warm-black);
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 0.75em;
}

h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    text-shadow: 2px 2px 0 var(--retro-orange);
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    text-shadow: 1px 1px 0 var(--retro-teal);
}

h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    text-shadow: 1px 1px 0 var(--retro-orange);
}

h4 {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
}

h5,
h6 {
    font-size: 1rem;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.site-header {
    background: var(--warm-black);
    border-bottom: 4px solid var(--retro-orange);
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
}

.site-logo img {
    max-height: 80px;
    filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.5));
    transition: transform 0.3s ease;
}

.site-logo img:hover {
    transform: scale(1.05) rotate(-2deg);
}

/* Navigation Links */
.site-header a {
    color: var(--cream);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    position: relative;
}

.site-header a:hover {
    color: var(--retro-orange);
    text-shadow: 0 0 10px var(--retro-orange);
}

.site-header a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--retro-gradient);
    transition: width 0.3s ease;
}

.site-header a:hover::after {
    width: 100%;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section,
.hero,
.wp-block-cover {
    position: relative;
    min-height: 400px;
    background: var(--sunset-gradient);
    overflow: hidden;
}

/* Hero with Banner Background */
.hero-section.has-banner-bg,
.hero.has-banner-bg {
    background-image: url('https://madladdad.com/wp-content/uploads/2025/12/youtube_banner_2560x1440-1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-section::before,
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.7) 0%, rgba(78, 205, 196, 0.7) 100%);
    z-index: 1;
}

.hero-section>*,
.hero>* {
    position: relative;
    z-index: 2;
}

.hero-title,
.hero .title,
.hero h1 {
    color: white;
    text-shadow:
        3px 3px 0 var(--warm-black),
        0 0 20px rgba(255, 107, 53, 0.8);
    animation: neonPulse 2s ease-in-out infinite alternate;
}

@keyframes neonPulse {
    from {
        text-shadow:
            3px 3px 0 var(--warm-black),
            0 0 20px rgba(255, 107, 53, 0.8);
    }

    to {
        text-shadow:
            3px 3px 0 var(--warm-black),
            0 0 30px rgba(255, 107, 53, 1),
            0 0 40px rgba(255, 107, 53, 0.6);
    }
}

/* ============================================
   BUTTONS & CTAs
   ============================================ */
.wp-block-button__link,
.button,
.btn,
a.button,
button,
input[type="submit"] {
    background: var(--retro-gradient);
    color: white;
    border: 2px solid var(--warm-black);
    border-radius: 6px;
    padding: 12px 30px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow:
        4px 4px 0 var(--warm-black),
        0 0 15px rgba(255, 107, 53, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.wp-block-button__link:hover,
.button:hover,
.btn:hover,
button:hover,
input[type="submit"]:hover {
    transform: translate(-2px, -2px);
    box-shadow:
        6px 6px 0 var(--warm-black),
        0 0 20px rgba(255, 107, 53, 0.5);
}

.wp-block-button__link:active,
.button:active,
.btn:active,
button:active {
    transform: translate(2px, 2px);
    box-shadow:
        3px 3px 0 var(--warm-black),
        0 0 15px rgba(255, 107, 53, 0.3);
}

/* Secondary Button Style (Teal) */
.wp-block-button.is-style-outline .wp-block-button__link,
.button-secondary {
    background: var(--teal-gradient);
}

/* ============================================
   CARDS & CONTENT BLOCKS
   ============================================ */
.video-card,
.product-card,
.wp-block-group,
.category-card {
    background: white;
    border: 3px solid var(--warm-black);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow:
        5px 5px 0 var(--warm-black),
        0 0 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.video-card::before,
.product-card::before,
.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.2), transparent);
    transition: left 0.5s ease;
}

.video-card:hover::before,
.product-card:hover::before,
.category-card:hover::before {
    left: 100%;
}

.video-card:hover,
.product-card:hover,
.category-card:hover {
    transform: translate(-3px, -3px);
    box-shadow:
        8px 8px 0 var(--warm-black),
        0 0 30px rgba(255, 107, 53, 0.2);
}

/* Card Headers with Retro Accent */
.video-card h3,
.product-card h3,
.category-card h3 {
    color: var(--warm-black);
    border-bottom: 3px solid var(--retro-orange);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* ============================================
   RETRO TV/MONITOR FRAME EFFECT
   ============================================ */
.retro-frame {
    border: 8px solid var(--warm-black);
    border-radius: 20px;
    padding: 15px;
    background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.5),
        0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
}

.retro-frame::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    border: 2px solid rgba(78, 205, 196, 0.3);
    border-radius: 12px;
    pointer-events: none;
}

/* ============================================
   CATEGORY GRID
   ============================================ */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    padding: 40px 0;
}

.category-card {
    text-align: center;
    background: var(--cream);
}

.category-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: var(--retro-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.4);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: var(--warm-black);
    color: var(--cream);
    border-top: 4px solid var(--retro-orange);
    padding: 40px 0 20px;
}

.site-footer a {
    color: var(--retro-teal);
    transition: all 0.3s ease;
}

.site-footer a:hover {
    color: var(--retro-orange);
    text-shadow: 0 0 10px var(--retro-orange);
}

/* Social Icons */
.social-icons a {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: var(--retro-gradient);
    border-radius: 50%;
    margin: 0 10px;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.3);
}

.social-icons a:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 0 25px rgba(255, 107, 53, 0.6);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.floating {
    animation: float 3s ease-in-out infinite;
}

@keyframes glitch {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
    .hero-section {
        min-height: 400px;
    }

    .category-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .video-card,
    .product-card,
    .category-card {
        box-shadow:
            4px 4px 0 var(--warm-black),
            0 0 20px rgba(0, 0, 0, 0.1);
    }

    .video-card:hover,
    .product-card:hover,
    .category-card:hover {
        box-shadow:
            6px 6px 0 var(--warm-black),
            0 0 30px rgba(255, 107, 53, 0.3);
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.retro-orange-bg {
    background: var(--retro-gradient);
}

.retro-teal-bg {
    background: var(--teal-gradient);
}

.text-shadow-retro {
    text-shadow: 3px 3px 0 var(--warm-black);
}

.glow-orange {
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
}

.glow-teal {
    box-shadow: 0 0 20px rgba(78, 205, 196, 0.5);
}

.border-retro {
    border: 4px solid var(--warm-black);
}

/* ============================================
   IMAGE & MEDIA OPTIMIZATION
   ============================================ */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

.site-logo img {
    max-width: 150px;
    width: auto;
}

/* Product Images */
.woocommerce img,
.woocommerce-page img {
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.woocommerce ul.products li.product:hover img,
.woocommerce-page ul.products li.product:hover img {
    transform: scale(1.05);
}

/* Product Grid Improvements */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    list-style: none;
    padding: 0;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: white;
    border: 3px solid var(--warm-black);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 5px 5px 0 var(--warm-black);
    transition: all 0.3s ease;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--warm-black);
}

/* Product Titles */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: var(--warm-black);
}

/* Product Prices */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
    color: var(--retro-orange);
    font-weight: 700;
    font-size: 1.2rem;
}

/* Add to Cart Buttons */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

/* Hero Section Content Spacing */
.hero-section .wp-block-group,
.wp-block-cover .wp-block-group {
    padding: 40px 20px;
}

.hero-section h1,
.wp-block-cover h1 {
    margin-bottom: 20px;
}

.hero-section p,
.wp-block-cover p {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 60ch;
    margin: 0 auto 25px;
}

/* Content Width Constraints */
/* ============================================
   CONTAINER & LAYOUT
   ============================================ */
/* ============================================
   CONTAINER & LAYOUT
   ============================================ */
.container,
.wp-block-group__inner-container,
.site-content {
    max-width: 90%;
    /* User requested ~10% margins (5% each side) */
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    width: 90%;
}

/* Remove paragraph width limit */
p {
    max-width: 100%;
    margin-bottom: 1.2em;
}

/* ============================================
   RETRO MACOS WINDOW STYLING
   ============================================ */
main {
    max-width: 90%;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    border: 2px solid #000;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
    border-radius: 6px 6px 0 0;
    position: relative;
    padding: 40px 20px 20px;
    /* Top padding for title bar */
    isolation: isolate;
    /* Create new stacking context */
}

/* Striped Title Bar Background */
main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    background:
        /* Stripe Pattern */
        repeating-linear-gradient(0deg,
            #ccc,
            #ccc 2px,
            #fff 2px,
            #fff 4px);
    border-bottom: 2px solid #000;
    border-radius: 4px 4px 0 0;
    z-index: 1;
}

/* Title Text & Buttons overlay */
main::after {
    content: 'Greetings Stranger';
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 20px;
    z-index: 2;

    /* Typography */
    font-family: 'Geneva', sans-serif;
    /* Classic Mac Font lookalike */
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    color: #000;

    /* Title Background (White box behind text) */
    background:
        /* White background for text */
        linear-gradient(#fff, #fff) no-repeat center/140px 100%,

        /* Close Button (Left) - Box with inner square */
        linear-gradient(#fff, #fff) no-repeat 8px center/14px 14px,
        /* White bg */
        linear-gradient(#000, #000) no-repeat 8px center/14px 14px,
        /* Border (via shadow/outline simulation?) Better to stick to simple squares */

        /* Zoom Button (Right) */
        linear-gradient(#fff, #fff) no-repeat calc(100% - 8px) center/14px 14px;

    /* Draw borders for buttons using box-shadow would be cleaner, but ::after allows text. 
       Let's keep it simple: Text is centered with white bg. 
       We will add buttons as separate elements if possible, but we can't edit HTML easily here.
       So we'll use background images to draw the buttons on the ::after layer.
    */
    background: #fff;
    /* Fallback */
    /* Advanced multi-background for Buttons + Text BG */
    background:
        /* Text Background (Center) */
        linear-gradient(#fff, #fff) center/150px 100% no-repeat,

        /* Close Box (Left): White sq with Black Border */
        linear-gradient(#fff, #fff) left 10px center/12px 12px no-repeat,
        linear-gradient(#000, #000) left 9px center/14px 14px no-repeat,

        /* Maximize Box (Right): White sq with Black Border */
        linear-gradient(#fff, #fff) right 10px center/12px 12px no-repeat,
        linear-gradient(#000, #000) right 9px center/14px 14px no-repeat;
}

/* Fix Missing Grid Layout */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

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

.grid.about {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

/* WooCommerce Category & Product Grid Fixes */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    min-height: auto;
    overflow: visible;
    width: 100%;
}

.woocommerce ul.products li.product h2,
.woocommerce-page ul.products li.product h2 {
    font-size: 1.1rem;
    word-wrap: break-word;
    line-height: 1.3;
}

.woocommerce ul.products li.product .price {
    font-size: 1.1rem;
}

/* Ensure images fill the card */
.woocommerce ul.products li.product img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    margin-bottom: 10px;
}



/* Improve Readability for Long Content */
.entry-content,
.page-content {
    font-size: 1rem;
    line-height: 1.7;
}

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

/* Category Links Styling */
.product-categories a,
.woocommerce-breadcrumb a {
    color: var(--retro-orange);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.product-categories a:hover,
.woocommerce-breadcrumb a:hover {
    color: var(--deep-teal);
    text-shadow: 0 0 5px rgba(78, 205, 196, 0.3);
}

/* Responsive Image Improvements */
@media (max-width: 768px) {
    .site-logo img {
        max-width: 100px;
    }

    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
    }

    .hero-section .wp-block-group,
    .wp-block-cover .wp-block-group {
        padding: 30px 15px;
    }
}

/* ============================================
   GALAGA HEADER ANIMATION
   ============================================ */
/* Ensure Header Image (Logo) is Above Animation */
.site-logo,
.site-header img,
.custom-logo-link {
    position: relative;
    z-index: 20 !important;
}

.galaga-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 15;
    /* Above content (typically auto/1), Below Header (20) */
    pointer-events: none;
    overflow: hidden;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    /* Faster fade */
}

.galaga-ship {
    position: absolute;
    top: 55%;
    margin-top: -18px;
    left: 0;
    width: 36px;
    height: 36px;
    background-size: contain;
    background-repeat: no-repeat;
    animation: shipMove 8s linear infinite;
    transform-origin: center;
    image-rendering: pixelated;
}

/* Rocket Propulsion Effect */
.galaga-ship::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 10px;
    width: 16px;
    height: 16px;
    background: radial-gradient(circle, #ffe600 20%, #ff0000 80%, transparent 100%);
    opacity: 0.8;
    filter: blur(2px);
    animation: rocketThrust 0.1s alternate infinite;
    transform: rotate(180deg);
}

@keyframes rocketThrust {
    0% {
        transform: rotate(180deg) scale(0.8);
        opacity: 0.6;
    }

    100% {
        transform: rotate(180deg) scale(1.2);
        opacity: 1;
    }
}

.galaga-alien {
    position: absolute;
    top: 55%;
    margin-top: -18px;
    left: 0;
    width: 36px;
    height: 36px;
    background-size: contain;
    background-repeat: no-repeat;
    animation: alienMove 8s linear infinite;
    image-rendering: pixelated;
}

.galaga-bullet {
    position: absolute;
    top: 55%;
    margin-top: -3px;
    width: 10px;
    height: 6px;
    background: #FF0000;
    box-shadow: 0 0 5px #FF0000;
    opacity: 0;
    animation: bulletFire 8s linear infinite;
}

@keyframes shipMove {
    0% {
        opacity: 0;
        transform: translateX(100px) rotate(90deg);
    }

    10% {
        opacity: 1;
        transform: translateX(100px) rotate(90deg);
    }

    20% {
        opacity: 1;
        transform: translateX(140px) rotate(90deg);
    }

    70% {
        opacity: 1;
        transform: translateX(80vw) rotate(90deg);
    }

    80% {
        opacity: 1;
        transform: translateX(85vw) rotate(90deg);
    }

    100% {
        opacity: 1;
        transform: translateX(110vw) rotate(90deg);
    }
}

@keyframes alienMove {
    0% {
        left: 140px;
        opacity: 0;
        transform: translateY(0);
    }

    5% {
        left: 140px;
        opacity: 1;
    }

    20% {
        transform: translateY(20px);
    }

    40% {
        transform: translateY(-20px);
    }

    70% {
        left: 85vw;
        opacity: 1;
        transform: translateY(0);
    }

    75% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    80% {
        opacity: 0;
        transform: scale(3) rotate(45deg);
    }

    100% {
        left: 85vw;
        opacity: 0;
    }
}

@keyframes bulletFire {
    0% {
        opacity: 0;
        transform: translateX(0);
    }

    70% {
        opacity: 0;
        left: 0;
        transform: translateX(82vw);
    }

    72% {
        opacity: 1;
        left: 0;
        transform: translateX(82vw);
    }

    78% {
        opacity: 1;
        left: 0;
        transform: translateX(88vw);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}