style.css

body{
    font-family:'Roboto mono';
    background-color: #E2D0BE;
    text-align: center;
    justify-content: center;
}

h1{
    text-align: center;
    border-bottom: 3px solid black;
    padding-bottom:3px;
    margin-bottom: 30px;
}

h4{
    margin-top:0px;
    margin-bottom:5px;
}

.rowel{
    margin:0px;
}


.word{
    text-align:center;
}

.value{
    text-align:center;
    width: 100%;
    background: #5FAD56;
}

.col{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: stretch;
    background:#D3C1C3;
    border: 2px solid black;
    margin: 2px;
    padding: 4px;
    padding-top:0px;  
}

.row{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;
    margin:-5px;
}

#bdiv{
    width: 100%;  
    height: 100px;  
    display: flex;  
    justify-content: center;  
    align-items: center;
    
}

form{
    position: relative;
    margin-top: 20px;
}

input{
    margin-top: 15px;
    text-align: center;
    background: transparent;
    border: none;
    border-bottom: 1px solid #000000;
}

input:focus{
    outline:none;
    border-bottom: 2px solid black;
}

#button {
    font-family:'Roboto mono';
    text-align:center;
    background-color: #5FAD56; /* Green */
    border: none;
    color: white;
    text-shadow: 1px 1px#6d6b6b;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 2px 3px #888888;
  }

  #button:hover {background-color: #393f39}

#button:active {
  background-color: #3e8e41;
  box-shadow: 1px 2px #666;
  transform: translateY(4px);
}