@font-face {
    font-family: "Cleopatra";
    src: url(Cleopatra.ttf);
}
@font-face {
    font-family: "Diogenes";
    src: url(DIOGENES.ttf);
}
body{
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
#login, #password{
    width: 90%;
    margin-left: 4%;
    margin-bottom: 10px;
    font-size: 15px;
}
#connexion{
    margin-left: 36%;
    margin-bottom: 10px;
    background-color: darkgray;
    color: black;
    border: 5px ridge darkgray;
    box-shadow: 0px 0px 1px 1px black;
    padding: 2px 20px;
}
#connexion:hover{
    background-color: #b8b8b8;
}
#connexion:active{
    box-shadow: 0px 0px 1px 1px darkgray;
    border-color: #777777;
}
.coBlock {
    border: 1px solid darkgray;
    max-width: 400px;
    background-image: url("stone.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: darkgray;
}
.mainTitle {
    font-family: "Cleopatra", sans-serif;
    font-size: 75px;
    text-align: center;
    padding: 0px 90px;
    background-color: #ff7741;
    text-shadow:
            -1px -1px 0 darkgray,
            0   -1px 0 darkgray,
            1px -1px 0 darkgray,
            1px  0   0 darkgray,
            1px  1px 0 darkgray,
            0    1px 0 darkgray,
            -1px  1px 0 darkgray,
            -1px  0   0 darkgray;
}
.label {
    color: gray;
    font-size: 20px;
    text-align: center;
    margin: 10px;
    font-family: "Diogenes", sans-serif;
    text-shadow: 1px 1px white, -1px -1px black;
}
.bande {
    background-image: url("bande.svg");
    background-repeat: repeat-x;
    background-size: contain;
    height: 20px;
}