section {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    min-height: 100dvh;
    justify-content: center;
    padding: var(--border-padding);
    width: 100%;

    & form {
        background-color: var(--white-c);
        padding: calc(var(--border-padding) * 2);
        width: 400px;

        & .logo-wrapper {
            margin: 0 auto;
            width: 60px;
    
            & img {
                display: block;
                width: 100%;
            }
        }
        
        & h1 {
            font-size: var(--f-fze-big);
            font-weight: 800;
            letter-spacing: 0.5px;
            margin-top: var(--padding);
            margin-bottom: var(--border-padding);
            padding-bottom: var(--padding);
            position: relative;
            text-align: center;
            text-transform: uppercase;

            &::after {
                content: "";
                background-color: var(--darkgray-c);
                bottom: -1px;
                height: 4px;
                left: 50%;
                position: absolute;
                transform: translateX(-50%);
                width: 40px;
            }
        }

        & > p {
            margin-bottom: var(--border-padding);
            text-align: center;
        }

        & .box {
            &:not(:first-child) {
                margin-top: calc(var(--border-padding) / 2);
            }

            & input,
            & label {
                display: block;
                width: 100%;
            }

            & input {
                border: 1px solid var(--darkgray-c);
                padding: var(--padding);
                font-size: var(--f-fze-little);

                &::placeholder {
                    font-weight: 600;
                }
            }

            &.wrong {
                
                & input,
                & textarea {
                    color: var(--wrong-c);
                    border-color: var(--wrong-c);
                }
            }
        }

        & .control-buttons {
            margin-top: var(--border-padding);
            height: 48px;

            & button {
                display: block;
                width: 100%;
                padding: var(--padding);
                text-align: center;
                font-weight: 700;
                background-color: var(--primary-c);
                border: 1px solid var(--primary-c);
                font-size: var(--f-fze-little);
            }

            & .result-message {
                font-weight: 500;
                text-align: center;
                margin-top: var(--padding);
                padding-top: var(--padding);
                height: 48px;
                
                &::after {
                    background-color: var(--primary-c);
                    top: -1px;
                    content: "";
                    height: 4px;
                    left: 50%;
                    position: absolute;
                    transform: translateX(-50%);
                    width: 30px;
                }

                &.wrong {
                    color: var(--wrong-c);

                    &::after {
                        background-color: var(--wrong-c);
                    }
                }

                &.ok {
                    color: var(--well-c);
                }
            }
        }

        @media (max-width: 500px) {
            width: calc(100% - var(--border-padding) * 3);
        }
        
        @media (max-width: 450px) {
            width: 100%;
            padding: var(--border-padding);
        }
    }
}