h1 {
        font-weight: 200
    }

    main#login {
        background: linear-gradient(-45deg, #18191a, #1d1f20);
        display: flex;
        margin: 0;
        min-height: 100vh;
        padding: 0;
        width: 100%
    }

    main#login .login-form-container {
        align-self: center;
        display: flex;
        margin: 0 auto 10vh
    }

    main#login .login-form-container .header {
        align-items: center;
        display: flex;
        justify-content: space-between;
        width: 100%
    }

    main#login .login-form-container .logo {
        align-items: center;
        display: flex;
        height: 50px;
        justify-content: flex-end;
        width: 100px
    }

    main#login .login-form-container .title {
        display: flex;
        flex-direction: column;
        margin-right: 1rem;
        z-index: 4
    }

    main#login .login-form-container .ameba,
    main#login .login-form-container .ameba2 {
        margin: 0
    }

    main#login .login-form-container .ameba {
        color: #888;
        font-size: 14px
    }

    main#login .login-form-container .ameba2 {
        color: #fff;
        font-size: 11px
    }

    main#login .login-panel {
        background: linear-gradient(0deg, #26262699, #28282899);
        border-right: 1px solid #38393a;
        height: 100vh;
        transition: width .5s linear;
        width: 60vw
    }

    @media (max-width:1220px) {
        main#login .login-panel {
            width: 50vw
        }
    }

    @media (max-width:900px) {
        main#login .login-panel {
            width: 36vw
        }

        main#login .login-panel>svg {
            animation: visible 1s;
            opacity: .015
        }
    }

    @media (max-width:700px) {
        main#login .login-panel {
            width: 20vw
        }

        main#login .login-panel>svg {
            animation: invisible 1s;
            opacity: 0 !important
        }
    }

    @media (max-width:520px) {
        main#login .login-panel {
            width: 10px
        }
    }

    main#login .login-panel>svg {
        bottom: 0;
        max-width: 30%;
        opacity: .015;
        position: fixed
    }

    @media (min-width:1221px) {
        .confidentialMessage {
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            background: #d2d2d21a;
            bottom: 0;
            color: #ffffffa6;
            font-size: 10.5px;
            height: 24px;
            left: 0;
            line-height: 24px;
            pointer-events: none;
            position: fixed;
            text-align: center;
            width: 100%;
            z-index: 2
        }
    }

    @media (max-width:1220px) {
        .confidentialMessage {
            display: none
        }
    }

    * {
        scrollbar-width: thin
    }

    ::-webkit-scrollbar {
        height: 6px;
        width: 6px
    }

    ::-webkit-scrollbar-track {
        background-color: var(--bg-color)
    }

    ::-webkit-scrollbar-thumb {
        background-color: #fff3;
        border-radius: 6px
    }

    #root {
        display: flex
    }

    body {
        color: var(--text-color)
    }

    button {
        transition: background-color .2s ease-out
    }

    body,
    html {
        height: 100vh;
        margin: 0;
        padding: 0
    }

    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-family: Segoe UI, Webly Sleek, Helvetica Neue, Helvetica, Arial, sans-serif
    }

    .parking-message {
        text-align: center;
        color: #fff;
        max-width: 600px;
        margin: 0 auto;
    }

    .parking-message h1 {
        font-size: 42px;
        margin-bottom: 10px;
    }

    .parking-message h2 {
        font-size: 24px;
        margin-bottom: 45px;
        color: #fff;
        font-weight: normal;
    }

    .parking-message p {
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .parking-message a {
        color: #aeee46;
        text-decoration: none;
        font-weight: 600;
        font-weight: normal;
    }

    .parking-message a:hover {
        text-decoration: underline;
    }

    .logo-ameba {
        display: block;
        width: 190px;
        max-width: 100%;
        height: auto;
        margin: 0 auto 20px auto;
    }