4. validation 5. @media query */ /* ---------------------------------------------------------------------- */ /* !!! 1. !!! */ @font-face { font-family: 'Norse Bold'; src: url(./fonts/Norse-Bold.otf); } body { margin: 0; display: flex; font-family: 'Norse Bold'; letter-spacing: 0.1em; } /* ---------------------------------------------------------------------- */ /* !!! 2.

!!! */ img[src="./images/form.jpg"] { height: 100vh; width: 30vw; } .logo div { position: absolute; z-index: 10; top: 10em; display: flex; width: 30vw; gap: 1em; justify-content: center; background-color: rgba(0, 0, 0, 0.5); } img[src="./images/odin-logo.png"] { height: 5em; width: auto; } .logo div span { font-size: 5em; color: white; } /* ---------------------------------------------------------------------- */ /* !!! 3.

!!! */ .account { display: flex; flex-direction: column; margin: auto; } form { margin: auto; } form fieldset { display: flex; flex-wrap: wrap; justify-content: center; padding: 1em 0; gap: 10em; border: none; } form fieldset div { /* This effect is possibility to do with HTML (adding

, but the project is for CSS Flex skills */ display: flex; flex-direction: column; } button { margin: 2em 0 2em 0; border-radius: 0.5em; height: 3em; width: 12em; border: none; background-color: #596D48; color: white; font-weight: bold; font-family: 'Norse Bold'; letter-spacing: 0.3em; } form p:last-child { font-size: small; } /* ---------------------------------------------------------------------- */ /* !!! 4. validation !!! */ input:user-invalid { border-color: red; } input:user-valid { border-color: blue; } /* ---------------------------------------------------------------------- */ /* !!! 5. @media query !!! */ @media all and (max-width: 1000px) { form fieldset { gap: 5em; } } @media all and (max-width: 800px) { form fieldset { gap: 2em; } } @media all and (max-width: 600px) { .account { text-align: center; } form fieldset { gap: 0.75em; } }