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

:root {
    /* colors primitive */

    --color-brand-black: #121212;
    --color-brand-red: #fb4e41;
    --color-brand-white: #ffffff;
    --color-neutral-0: #ffffff;
    --color-neutral-10: #8b8b8b;
    --color-neutral-20: #717171;
    --color-neutral-30: #575757;
    --color-neutral-40: #3f3f3f;
    --color-neutral-50: #282828;
    --color-neutral-100: #121212;
    --color-primary-neutral-0: #ffb6a6;
    --color-primary-neutral-10: #ffa391;
    --color-primary-neutral-20: #ff907c;
    --color-primary-neutral-30: #ff7b68;
    --color-primary-neutral-40: #fe6654;
    --color-primary-neutral-50: #fa4d41;
    --color-system-error-red: #e85a50;
    --color-system-error-red-light: #fef3f2;
    --color-system-success-green: #04d87f;
    --color-system-success-green-light: #ecfdf3;
    --color-system-warning-yellow: #fbbb14;
    --color-system-warning-yellow-light: #fff9ea;

    /* colors semantic */

    --background-brand-primary: var(--color-primary-neutral-50);
    --background-brand-secondary: var(--color-primary-neutral-0);
    --background-error-light: var(--color-system-error-red-light);
    --background-neutral-primary: var(--color-neutral-100);
    --background-neutral-secondary: var(--color-neutral-50);
    --background-neutral-tertiary: var(--color-neutral-40);
    --background-success-light: var(--color-system-success-green-light);
    --background-warning-light: var(--color-system-warning-yellow-light);
    --text-dark: var(--color-neutral-100);
    --text-smoke-grey: #C0C0C0;
    --text-error: var(--color-system-error-red);
    --text-light: var(--color-neutral-0);
    --text-light-grey: #B0B0B0;
    --text-medium: var(--color-neutral-10);
    --text-red: var(--color-primary-neutral-0);
    --text-success: var(--color-system-success-green);
    --text-warning: var(--color-system-warning-yellow);
}

/* typography */

h1 {
    color: var(--text-light);
    font-family: 'Viga', sans-serif;
    font-size: 3.5rem;
    line-height: 115%;
    letter-spacing: -2%;
}

p {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 1rem;
    line-height: 150%;
}

.text-large-medium {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 1.25rem;
    line-height: 150%;
}

.text-small-normal {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 1.85rem;
    line-height: 150%;
}

body {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    background: radial-gradient(50% 50% at 50% 50%, rgba(251, 78, 65, 0.2) 0%, rgba(0, 0, 0, 0) 100%), #121212;
    color: var(--color-neutral-0);
    width: 100vw;
    min-height: 100vh;
    display: flex;
    position: relative;
    overflow: hidden;
}

/* Buttons */

.btn-primary-big {
    height:45px;
    background-color: #FE9954;
    color: var(--text-light);
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    box-shadow: 0px 3px 15px rgba(251, 78, 65, 0.7), /* drop shadow */
    inset 0px 1px 4px rgba(0, 0, 0, 0.025), /* inner shadow bottom */
    inset 0px -1px 4px rgba(255, 255, 255, 0.45); /* inner highlight top */
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.button-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0px 5px 18px rgba(251, 78, 65, 0.8), inset 0px 1px 4px rgba(0, 0, 0, 0.03), inset 0px -1px 4px rgba(255, 255, 255, 0.5);
}

.button-primary:active {
    transform: translateY(0px);
    box-shadow: 0px 2px 10px rgba(251, 78, 65, 0.5), inset 0px 1px 4px rgba(0, 0, 0, 0.02), inset 0px -1px 4px rgba(255, 255, 255, 0.4);
}

/* text input */

/* ADDED by Marco Pascali 17/05/2025*/
.form-label {
    color: var(--color-neutral-10);
    text-align: left;
    display: block;
    margin-bottom: 0.5rem;
}

.form-control {
    height:45px;
    color: var(--text-light);
    border: 1px solid transparent;
    /**
        Non uso border-image per impostare un gradiente lineare ma un trucco con doppio background.
        Applicando un raggio al bordo border-image sostituendo il bordo con una immagine non fa il 
        render degli angoli arrotondati.

        Il primo gradient (padding-box) colora il contenuto.

        Il secondo (border-box) colora il bordo con gradiente.

        border-radius funziona perfettamente e arrotonda anche il bordo.
     **/

    background: linear-gradient(var(--background-neutral-secondary), var(--background-neutral-secondary)) padding-box, /* sfondo del controllo input */
    linear-gradient(to left, #fff, #ffa391, #ff7b68) border-box; /* bordo gradiente */
    border-radius: 4px;
    padding: 12px 12px;
}

    .form-control:focus {
        background-color: var(--background-neutral-secondary);
        border: none;
        outline: 0;
        color: var(--text-light);
        box-shadow: 0px 3px 15px rgba(251, 78, 65, 0.7), /* drop shadow */
        inset 0px 1px 4px rgba(0, 0, 0, 0.025), /* inner shadow bottom */
        inset 0px -1px 4px rgba(255, 255, 255, 0.45);
    }

    .form-control::placeholder {
        color: var(--text-medium);
    }
/* ADDED by Marco Pascali 17/05/2025*/
.message {
    color: var(--color-neutral-10);
    text-align: center;
    display: block;
    margin-bottom: 1rem;
}

/* Imposta la stessa larghezza di main (es. container centrato) */
.welcome-container {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#welcome-text {
    color: #fff;
    font-weight: 300;
    text-shadow: 0 0 30px #FB4E41;
    font-size: clamp(1rem, 3vw, 2rem);
    align-items: flex-end;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0.15em 0;
    letter-spacing: 0;
}

.tree {
    position: absolute;
    max-width: 30vw;
    height: auto;
    z-index: 1;
    opacity: 0.8;
}

.top-left {
    top: 0;
    left: 0;
    width: 273px;
}

.bottom-right {
    bottom: 0;
    right: 0;
    width: 221px;
}

.content {
    position: relative;
    z-index: 2;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 1rem;
    max-width: 600px;
    margin: auto;
}

.logo {
    height: 64px;
    /* width: auto; */
    /* margin-bottom: 1.5rem; */
    opacity: 100;
}

.socials {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    opacity: 1; /* MODIFIED by Marco Pascali 17/05/2025 */
}

    .socials img {
        width: 18px; /* MODIFIED by Marco Pascali 17/05/2025 */
        filter: brightness(0) invert(1); /* MODIFIED by Marco Pascali 17/05/2025 */
        transition: filter 0.3s ease;
    }

        .socials img:hover {
            filter: brightness(0) invert(1) drop-shadow(0 0 3px rgba(255, 255, 255, 0.5)); /* MODIFIED by Marco Pascali 17/05/2025 */
        }

footer {
    font-size: 0.9rem;
    color: var(--text-medium);
    opacity: 100;
}

    footer a {
        color: #888;
        text-decoration: underline;
    }

.petal {
    position: fixed;
    width: 20px;
    height: 20px;
    background-image: url('images/petal.svg');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}

.title {
    font-family: 'Viga', sans-serif;
    font-size: 3rem;
    margin: 0.5rem 0;
    display: inline-block;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
}

@media only screen and (max-width: 768px) { /* MODIFIED by Marco PAscali 17/05/2025 */

    /* typography */

    h1 {
        font-size: 2.5rem;
    }

    /* buttons */

    .btn-primary-big {
        width: 100%;
        padding: 0.8rem;
    }

    .text-input {
        width: 100%;
    }
}