@keyframes open {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

main.main {
    height: 100vh;

    display: flex;
    flex-flow: column;

    background-color: #f8f8f8;

    .contents-wrapper {
        flex: 1 0 auto;

        display: flex;
        justify-content: center;
        align-items: center;

        .contents {
            flex: none;

            width: 420px;
            padding: 42px 28px;

            display: flex;
            flex-flow: column;
            align-items: center;
            gap: 40px;

            border-radius: 20px;
            background-color: #fff;

            .logo {
                /* width: 174px;
                height: 27px; */
                /* width: 551px;
                height: 148px; */
                width: 90%;
                max-width: 551px;
                aspect-ratio: 551 / 148;

                background-image: url('/resources/growise/public/logo-growise.png');
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
            }

            .user {
                min-width: 100%;
                width: 300px;

                display: flex;
                flex-flow: column;
                align-items: flex-start;
                gap: 15px;

                >input {
                    width: 100%;
                    padding: 16px 23px;
                    border-radius: 8px;
                    background-color: #fafafa;
                    font-size: 16px !important;

                    &::placeholder {
                        user-select: none;
                    }

                    &:focus {
                        outline: 1px solid var(--color-primary);
                    }
                }

                >input.error {
                    outline: 1px solid var(--color-color7);
                }

                >label {
                    user-select: none;
                    color: var(--color-color1);

                    input[type='checkbox'] {
                        margin-right: 6px;

                        accent-color: var(--color-primary);
                    }

                    &:has(input[type='checkbox']:checked) {
                        color: var(--color-primary);
                    }
                }
            }

            #login-button {
                width: 100%;
                height: 50px;

                display: flex;
                justify-content: center;
                align-items: center;

                border-radius: 8px;
                background-color: var(--color-secondary);

                color: var(--color-primary);
                font-size: 16px;
                font-weight: 700;
                line-height: 20px;
            }
        }

        .toast-message {
            position: fixed;
            top: 85px;
            left: 50%;

            width: 364px;
            padding: 25px;

            display: none;

            border-radius: 12px;
            background-color: var(--color-color1);
            transform: translateX(-50%);

            color: #fff;
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
            text-align: center;

            &.open {
                display: flex;
                align-items: center;
                gap: 15px;

                animation: open 3s ease-in-out forwards;
            }
        }
    }
}