:root {
    --clr-fg: #01161e;
    --clr-mid: #721817c0;
    --clr-bg: #ffe74c;
    --clr-font: var(--clr-fg);
    --br: 30px;
    --br-small: calc(var(--br) / 2);
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    background-image: radial-gradient(closest-corner at 30% 30%, #a1e8a5, #e66465);
    color: var(--clr-font);
}

.container {
    border-radius: var(--br);    
}
.container {
    background-image: linear-gradient(lightblue 30%, whitesmoke 44%, var(--clr-bg) 48%);
    box-shadow: -2px -2px 5px var(--clr-bg),
    2px 2px 8px var(--clr-mid);
}
img {
    position: absolute;
    display: block;
    width: 100%;
}
img.dark-mode-image {
    opacity: 0;
    transition: opacity 250ms ease-out;
}
.image-container {
    position: relative;
    width: 33%;
    aspect-ratio: 1 / 1.33;
    margin-inline: auto;
    margin-block-start: 2.5rem;
    border-radius: var(--br-small);
    overflow: hidden;
    box-shadow: 2px 2px 2px var(--clr-mid),
    2px 2px 6px var(--clr-mid);
}
form {  
    margin: 3rem;
    padding: 1rem 2rem;
    border-radius: var(--br-small);
    box-shadow: 0 0 2px var(--clr-mid),
    0 0 6px var(--clr-mid);
    letter-spacing: .6px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
}
label {
    cursor: pointer;
    text-align: right;
}
input,
button {
    border-radius: var(--br-small);
    padding: 0.5em 1em;
    color: var(--clr-font);
    letter-spacing: .6px;
    border: 1px solid var(--clr-bg);
    transition: border-color 150ms ease-out, opacity 150ms ease-out;
}
button {
    cursor: pointer;
    background-color: var(--clr-mid);
    color: white;
    grid-column: 2 / -1;
    margin-block-start: 1rem;
    opacity: .8;
}
small {
    grid-column: 1 / -1;
    text-align: center;
    opacity: .8;
    letter-spacing: 1px;
}
::placeholder {
    color: var(--clr-mid);
    font-size: small;
}

button:hover,
button:focus,
input:hover,
input:focus {
    outline: none;
    border: 1px solid var(--clr-fg);
    opacity: 1;
}
button:active {
    background-color: var(--clr-bg);
    color: var(--clr-fg);
}

@media (prefers-color-scheme: dark) {
    :root {
        --clr-fg: #f0e0e0e0;
        --clr-mid: #233365;
        --clr-bg: #141630;
        --clr-font-dark: var(--clr-fg);
    }
    body {
        background-image: radial-gradient(closest-corner at 30% 30%, #99a, #334);
    }
    img.dark-mode-image {
        opacity: 1;
    }
    .container {
        background-image: linear-gradient(#002 10%, darkblue 28%, purple 45%, #002 46%, var(--clr-bg) 90.5%);
        box-shadow: -3px -3px 12px -5px white, 5px 5px 10px #01161e;
    }
    form {
        box-shadow: -2px -2px 4px #fff4, 2px 2px 4px #000;
    }
    button,
    input {
        border: 1px solid var(--clr-bg);
        background-color: var(--clr-mid);
        color: #fffe;
    }
    ::placeholder {
        color: #bde8;
    }
}