@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap");
@import url("https://cdn.jsdelivr.net/gh/tonsky/FiraCode@5.2/distr/fira_code.css");

:root {
    --main-front-color: #39566f;
    --main-back-color: #212121;
    --second-front-color: #2c3e50;
}

body {
    background-color: var(--main-back-color);
    font-family: "Fira Code", sans-serif;
    color: white;
}

h2 {
    color: white;
}

.container {
    text-align: center;
    margin: auto;
    width: 95%;

}

.error {
    border: 1px solid red;
    margin: 0 auto;
    max-width: 40%;
    border-radius: 5px;
    padding: 5px;
    color: white;
}

input[type=text],
input[type=password] {
    width: 40%;
    padding: 12px 20px;
    margin: 5px 0 5px 0;
    border: 1px solid #ccc;
    box-sizing: border-box;
    text-align: center;

}

input[type=text]:focus {
    background-color: darkgrey;
}

button {
    background-color: var(--main-front-color);
    color: white;
    cursor: pointer;
    width: 40%;
    padding: 12px 20px;
    box-sizing: border-box;
    display: inline;
}

button:hover {
    opacity: 0.8;
    transform: scale(1.02);
    background-color: white;
    color: var(--main-front-color);
}