:root {
    --primaryColor: rgb(22, 25, 37);
    --secondaryColor: rgb(35, 57, 91);
    --thirdColor: rgb(64, 110, 142);
    --fourthColor: rgb(142, 168, 195);
    --fifthColor: rgb(203, 247, 237);
}

body {
    box-sizing: border-box;
    font-family: "Roboto";
    background-color: var(--primaryColor);
    margin: 0px;
}

.form {
    position: absolute;
    width: 280px; 
    background-color: var(--secondaryColor);
    padding: 40px;
    top: calc(50% - 240px);
    left: calc(50% - 180px);
    border-radius: 10px;
    animation-name: form_effect;
    animation-duration: 0.4s;
    animation-timing-function: ease-out;
}

@keyframes form_effect {
    from {scale: 0.1;}
    to { scale: 1;}
}

.imgcontainer {
    text-align: center;
    padding-bottom: 40px;
    animation-name: image_effect;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
}

@keyframes image_effect {
    from {scale: 0.1;}
    to { scale: 1;}
}

.username {
    background-color: var(--secondaryColor);
    padding: 12px; 
    border-top-left-radius: 12px; 
    border-top-right-radius: 12px; 
    border-style: solid;
    border-width: 1px;
    border-color: var(--thirdColor);
    color: var(--fifthColor);
    height: 20px;
    width: calc(100% - 26px);
    font-size: 16px;
    text-align: center;
}

.username:hover {
    cursor: pointer;
}

.username:focus {
    background-color: var(--fourthColor);
    color: var(--primaryColor);
    cursor: auto;
}

.password{
    background-color: var(--secondaryColor);
    border-color: var(--thirdColor);
    color: var(--fifthColor);
    padding: 12px; 
    border-style: solid;
    border-width: 1px;
    height: 20px;
    width: calc(100% - 26px);
    font-size: 16px;
    text-align: center;
    margin-top: 4px;
    margin-bottom: 4px;
}

.password:hover {
    cursor: pointer;
}

.password:focus {
    background-color: var(--fourthColor);
    color: var(--primaryColor);
    cursor: auto;
}

.submit{
    cursor: pointer;
    background-color: var(--primaryColor);
    border-color: var(--thirdColor);
    color: var(--fifthColor);
    font-size: 16px;
    width: 100%;
    height: 60px;
    border-style: solid;
    border-width: 1px;
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px; 
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    transition: 0.8s;
}

.submit:hover {
    background-color: var(--thirdColor);
}

.submit:focus {
    background-color: var(--primaryColor);
}

input::placeholder {
    color: var(--fifthColor);
    opacity: 0.2;
}