body, section, form, footer,.welcomeModal,#welcome, .errorModal, #error{
            display: flex;
            flex-direction: column;
        }
        body, section, footer, .welcomeModal,#welcome, .errorModal, #error{
            align-items: center;
        }
        body{
            background-color: #eeeeee;
            overflow-x: hidden;
        }
        header{
            margin: 50px 0px;
        }
        header > h1{
            font-size: xx-large;
            font-weight: bold;
            margin-bottom: 20px;
        }
        section{
            width: 100%;
            flex-shrink: 0;
        }
        form > h2{
            text-align: center;
            font-size: 2em;
            margin-top: 25px;
        }
        form {
            max-width: 500px;
            min-width: 320px;
            width: 100%;
            height: 500px;
            padding: 25px 20px 15px 20px;
            background: #fafafa;
	        border: 1px solid #ebebeb;
	        box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
        }
        #loginImage{
            width: 150px;
            align-self: center;
        }
        .username, .password{
            position: relative;
            height: 47px;
            margin: 15px 0px;
        }
        .username > label, .password > label{
            display: block;
            position: absolute;
            top: 23.5px;
            left: 5px;
            font-size: 1.5em;
            color: black;
            transition: 500ms;
        }
        .used{
            color: #0074D9 !important;
            font-size: 1.2em !important;
            top: 0px !important;
            left: 0px !important;
            transition: 500ms;
        }
        #username, #password, #loginButton{
            margin: 10px 0px;
            height: 47px;
        }
        #username, #password{
            width: 100%;
            padding-left: 5px;
            border : none;
            border-bottom: 1px solid grey;
            background-color: transparent;
            position: absolute;
        }
        .username > span, .password > span {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0px;
            border-bottom: 1px solid #0074D9;
            transition: 500ms;
            width: 0%;
        }
        #username:focus, #password:focus{
            border: none;
        }
        #username:focus ~ span, #password:focus ~ span{
            transition: 500ms;
            right: 0;
            width: 100%;
        }
        #username::-moz-placeholder{
            color: rgba(138, 138, 138, 0.3);
        }
        #username::-ms-input-placeholder{
            color: rgba(138, 138, 138, 0.3);
        }
        #username::-webkit-input-placeholder{
            color: rgba(138, 138, 138, 0.3);
        }
        #password::-moz-placeholder{
            color: rgba(138, 138, 138, 0.3);
        }
        #password::-ms-input-placeholder{
            color: rgba(138, 138, 138, 0.3);
        }
        #password::-webkit-input-placeholder{
            color: rgba(138, 138, 138, 0.3);
        }
        #loginButton{
            height: 47px;
            width: 120px;
            border-radius: 12px;
            align-self: center;
            background-color: #d83204;
            color: white;
            margin-top: 35px;
        }
        #loginButton:hover{
            cursor: pointer;
        }
        .welcomeModal, .errorModal{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.2);
            z-index: 2;
            display: none;
        }
        #welcome, #error{
            margin-top: 150px;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            transition: 0.3s;
            min-width: 320px;
            max-width: 500px;
            width: 100%;
            min-height: 200px;
            height: auto;
            background-color: #ffffff;
            padding: 10px;
            justify-content: center;
        }
        #welcome:hover, #error:hover{
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        }
        #welcome > h3, #error > h3{
            font-size: 2em;
            text-align: center;
            margin-bottom: 10px;
        }
        .loader {
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid firebrick;
            width: 80px;
            height: 80px;
            -webkit-animation: spin 2s linear infinite; /* Safari */
            animation: spin 2s linear infinite;
        }

        /* Safari */
        @-webkit-keyframes spin {
            0% { -webkit-transform: rotate(0deg); }
            100% { -webkit-transform: rotate(360deg); }
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        #error > button{
            display: block;
            align-self: flex-end;
            height: 47px;
            width: 120px;
            border-radius: 12px;
            /* border: 1px solid black; */
            background-color: #d83204;
            color: white;
        }
        #error > button:hover{
            cursor: pointer;
        }
        footer img{
            width: 200px;
            margin-top: 30px;
        }