odin-sign-up-form/style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@font-face {
    font-family: Norse-Bold;
    src: url(assets/Norse-Bold.otf);
}

:root {
    font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

em {
    font-style: italic;
}

#flexbox {
    display: flex;
    min-height: 100svh;
}

#image {
    flex: 3;
    background: url('assets/bg.jpg') 25% / auto 100%;
    position: relative;
    color: #fff;
    #odin {
        position: absolute;
        top: 12%;
        padding: 0.1em 0 0.2em 0;
        font-size: 5rem;
        text-align: center;
        background: #000000aa;
        width: 100%;
        font-family: Norse-Bold;
        text-transform: uppercase;
        span {
            display: inline-block;
        }
        img {
            filter: invert(1);
            height: 5rem;
            position: relative;
            top: 10px;
        }
    }
    #adnotation {
        width: 100%;
        position: absolute;
        bottom: 0.5em;
        text-align: center;
        font-size: 0.9rem;
    }
}

h2 {
    margin: 0 0 1rem 0;
    font-weight: 700;
    font-size: 1.4rem;
}

#interface {
    flex: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #eaeaea;
    & > div, & > form > div {
        padding: 0 2.5rem;
    }
    #encouragement {
        margin: 2rem 0;
        width: fit-content;
        font-size: 1.5em;
    }
    #enter {
        box-sizing: border-box;
        padding-top: 2em;
        padding-bottom: 2em;
        background-color: #fff;
        box-shadow: #000 0 0 8px -5px;
        #form-grid {
            display: grid;
            width: 520px;
            grid-template-columns: 1fr 1fr;
            gap: 1.3em 3em;
            .element {
                display: flex;
                flex-direction: column;
                label {
                    margin: 0.2em 0;
                    text-transform: uppercase;
                    font-size: 0.85rem;
                    color: #252525;
                    font-weight: bold;
                    letter-spacing: 0.1em;
                }
                input {
                    display: block;
                    padding: 0.3em 0.5em;
                    font-size: 1rem;
                    border-radius: 5px;
                    border: 1px solid #ddd;
                    outline: none;
                    transition: 0.05s ease-in-out border;
                    &:focus {
                        box-shadow: #000 0 0 8px -5px;
                        border: 1px solid #22d;
                    }
                    &.psk-no-match {
                        border: 1px solid #d22;
                    }
                    &::after {
                        display: block;
                        font-size: 2rem;
                        position: absolute;
                        top: 20px;
                        content: 'Passwords';
                    }
                }
                span.psk-no-match {
                    color: #d22;
                    font-size: 0.9rem;
                    margin-top: 0.4em;
                }
            }
        }
    }
    button[type="submit"] {
        display: block;
        padding: 0.8em 2.5em;
        margin: 2rem 0;
        font-size: 1rem;
        border-radius: 6px;
        border: none;
        outline: none;
        background: #415214;
        color: #fff;
        font-weight: bold;
        cursor: pointer;
        transition: 0.1s ease-in-out background-color;
        &:hover {
            box-shadow: #000 0 0 8px -5px;
            background: #52661b;
        }
    }
}