body{
font-family: Arial, sans-serif;
margin: 0;
display: flex;}
.container{
height: auto;
width: 55%;
margin: 0 auto;
padding: 20px;
background-color: rgb(255, 255, 255);
border-radius:15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.hidden{display: none;}
.content{margin-top: 20px;}
.content{flex: 1; padding: 20px; margin-bottom: 15px; overflow-y:auto; text-align: center;}
.content h1{
margin-top: 0;
font-weight: bold;
font-family: Georgia;
margin-bottom: 20px;}
header{
font-size: 88px;
font-weight: bold;
font-family: Georgia;
margin: 0;
padding: 0px 20px 80px 20px;
text-align: center;}
button{
background-color:rgb(0, 0, 0);
color:rgb(255, 255, 255);
border-radius:5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
button:hover{
background-color:rgb(255, 255, 255);
color:rgb(0, 0, 0);
cursor:pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
button#nextpage,button#save{
display:block;
margin: 20px auto;
padding: 10px 20px;}
/* NAVIGATION */
.sidebar{
width: 200px;
display: flex;
flex-direction: column;
overflow-y: auto;
transition: transform 0.3s ease;}
.sidebar a{
background-color: rgb(255, 255, 255);
padding: 15px;
text-decoration: none;
color: rgb(0, 0, 0);
border: solid 0.01rem rgb(0, 0, 0);
display: block;}
.sidebar a:hover{
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
cursor:pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.menu-button{
display: none;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
padding: 10px;
border: none;
font-size: 16px;
cursor: pointer;}
/* INPUT */
input{
margin: 0;
padding: 0;
font-size: .9rem;
text-align: center;}
label{
margin: 0;
padding: 0;
font-size: .9rem;
font-weight: bold;}
/* DATA FIELDS */
input #username{
width: 10rem;}
.grid-container1 input{
resize: none;
text-align: center;
height: auto;
width: 6rem;
padding: 0;
margin: 5px 0px 5px 0px;
border: 1px solid rgb(0, 0, 0);
border-radius: 4px;}
/* END OF DATA FIELDS */
h4{margin:0 ;
padding: 0;
text-align:center}
h2{text-align:center}
/* FOOTER */
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color:rgb(0, 0, 0);
color:rgb(255, 255, 255);
text-align: center;
font-weight: bold;
padding: .5rem;}
/* SMALLER SCREENS */
@media(max-width: 768px){
body{flex-direction: column;}
.sidebar{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 150px;
transform: translateX(-100%);}
.sidebar.open{
transform: translateX(0);}
.menu-button{
display: block;
margin: 10px;}
.item14 textarea {width: 6rem;}}