/*defaults*/
html, body {
  margin: 0;
  height: 100%; /* can also use viewport units (height: 100vh) */
}

*{
  font-family: monospace;
}

form {
    text-align: center;
}

div{
    text-align: center;
}

a{
  padding: 10px;
  text-align: center;
  font-size: 20px;
  background: #1abc9c;
  color: white;
  border: white;
  border-style: solid;
  border-width: 1px;
  text-decoration: none;
}

na{
  padding: 10px;
  text-align: center;
  font-size: 20;
  background: lightgray;
  color: white;
  border: white;
  border-style: solid;
  border-width: 1px;
  text-decoration: none;
}

.item{
    color: white;
    white-space: pre;
    font-family: monospace;
    font-size: 16;
    text-align: center;
    background: lightgray;
    border: black;
    border-style: solid;
    border-width: 1px;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  width: 100%
}

/*flex*/
body{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

main{
  flex: 1;
  overflow: auto;
  /*overflow*/
  display: flex;
  justify-content: center;
}

.content{
    max-width: 1000px;
}

/*headers*/
.header{
  /*grid display to allow for left, right, center*/
  display: grid;
  grid-auto-columns: 1fr;
  /*features*/
  padding: 10px;
  background: lightgray;
}

.header .left{
  grid-column: 1;
  display: flex;
  justify-content: flex-start;
}

.header .center{
  grid-column: 2;
}

.header .right{
  grid-column: 3;
  display: flex;
  justify-content: flex-end;
}

#project_header{
  background: #1abc9c;
  color: white;
  border-color: lightgray;
  border-style: solid;
  border-width: 1px;
}

#page_header{
  background: lightgray;
}


/*Column containers*/
.row{
  display: flex;
  flex-wrap: wrap;
}

.row button{
  padding: 5px;
}

.row_data{
  display: flex;
  justify-content: center;
}

/*Columns*/
.text{
  flex: 100%;
  padding: 10px;
  text-align: left;
}

.data{
  padding: 10px;
  text-align: center;
  font-size: 20;
  background: #1abc9c;
  color: white;
  border: white;
  border-style: solid;
  border-width: 1px;
}

.button-row{
  display: flex;
  border: none;
}

.add_form{
  display: flex;
  flex-direction: column;
}