html {
    box-sizing: border-box;
    font-size: 16px;
}

*,
*::after,
*::before {
    box-sizing: inherit;
}

body {
    font-family: 'Gotham', sans-serif;
    margin: 0;
}

main {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    min-height: 100vh;
    width: 100%;

    #form-recover {
        background-color: #000;
        border-radius: 1rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        margin: 0 2rem;
        padding: 2rem;

        .musashi-jj {
            width: max-content;
            height: auto;
            margin: 0 auto;
            display: block;
        }

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

            label {
                color: white;
                cursor: pointer;
                font-size: 1.4rem;
                font-weight: bold;
            }

            input[type="email"],
            input[type="password"] {
                background-color: white;
                border-radius: 8px;
                border: none;
                font-size: 1.4rem;
                padding: 0.5rem;
            }

            input[type="email"]::placeholder,
            input[type="password"]::placeholder {
                color: #808080;
            }

            input[type="email"]:focus-visible,
            input[type="password"]:focus-visible {
                outline-color: #FFC116;
            }

            input[type="submit"] {
                color: white;
                background-color: #FFC116;
                border-radius: 8px;
                border: none;
                cursor: pointer;
                font-size: 1.4rem;
                font-weight: bold;
                padding: 0.5rem;
                transition: background-color ease-in-out 250ms;
            }

            input[type="submit"]:hover {
                background-color: #E6A800;
            }
        }

        section {
            div {
                text-align: center;
                margin-bottom: 0.5rem;

                p {
                    color: white;
                    margin: 0 auto;
                    width: 100%;
                }

                a {
                    color: white;
                    transition: color ease-in-out 250ms;
                }

                a:hover {
                    color: #FFC116;

                }
            }

            div:last-child {
                margin-bottom: 0;

            }
        }
    }
}