.loginContainer {
    width: 400px;
    height: 544px;
    overflow: hidden;
    display: grid;
    border-radius: 2px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px;
}

.loginHeader h1 {
    animation: 2s h1In backwards;
    position: relative;
}

.loginHeader:active h1 {
    transform: scale(.5);
    opacity: 0;
}

.loginHeader:active * {
    animation: none;
    transition: 1s cubic-bezier(0, .7, .3, 1);
    transform: scale(1);
    stroke: #fff;
    fill: #fff0;
    stroke-width: 11px;
    stroke-dasharray: 0 45px;
}

@keyframes h1In {
    0%, 90% {
        opacity: 0;
        transform: scale(0.5);
    }

    95% {
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

.g {
    animation: 2s gIn backwards;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    fill: #00020f2e;
    stroke: #ffffff1a;
    transform: scale(2);
    filter: drop-shadow(0 0 4px #000);
    stroke-dasharray: 8px 8px;
    stroke-width: 2px;
    stroke-linecap: round;
}

@keyframes gIn {
    0% {
        stroke: #fff;
        fill: #fff0;
        stroke-width: 11px;
        stroke-dasharray: 0 645px;
    }

    60% {
        stroke-width: 3px;
        stroke-dasharray: 645px 8px;
    }

    40% {
        fill: #fff0;
    }

    70% {
        fill: #fff;
    }

    0%, 90% {
        transform: scale(1);
    }

    100% {
        transform: scale(2);
        stroke-dasharray: 8px 8px;
        stroke-width: 2px;
        fill: #00020f2e;
    }
}

.loginBody {
    transition: .2s cubic-bezier(.3, 0, .3, 1);
    z-index: 20;
}

.loginHeader {
    position: relative;
    display: block;
}

@media (max-width: 800px) {
    .loginContainer {
        width: calc(100vw - 16px);
        height: calc(100vh - 16px);
        border-radius: 0;
        grid-template-rows: 1fr 3fr;
    }

    .loginBody {
        margin-top: calc(25vh - 6em);
    }

        .loginBody:focus-within {
            margin-top: 0;
        }
}