html,body{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    padding: 0px;
    width: 100%;
    height: 100%;
    font-family: 'Grandstander', cursive;
}


.navbar{
    background-color: transparent !important;
}
.navbar-brand{
    font-weight: 500 !important;
    font-family: 'Grandstander', cursive;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

.container-fluid{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
}

    .container-left{
        min-height: 120px;
        min-width: 128px;
        margin-right: 8px;
        width: fit-content;
    }

    .container-center{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        padding: 32px;
        width: -webkit-fill-available;
        background-color:white;
    }
        h1,h2{
            text-align: center;
            font-weight: 700;
        }

        h2{
            font-size: 24px;
            font-weight: 400;
        }

        form{
            margin-top: 48px;
            width: 100%;
            max-width: 640px;
            display: flex;
            flex-direction: column;
            align-content: center;
            justify-content: flex-start;
            align-items: stretch;
        }

        .badge{
            margin-bottom: 24px !important;
            background-color: #ebf7fd !important;
            color: #607D8B !important;
            border: 1px solid #cce3ee;
            padding: 8px 16px;
            font-weight: 400;
        }

        input{
            border-color: rgb(218 222 224) !important;
            border-radius: 4px;
            font-size: 17px !important;
            padding-top: 10px !important;
            padding-bottom: 10px !important;
        }
        label{
            font-size:18px;
        }
        button{
            margin-top:32px;
            height: 55px;

        }

        .banner{
            width: 640px;
            min-height: 48px;
            background-color:#fafafa;
            margin-top: 48px;
            border:1px solid #f0f0f0
        }

        .logo_text{
            font-family: 'Grandstander', cursive;
            font-weight: 700;
            display: flex;
            flex-direction: row;
            align-content: center;
            justify-content: flex-start;
            align-items: center;
            margin-top: 7px;
            color: #282828;
        }


    .container-right{
        min-height: 120px;
        min-width: 128px;
        margin-left: 8px;
        width: fit-content;
    }

    #error{
        color:red;
        display:none;
        text-align: center;
        margin-top: 16px;
    }

    #solution{
        display:none;
        padding: 14px 16px;
        background-color: #e0efee;
        text-align: left;
        margin-top: 16px;
        font-size: 15px;
        color: #3e4f4d;
        padding-bottom: 19px;
        border-radius: 4px;
        border: 1px solid #9dd6cf;
        box-shadow: 0px 13px 60px 0px #afe3dd94;
    }


    @media (max-width: 480px) {
        .container-fluid{
            display: flex;
            flex-direction: column;
            align-content: center;
            justify-content: flex-start;
            align-items: center;
        }
        .container-left{
            display:none;
        }
        .container-center{
            padding: 0px 16px;
        }
        form{
            margin-top: 16px;
        }
    }