:root {
    --rosa-claro: #FFE9EF;
    --rosa-medio: #FFC9D7;
    --rosa-intenso: #FF9CB5;
    --rosa-profundo: #FC809F;
    --verde-oscuro: #002400;
    --verde-bosque: #273B09;
    --verde-oliva: #58641D;
    --verde-suave: #7B904B;
    --verde-claro: #BBCF8D;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

body {
    background: linear-gradient(180deg, var(--rosa-medio), var(--rosa-profundo), var(--rosa-intenso));
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.index {
    background-color: #BBCF8D;
    border-radius: 25px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    max-width: 400px;
    width: 90%;
    animation: fadeIn 0.8s ease-in-out;
}

#index img,
#logo {
    padding: auto;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    object-fit: cover;
    border: 3px solid var(--verde-bosque);
    margin-bottom: 1.5rem;
}

.index h1 {
    color: var(--verde-bosque);
    font-size: 2rem;
    margin-bottom: 1.8rem;
    letter-spacing: 1px;
    font-weight: 600;
}

.index button {
    background-color: var(--verde-bosque);
    color: var(--rosa-claro);
    border: none;
    border-radius: 10px;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.index button:hover {
    background-color: var(--verde-oliva);
    transform: scale(1.05);
}

.index button a {
    color: var(--rosa-claro);
    text-decoration: none;
    font-weight: 500;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .index {
        padding: 2rem 1.5rem;
    }

    .index h1 {
        font-size: 1.6rem;
    }

    #logo {
        width: 90px;
        height: 90px;
    }

    .index button {
        width: 100%;
    }
}