@layer layout, reactivity, coloring;

@layer layout {
    header {
        padding: 10em;
    }

    header svg {
        width: 270px;
        height: 130px;
    }

    main {
        display: flex;
        place-content: center;
    }

    form {
        display: flex;
        flex-direction: column;
        gap: 1em;

        padding: 2em 4em;
    }

    form > div {
        display: flex;
        place-items: center;
        gap: 2em;

        padding: 1em;
    }

    label {
        flex: 1;
        padding: 0.5em;
    }

    label .symbol {
        display: none;
    }

    input {
        font-size: 1em;
        padding: 0.5em;
    }
}

@layer reactivity {
    svg {
        animation-name: wobble, zoom;
        animation-duration: 1.5s, 2.3s;
        animation-timing-function: ease-in-out, ease-in-out;
        animation-delay: 0ms, 0ms;
        animation-iteration-count: infinite, infinite;
        animation-direction: alternate, alternate;
        animation-fill-mode: none, none;
    }

    @keyframes wobble {
        0% {
            rotate: -5deg;
        }
        100% {
            rotate: 5deg;
        }
    }

    @keyframes zoom {
        0% {
            transform: scale(1.8);
        }
        100% {
            transform: scale(1.5);
        }
    }
}

@layer coloring {
    header svg {
        fill: white;
        filter: drop-shadow(3px 3px cyan) drop-shadow(-3px -3px magenta);
    }

    form > div {
        background: #1a1a1a;
        border-radius: 0.4em;
        filter: drop-shadow(3px 3px cyan) drop-shadow(-3px -3px magenta);
    }

    button {
        background: white;
        filter: drop-shadow(3px 3px cyan) drop-shadow(-3px -3px magenta);
    }

    input {
        background: transparent;
        color: white;
    }
}