﻿body {
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    position: absolute;
    font-family: Roboto, Noto, sans-serif;
}
#LoginGrid{
    display:grid;
    grid-template-areas:'E1 LF E2'
        'CS LF MS'
        'E3 LF E4';
    grid-auto-columns: 350px 300px 150px;
    grid-template-rows: 20px 300px 20px;
}

#CompanySection {
    grid-area: CS;
    background-image: url('../../../images/backgraund metal.jpg');
    background-size: inherit;
    background-position: center; 
    border-radius: 15px 0px 0px 15px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
}

#LoginCrown{
    width:175px;
    height:150px;
}
#LoginFormSection {
    grid-area: LF;
    background-color: #FFFFFF;
    border-radius: 15px 15px 15px 15px;
}
#LoginForm{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:20px;
    height:calc(100% - 40px);
    gap:20px;
}
.loginButton {
    background-color: #dc1b24;
    color: #FFFFFF;
    border-radius: 20px;
    width: 100%;
    height: 40px;
    border: hidden;
    font-size: 18px;
}
.loginButton:hover {
    background-color: #8C0404;
}
input {
    border-radius: 20px;
    width: 220px;
    height: 35px;
    border: 1px solid #DDDDDD;
    font-size: 16px;
}
span {
    color:#888888
}

#MessageSection {
    grid-area: MS;
    background-image: url('../../../images/backgraund metal.jpg');
    background-size: inherit;
    background-position: center;
    border-radius: 0px 15px 15px 0px;
    color: #FFFFFF;
    overflow: visible !important;
    padding: 5px;
}

h1 {
    color: #514c4c;
    margin: 0px;
}
h2 {
    color: #514c4c;
    margin: 0px;
}
h3 {
    color: #514c4c91;
    margin: 0px;
}
