@font-face {
    font-family: 'Garamond';
    font-style: normal;
    font-weight: normal;
    src: local('Garamond'), url('garamond_[allfont.ru].woff') format('woff');
    }

body {
    font-family: 'Garamond', serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f5f5f5;
    color: #333;
}

.heading-wish {
    font-family: 'Garamond', serif;
    color: #00ff00;
    font-size: 100px;
    font-weight: 500;
}

.signature {
    font-size: 100px;
    font-weight: 500;
    letter-spacing: 3.65px;
    float: right;
      font-family: 'Garamond', serif;
      position:relative;
      color:#274e13;
    
}

.signature-subtitle{
        font-size: 45px;
    font-weight: 500;
    letter-spacing: 3.65px;
    float: right;
      font-family: 'Garamond', serif;
      color:#274e13;
}

/* Section background and animation */
section {
    background-image: 
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="100" cy="100" r="8" fill="%2300ff00"/><line x1="100" y1="100" x2="140" y2="60" stroke="%2300ff00" stroke-width="2"/><line x1="100" y1="100" x2="60" y2="60" stroke="%2300ff00" stroke-width="2"/><line x1="100" y1="100" x2="140" y2="140" stroke="%2300ff00" stroke-width="2"/><line x1="100" y1="100" x2="60" y2="140" stroke="%2300ff00" stroke-width="2"/><line x1="100" y1="100" x2="100" y2="40" stroke="%2300ff00" stroke-width="2"/><line x1="100" y1="100" x2="100" y2="160" stroke="%2300ff00" stroke-width="2"/><circle cx="140" cy="60" r="3" fill="%2300ff00"/><circle cx="60" cy="60" r="3" fill="%2300ff00"/><circle cx="140" cy="140" r="3" fill="%2300ff00"/><circle cx="60" cy="140" r="3" fill="%2300ff00"/><circle cx="100" cy="40" r="3" fill="%2300ff00"/><circle cx="100" cy="160" r="3" fill="%2300ff00"/></svg>'),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="100" cy="100" r="5" fill="%2300ff00"/><circle cx="120" cy="80" r="4" fill="%2300ff00"/><circle cx="80" cy="80" r="4" fill="%2300ff00"/><circle cx="130" cy="120" r="4" fill="%2300ff00"/><circle cx="70" cy="120" r="4" fill="%2300ff00"/><circle cx="100" cy="60" r="3" fill="%2300ff00"/><circle cx="100" cy="140" r="3" fill="%2300ff00"/></svg>'),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="100" cy="100" r="6" fill="%2300ff00"/><circle cx="110" cy="90" r="4" fill="%2300ff00"/><circle cx="90" cy="90" r="4" fill="%2300ff00"/><circle cx="110" cy="110" r="4" fill="%2300ff00"/><circle cx="90" cy="110" r="4" fill="%2300ff00"/><circle cx="120" cy="100" r="3" fill="%2300ff00"/><circle cx="80" cy="100" r="3" fill="%2300ff00"/><circle cx="100" cy="120" r="3" fill="%2300ff00"/></svg>'),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="100" cy="100" r="8" fill="%2300ff00"/><line x1="100" y1="100" x2="150" y2="50" stroke="%2300ff00" stroke-width="2"/><line x1="100" y1="100" x2="50" y2="50" stroke="%2300ff00" stroke-width="2"/><line x1="100" y1="100" x2="150" y2="150" stroke="%2300ff00" stroke-width="2"/><line x1="100" y1="100" x2="50" y2="150" stroke="%2300ff00" stroke-width="2"/><circle cx="150" cy="50" r="3" fill="%2300ff00"/><circle cx="50" cy="50" r="3" fill="%2300ff00"/><circle cx="150" cy="150" r="3" fill="%2300ff00"/><circle cx="50" cy="150" r="3" fill="%2300ff00"/></svg>'),
        linear-gradient(135deg, rgba(39, 78, 19, 0.05) 0%, rgba(0, 255, 0, 0.05) 100%);
    background-repeat: no-repeat;

    background-position: 
        10% 15%, 
        85% 25%, 
        20% 70%, 
        50% 40%, 
        0 0;
    background-attachment: fixed;
    background-size: 100px 100px, 90px 90px, 110px 110px, 105px 105px, 100% 100%;
    animation: randomFloat 8s ease-in-out infinite, fadeInUp 1.2s ease-out;
    border-radius: 15px;
    height: 100vh;
}

/* Fade-in and slide-up animation on page load */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Gradient shift animation */
@keyframes randomFloat {
    0%, 100% {
        background-position: 
            10% 15%, 
            85% 25%, 
            20% 70%, 
            75% 80%, 
            50% 40%, 
            0 0;
        filter: brightness(1);
    }
    25% {
        background-position: 
            12% 18%, 
            83% 28%, 
            22% 68%, 
            73% 78%, 
            52% 42%, 
            0 0;
        filter: brightness(1.05);
    }
    50% {
        background-position: 
            8% 12%, 
            87% 22%, 
            18% 72%, 
            77% 82%, 
            48% 38%, 
            0 0;
        filter: brightness(1.1);
    }
    75% {
        background-position: 
            15% 20%, 
            80% 30%, 
            25% 65%, 
            70% 75%, 
            55% 45%, 
            0 0;
        filter: brightness(1.05);
    }
}

/* Heading animation */

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* Signature animations */
.signature {
    animation: slideInRight 1.2s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.signature-subtitle {
    animation: slideInRight 1.4s ease-out;
}

/* Mobile Responsive Design */
@media (max-width: 1024px) {
    section {
        height: auto;
        min-height: 100vh;
        padding: 30px 0;
    }

    .heading-wish {
        font-size: 60px;
        margin: 30px 0;
    }

    .signature {
        font-size: 70px;
        letter-spacing: 3px;
        float: none;
        text-align: center;
        margin: 30px 0;
    }

    .signature-subtitle {
        font-size: 32px;
        letter-spacing: 3px;
        float: none;
        text-align: center;
    }

    .container {
        padding: 0 20px;
    }

    .row {
        margin-top: 15px !important;
        padding-top: 15px !important;
    }
}

@media (max-width: 768px) {
    section {
        height: auto;
        min-height: 100vh;
        padding: 20px 0;
    }

    .heading-wish {
        font-size: 40px;
        margin: 20px 0;
    }

    .signature {
        font-size: 48px;
        letter-spacing: 2px;
        float: none;
        text-align: center;
        margin: 20px 0;
    }

    .signature-subtitle {
        font-size: 24px;
        letter-spacing: 2px;
        float: none;
        text-align: center;
    }

    .container {
        padding: 0 15px;
    }

    .row {
        margin-top: 10px !important;
        padding-top: 10px !important;
    }
}