form {
            width: 80%;
            max-width: 400px;
            margin: 0 auto;
            padding: 1rem 1rem 2rem 1rem;
            border-radius: 0.25rem;
            border: 1px solid rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            color: light-dark(#333b3c, #fffffc);
            background-color: light-dark(hsl(285, 10%, 90%), hsl(285, 30%, 5%));
        }
        html {
            background: hsl(285, 50%, 10%);
        }
        body {
            padding-top: 5%;
            :first-child {
                margin-top: 0;
                }
        background: hsl(285, 50%, 10%);
        background: radial-gradient(circle, hsla(285, 50%, 30%, 1) 0%, hsla(285, 50%, 10%, 1) 71%, hsl(51, 100%, 50%) 72%, hsla(285, 50%, 10%, 1) 73%, hsla(285, 50%, 10%, 1) 100%);
        }
        
        
        @media (orientation: portrait) {
            body {
                background: linear-gradient(to bottom, hsla(285, 50%, 10%, 1) 0%, hsl(51, 100%, 50%) 0.75%, hsla(285, 50%, 15%, 1) 1.5%, hsla(285, 50%, 15%, 1) 50%, hsla(285, 50%, 10%, 1) 100%);
            }
        }

        .proceed img {
            opacity: 0;
            width: 1rem;
            height: 1rem;
            vertical-align: middle;
            margin-right: 0.25rem;
            transition: opacity 0.3s ease;
            display: none;
        }

        form:not(:has(:invalid)) .proceed img {
            opacity: 1;
            display: inline;
        }