html
/* body - koko koodin kattava muotoilu */
body {
    font-family: Verdana;
    background-color: white;
}

@-ms-viewport {
    width: device-width; /* Määritetään skaalautuvuus pienemmille näytöille */
}

/* Form border - "lomakkeen" kehys */
form {
    border: 10px double; /* Kehyksen paksuus, kehyksen "malli" - Border style */
    border-radius: 7px; /* Kehuksen pyöristetyt kulmat - Border corners rounded */
    max-width: 500px;
    height: auto;
    margin: auto;
    border-color: var(--main-color); /* Kehyksen väri - Border color */
    padding: 7px 13px 7px 13px;
}

/* Button sytles - napin tyylimäärittely */
button {
    font-size: 20px; /* Napin tekstin koko - Button font size */
    font-weight: bold;
    background-color: var(--main-color); /* Napin taustaväri - Button background color*/
    color: white; /* Napin tekstin väri - Button text color*/
    border-radius: 10px;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer; /* Muutetaan kursori nuolesta "pointteriksi" */
    width: 100%;
}

    /* Add a hover effect for button - "leijumis" efekti napille */
    button:hover {
        opacity: 0.8;
    }

/* Input box styles - input (=sisällön syöttö laatikot) laatikoiden tyylimuotoilu */
input[type=text], input[type=password] {
    border-radius: 10px;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/*Place for image - Kuvan paikan määritys containerissa*/
.imgcontainer {
    text-align: center;
    margin: 25px 0 15px 0;
    width: 100%;
    height: auto;
}
/*Image*/
img {
    text-align: center;
    margin: 25px 0 15px 0;
    width: 100%;
    height: auto;
}

/* Add some space between containers - Lisätään tilaa "säiliöiden" (=container) väliin */
.main-container {
    padding: 15px;
}

.external-login {
    text-align: center;
    margin: auto;
    max-width: 500px;
}

.ms-button {
    background-color: #ffffff;
    color: #000000;
    border-color: #000000;
    display: flex;
    width: fit-content;
    margin: auto;
}

.ms-logo {
    width: 8%;
    margin: auto;
    margin-right: 8px;
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
    width: 90%;
    margin: 10px auto;
    font-size: 20px;
}

.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 2px solid #000;
}

.separator:not(:empty)::before {
    margin-right: .5em;
}

.separator:not(:empty)::after {
    margin-left: .5em;
}

@media only screen and (max-width: 750px) { /*Määritetään kuinka sivun elementit asettuvat pienelle näytölle - Scaling for small screens*/

    form {
        border: 10px double; /* Kehyksen paksuus, kehyksen "malli" - Border style*/
        border-radius: 7px; /* Kehuksen pyöristetyt kulmat - Border corners rounded*/
        max-width: 100%;
        height: auto;
        margin: auto;
        border-color: var(--main-color); /*Kehyksen väri - Border color*/
    }

    button {
        font-size: 20px;
        background-color: var(--main-color); /*Napin taustaväri - Button background color*/
        color: white; /*Napin tekstin väri - Button text color*/
        border-radius: 10px; /*Napin reunuksen pyöristys - Button border rounded */
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        width: 100%;
    }
}

footer {
    text-align: center;
}

button:disabled, button:disabled:hover {
    opacity: 1.0;
    background-color: #777;
    cursor: default;
}