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

html, body {
  box-sizing: border-box;
  margin: 0;
  font-family: Avenir;
}

div {
  #flex-wrap: wrap;
}

h1 {
  margin-top: 2rem;
}

div.inputdiv label {
  margin: 1rem 0 0.2rem 0;
}

div.inputdiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

div.button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(#cde, #def);
  border-radius: 0.2rem;
  color: #234;
  height: 2rem;
  width: 10rem;
}

input, select, textarea {
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  background: linear-gradient(#aaa, #ddd);
  outline: none;
  font-family: Avenir;
}

button, input[type=submit] {
  padding: 0.5rem 2rem;
  border: none;
  border-radius: 0.25rem;
  background: linear-gradient(#ddd, #aaa);
  margin: 1rem;
}

button:hover, input[type=submit]:hover {
  background: #bfbfbf;
}

button:active, input[type=submit]:active {
  background: linear-gradient(#aaa, #ddd);
}

button.blue, div.button.blue {
  background: linear-gradient(#48c, #048);
  color: #eee;
}

button.blue:hover, div.button.blue:hover {
  background: #26a;
}

button.blue:active, div.button.blue:active {
  background: linear-gradient(#048, #48c);
}

button.green, div.button.green {
  background: linear-gradient(#4a4, #060);
  color: #eee;
}

button.green:hover, div.button.green:hover {
  background: #282;
}

button.green:active, div.button.green:active {
  background: linear-gradient(#060, #4a4);
}

button.yellow, div.button.yellow {
  background: linear-gradient(#ee0, #880);
  color: #111;
}

button.yellow:hover, div.button.yellow:hover {
  background: #cc0;
}

button.yellow:active, div.button.yellow:active {
  background: linear-gradient(#880, #ee0);
}

button.orange, div.button.orange {
  background: linear-gradient(#fa4, #c60);
  color: #111;
}

button.orange:hover, div.button.orange:hover {
  background: #d82;
}

button.orange:active, div.button.orange:active {
  background: linear-gradient(#c60, #fa4);
}

button.red, div.button.red {
  background: linear-gradient(#d55, #611);
  color: #eee;
}

button.red:hover, div.button.red:hover {
  background: #933;
}

button.red:active, div.button.red:active {
  background: linear-gradient(#611, #d55);
}

button.gray, div.button.gray {
  background: linear-gradient(#ddd, #aaa);
  color: #000;
}

button.gray:hover, div.button.gray:hover {
  background: #ccc;
}

button.gray:active, div.button.gray:active {
  background: linear-gradient(#aaa, #ddd);
}

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

form textarea {
  #margin-top: 1rem;
}

div.dropdown {
} 

div.dropdown label.droplabel {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  border-radius: 0.25rem;
  background: #bbb;
  color: #222 !important;
  width: 50%;
  margin: 0 !important;
  padding-left: 1rem;
}

div.dropdowncontent {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  box-shadow: 0px 8px 24px #012;
  z-index: 1;
  width: 100%;
  margin-left: 0.5rem;
  background: #eee;
  color: #123;
  border-radius: 0.25rem;
}

div.dropdown:hover .dropdowncontent {
  display: flex;
}

div.dropdowncontent p {
  width: 98%;
  padding: 0.25rem 0 0.25rem 0.5rem;
  margin: 0;
}

div.dropdowncontent p:hover {
  background: #555;
  color: #eee;
}

div.dropdowncontent p:active {
  /*background: #fff;
  color: #000;*/
}

div.section.outer {
  color: #ddd;
  margin: 1rem;
}

div.section.outer label {
  font-size: 1.2rem;
}

div.section div.inner {
  height: 90%;
  width: 15vw;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #ddd;
  color: #ddd;
}

div.section .inner label {
  font-size: 0.9rem;
}

div.section div.inner input,
div.section div.inner select,
div.section div.inner textarea,
div.section div.inner button  {
  width: 10vw;
  padding: 0.25rem 0.5rem;
  margin: 0 0.5rem;
}