:root {
    min-height: 100%;
}

header {
    display: none;
}

#side-window {
    background-color: var(--lilypad-green);
    flex-shrink: 0;
    display: flex;

    & form {

        justify-content: center;
        margin: auto;

        width: 300px;

        & > * {
            justify-self: center;
            margin: 12px auto;
        }

        & > h3, small {
            color: var(--dark-grey);

            & > b > a {
                color: var(--dark-grey);
            }
        }

        & > img {
            width: 76px;
        }

        & > button, & > input[type=text], & > input[type=password], small {
            width: 100%;
        }

        & > small {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5ch;
        }
    }
}


.text-input-login {
    background-color: transparent;
    color: var(--dark-grey);
    border-color: var(--middle-grey);

    &:not(:placeholder-shown), &:focus {
        border-color: var(--dark-grey);
    }

    &::placeholder {
        color: var(--middle-grey);
    }
}

body {
    height: 100vh;
    margin: 0;
    display: flex;
}

form {
    margin-bottom: auto;
    margin-top: auto;
}

#hero {
    display: flex;
    flex-shrink: 1;
    overflow: hidden;

    & > img {
        height: 70vh;
        margin-top:auto;
    }

    & > img:first-child {
        margin-bottom: 10vh;
    }

    & > img:last-child {
        margin-bottom: 10vh;
    }

    & > img:not(:first-child) {
        margin-left: -12px;
    }
}

@media screen and (width >= 700px) {
    #side-window {
        width: 600px;
        height: 100%;
        margin-right: 0;
        margin-left: auto;
        border-radius: 32px 0 0 32px;
    }
}

@media screen and (width < 700px) {
    body {
        flex-direction: column;
    }

    #side-window {
        width: 100%;
        height: 60%;
        margin-bottom: 0;
        margin-top: auto;
        border-radius: 32px 32px 0 0;
    }

    #hero {
        margin-bottom: -10vh;
        margin-top: -3vh;
    }
}