header{
  font-size:50px;
  text-align:center;
  padding:20px;
  color: White;
}

/*Central display*/
.flex-container {
  display: flex;
  flex-wrap:wrap;
  /*border:2px solid red;*/
}
.flex-child {
  flex: 1;
  /*border: 2px solid yellow;*/
  margin:5px;
}
.input-area {
  background-color:#597b80;
  border-radius:25px;
  padding:10px;
  color: #ffffff;
}
.input-title{
  text-align:center;
  font-size:20px;
}

button{
  background-color:#2b3b3f;
  width:50%;
  text-align:center;
  border-radius:10px;
  border:2px solid black;
  transform:translateX(50%);
  font-size:20px;
  font-family: Georgia;
  color: #ffffff;
  
}
button:hover{
  background-color:#81b1bd;
}
button:active{
  background-color:#81b1bd;
  transform:translate(50%, 2px);
}

/*Modifiers*/
.modifier{
  margin: 4px;
  background-color: #202C2F;
  border-radius: 4px;
  border: 2px solid black;
  overflow: hidden;
  flex:1 0 30%;
  min-width:100px;
}

.modifier label {
  float: left;
  width:100%;
}

.modifier label span {
  text-align: center;
  padding: 3px 0;
  display: block;
  width:100%;
}

.modifier label input {
  position: center;
  display: none;
  color: White !important;
}

.modifier label input + span{
  color: darkgrey;
  font-weight:bold;
  text-align:center;
}

.modifier input:checked + span {
  color: white;
  background-color:#81b1bd;
  font-weight:bold;
    padding: 3px 8px;
}


/*Footer stuff*/
footer{
  font-size:12px;
  text-align:center;
  bottom:0px;
  width:100px;
  padding:10px;
  margin:30px auto auto auto;
  background-color:lightgray;
  border-radius:25px;
}
.patreon-bg{
  margin:auto;
  width:30px;
  height:30px;
  background-color:#FF424D;
  border-radius:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.patreon-logo{
  width:50%;
  height:50%;
}

/* Dotted border */
hr.dotted {
  border-top: 2px dotted #1c2729;
    color: #2b3b3f;
}