html {
    /* Sets backgound image for whole document */
    background-color: bisque;
    background-image: url("../images/bg2.jpg");
    background-size: cover;
}

html, body {
    /*  Sets flex layout for the body and the html document, so it can
        make the context box to the center. By setting html layout to flex
        we make body to be at center vertically and by setting the body at the
        center we make the content rectangle to be at the center horizontally.
        Addionaly we set the height to 100% so that the layout covers whole
        view port.
         */
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.flex-container {

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    /* Setting paddings to the content box. */
    gap: 2em;
    padding: 1em;
    margin: 1em;

    /* Setting borders to the content box. */
    border: 1px solid gray;
    border-radius: 1em;
}

.flex-item {
    /* Setting the flex items alignment to center */
    text-align: center;
}

#main-container {
    /* Some extra styles for the main container */
    background-color: rgb(231, 223, 202);
    opacity: 95%;
}

.form-item {
    /* Paddings for form items */
    padding: 0.75em;
}

.right-margin {
    /* Right margin for a "Choose Gender:" label */
    margin-right: 1em;
}

.button {
    /* Changing style of the buttons to flat and green */
    /* Setting animation effect for button color change */
    transition-duration: 0.2s;

    /* Button colors */
    background-color: #4CAF50;
    color: white;

    /* Button paddings */
    border: none;
    padding: 0.75em;
    margin-top: 1em;

    text-align: center;
    font-size: 1em;
}

.button:hover {
    /* When mouse gets over a button */
    background-color: #5ec561;
}

.button:active {
    /* When click is pressed on a button */
    background-color: #58865a;
}

.error {
    /* Style for error expression like "Not found!" */
    color: red;
    font-size: 1em;
    visibility: hidden;
}