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

:root {
    font-family: arial;
    font-size: large;
    scroll-behavior: smooth;
    background-color: oklch(0.9814 0.0342 99.83);
    line-height: 1.6;
    height: 100%;
}
.container {
    max-width: 80rem;
    padding-inline: 1rem;
    margin-inline: auto;
}
body {
    margin: auto;
    height: 100%;
    main  {
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.box {
    padding: 1rem;
    background-color: oklch(90% 0.03182 99.255);
    border-radius: 1rem;
    width: 20rem;
    .close-btn {
    display: flex;
    justify-content: flex-end;
    font-size: 2rem;
    cursor: pointer;
    }
        .button {
            border: 2px solid oklch(0 0 0);
            padding: 0.5rem 3rem;
            border-radius: 0.5rem;
            margin: 0.5rem auto;
            display: block;
            cursor: pointer;
            width: 100%;
            font-size: 1rem;
            background-color: inherit;
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }
        .forgot-remember {
            display: flex;
            justify-content: center;
            border: 2px solid oklch(0 0 0);
            padding: 0.1rem;
            border-radius: 0.5rem;
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;

        }
        .forgot-remember:hover, .button:hover, .forgot-remember:focus-visible, .button:focus-visible {
        transform: translateX(-0.1rem) translateY(-0.1rem);
        box-shadow: 0.2rem 0.2rem 0.5rem;
        }
        a {
            color: oklch(0 0 0);
            width: 100%;
            text-align: center;
            padding-block: 0.25rem;
        }
        .input {
            display: flex;
            flex-direction: column; 
            .input_field {
                display: flex;
                align-items: center;
                width: 100%;
                border-bottom: 2px solid oklch(0 0 0);
                padding-bottom: 0.25rem;
                background: transparent;
                input {
                    background: transparent;
                    border: none;
                    outline: none;
                    flex: 1 1 auto; 
                    padding: 0;
                    order: -1;
                }
            }
        }
        ul {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            order: -1;
            padding-inline-start:0;
            margin-block: 0;
            li { 
                a {
                display: flex;
                margin-inline-start: auto;
                font-size: 2rem;
                font-weight: bold;
                text-decoration: none;
                transition: color 0.2s ease-in-out;
                padding-inline: 0.25rem;
                line-height: 1.5rem;
                &:hover {
                    color: oklch(62.793% 0.25768 29.223);
                }
                h2 {
                    display: flex;
                    order: 1;
                    margin: 0;
                    padding: 0;
                    padding-inline-start: 1rem;
                }
            }

        }
    }
}

footer {
    display: flex;
    justify-content: center;
    padding: 2rem;
}