@import url(main.css);

html{
    height: 100%;
}

body.content{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, var(--background), var(--firstColor));
}

header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.footer{
    position: fixed;
    bottom: 0;
    background-color: transparent;
}

.banner{
    top: 0;
}

.banner .content{
    width: 100%;
}

.topLogo{
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    width: 100%;
    padding: var(--bigPadding);
}

.topLogo img{
    width: 150px;
}

.topLogo img:first-child{
    justify-self: start;
}

.topLogo img:last-child{
    justify-self: end;
}

.loginForm, .subText{
    display: inline-block;
    margin: var(--bigMargin);
    padding: var(--bigPadding);
}

.loginForm{
    background-color: var(--background);
    border: none;
    border-radius: var(--borderRadius);
    padding: var(--bigPadding);
    width: 25%;
    text-align: center;
}

.logoForm {
    display: inline-flex;
	justify-content: center;
}

.logoForm img{
    width: 50%;
}

.loginForm > div{
    margin: 0 var(--bigMargin);
}

.loginForm input{
    background-color: transparent;
    border-bottom: 1px solid var(--firstColor);
    border-radius: 0;
    color: var(--secondColor);
}

.loginForm input[type = "submit"]{
    float: right;
}

.inputForm{
    display: inline-grid;
    grid-template-columns: 10% auto;
    align-items: center;
    /* Width */
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
}

.inputForm input{
    /* Width */
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
}

.toast{
    left: 0;
    /* Width */
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
}