@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Oswald:wght@200..700&family=Roboto+Slab:wght@100..900&display=swap');

body {
    background-color: #000000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpolygon fill='%23072210' points='1600 160 0 460 0 350 1600 50'/%3E%3Cpolygon fill='%230d4420' points='1600 260 0 560 0 450 1600 150'/%3E%3Cpolygon fill='%23146630' points='1600 360 0 660 0 550 1600 250'/%3E%3Cpolygon fill='%231a8840' points='1600 460 0 760 0 650 1600 350'/%3E%3Cpolygon fill='%2321AA50' points='1600 800 0 800 0 750 1600 450'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;

    main {
        h1 {
            color: rgb(219, 255, 174);
            background-image: linear-gradient(rgb(219, 255, 174), rgb(0, 100, 22));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            font-family: "Roboto Slab", serif;
            font-size: 3.4rem;
            margin: 0;
        }

        img {
            border: 6px solid rgb(219, 255, 174);
            border-radius: 50%;
            height: 250px;
            width: 250;
            display: flex;
            aspect-ratio: 1/1;
            object-fit: cover;
            margin: 1rem auto;
        }

        h4 {
            color: rgb(219, 255, 174);
            font-family: "Dancing Script", cursive;
            text-align: center;
            font-size: 1.4rem;
        }

    }

    menu {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        max-width: 300px;
        margin: auto;
        transform: translateX(-10px);

        a:link,
        a:visited {
            background-color: rgb(0, 0, 0);
            color: rgb(255, 255, 255);
            border-radius: 10rem;
            padding: 0.4rem;
            display: flex;
            align-items: center;
            text-decoration: none;
            max-width: 300px;
            margin: auto;

            span {
                font-family: "Roboto Slab", serif;
                background-color: rgb(0, 0, 0);
                color: rgb(219, 255, 174);
                border-radius: 50%;
                font-size: 2rem;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 70px;
                width: 70px;
            }

            h4 {
                color: rgb(219, 255, 174);
                margin: 0;
                text-align: left;
            }

            small {
                display: block;
                font-size: 0.7rem;
                text-indent: 0.2rem;
                width: 225px;
            }

            transition: transform 0.4s ease-in;

            &:hover {
                transform: scale(1.05) translateX(15px);
                box-shadow: 0 6px 30px rgba(0, 255, 0, 0.4);
            }

        }

    }
}

menu a span {
    min-width: 70px;
}

menu a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem 0.5rem 1.5rem;
    padding-left: 1.5rem;
}

img[src$="caricatura_IA.png"] {
    display: block;
    margin: 0 auto;
    transition: transform 0.6s ease, filter 0.6s ease;
}

img[src$="caricatura_IA.png"]:hover {
    transform: rotate(10deg) scale(1.05);
    filter: drop-shadow(0 0 15px rgba(0, 255, 0, 0.4));
}