/*--------------------------------------------------------------
# Sort Properties
1 - Positioning properties (position, top, left)
2 - Box model properties (display, width, height, padding, margin, overflow)
3 - Text properties (font-size, text-align)
4 - Visual properties (color, border, background)
5 - The rest (opacity)
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Rules for small screens - Cell phones
--------------------------------------------------------------*/

/* Login */
.form-container {
    margin: 100px auto 50px auto;
}
.form-container form {
    padding: 30px 10px;
    border: 1px solid var(--secondaryColor);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.form-container button {
    width: 35%;
}

/*--------------------------------------------------------------
# Rules for medium screens - Tablets
--------------------------------------------------------------*/
@media screen and (min-width: 768px) {
    /* Login */
    .form-container {
        width: 500px;
    }
    .form-container form {
        padding: 40px 30px;
    }
    .form-container button {
        width: 25%;
    }
}

/*--------------------------------------------------------------
# Rules for large screens - Computers
--------------------------------------------------------------*/
@media screen and (min-width: 992px) {
    /* Login */
    .form-container {
        margin-top: 140px;
        margin-bottom: 80px;
    }
    .form-container form {
        padding: 50px 20px;
    }
}

/*--------------------------------------------------------------
# Rules for very large screens - Computers
--------------------------------------------------------------*/
@media screen and (min-width: 1366px) {
    /* Login */
    .form-container button {
        width: 25%;
    }
}

/*--------------------------------------------------------------
# Rules for extra large screens - Computers
--------------------------------------------------------------*/
@media screen and (min-width: 1600px) {
    /* Login */
    .form-container {
        margin-top: 150px;
        margin-bottom: 100px;
    }
}