@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lugrasimo&display=swap');

body {

    background-color: rgb(148, 141, 131);
    color: rgb(104, 43, 43);
    font-family: "Montserrat", sans-serif;
    max-width: 100%;
}


p {

    
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
}

h1 {

font-size: 40px;
  font-family: "Lugrasimo", cursive;
  color: rgb(104, 43, 43);
  margin-left: auto;
    margin-right: auto;
    text-align: center;


}

form {
    background-color: #ebebeb;
    padding: 15px;
    max-width: 700px;
   margin-left: auto;
    margin-right: auto;

}

.pakollinen {

color: rgb(104, 43, 43);
}


.levee {
font-family: inherit;
font-size: inherit;
padding: 0.2em;
width: 100%;
box-sizing: border-box;
margin: 5px 0px 0px;

}

.nappi {

color: rgb(255, 255, 255);
border: none;
padding: 0.5em 1em;
width: 100%;
background-color: rgb(104, 43, 43);
font-size: 1.1em;
font-weight: bold;
letter-spacing: 1px;
box-shadow: 4px 4px 0px rgb(51, 15, 15);
border-radius: 3px;

}

.nappi:active {

    position: relative;
    top: 2px;
    left: 2px;
    box-shadow: none;

}

.nappi:hover {
    background-color: rgb(51, 15, 15);


}

.nappi:first-child {

    margin-bottom: 1em;


}

.nappi:last-child {

margin-top: 1em;

}


.numero {
    font-size: 1.5em;
    width: 3em;
    text-align: right;


}







table {

    width: 100%;
}

table input {

width: 100%;
margin: 0;

}

.vasen, .keski, .oikea {

    width: 33%;

}

.vasen {

    text-align: center;
}

.keski {

   text-align: center;

}

.oikea {

    text-align: center;
    
}