header {
  background-color: rgba(40,40,40);
}

body {
  background-color: rgb(25, 25, 25);
  color: white;
  margin: 0em 0em 1em 0em;
  padding: 0em;
}

p, a {
  font-family: 'Ubuntu Mono', monospace;
}

a {
  color: white;
}

a:hover {
  background-color: gray;
}

button {
  cursor: pointer;
  margin: .25em;
}

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid;
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #333;
	color: white;
	text-align: center;
	padding: .1em;
	font-size: .75em;
}

a {
	font-family: inherit;
}

.mv {
  display: grid;
  /* grid-template-columns: 1fr 1fr 1fr 1fr; */
  /* grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); */
  grid-template-columns: repeat(auto-fill, minmax(min(15em, calc(100vw - 5em)), 1fr));
  margin: 0em .25em;
}

.mv *:first-child {
  margin-top: .1em;
  padding-top: 0em;
}

.mv h2 {
  text-align: center;
  margin-bottom: .1em;
}

.mv-item {
  background-color: rgba(75, 75, 75);
  border: solid 1px black;
  border-radius: .5em;
  padding: .2em .5em;
  margin: .1em;
}

.mv-item p {
  padding: 0em;
  margin: 0em;
  /* color: white; */
  color: black;
}

.mv-title {
	margin-bottom: 0em;
	text-align: center;
	border-bottom: 1px white dotted;
	width: 95%;
	margin: 1em auto .15em auto;
}

.full-row {
  grid-column: 1 / -1;
}

.notification {
  background-color: rgb(40, 40, 40);
  border: 2px solid rgb(150, 150, 150);
  border-radius: 10px;
}

.notification p, .notification select, .notification input, .notification button {
  font-size: 1.2em;
}

.notification > *:first-child {
  margin-top: 0em;
  padding-top: 0em;
}

.notification h2 {
  text-align: center;
}

.notification-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: .25em;
  margin: 0em 0em .5em 0em;
}

.notification-grid p {
  margin: 0em;
  padding: 0em;
}

.account-window {
  max-width: 25em;
}
.account-offset {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
}
.account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: .5em 0em 1em 0em;

  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.account-grid * {
  padding: 0em;
  margin: 0em;
  display: inline;
}
.account-grid a, .account-grid p {
  /* font-size: .75em; */
  font-size: 1em;
}

.account-grid p {
  display: block;
}

.account-grid p:hover {
  background-color: gray;
  cursor: pointer;
}
.account-grid input {
  margin: 0em .5em;
}
.account-grid div:nth-child(odd) { text-align: left; }
.account-grid div:nth-child(even) { text-align: right; }
.account-hover {
  width: 100%;
  display: block;
}
.account-hover:hover {
  background-color: gray;
  cursor: pointer;
}


.error {
  color: red;
  margin: .25em 0em;
  padding: 0em;
}
.clickable {cursor: pointer;}

#hamburger-menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  max-width: 90%;
  background-color: rgba(30,30,30);
  min-width: 13em;
  z-index: 1;
}

#hamburger-menu p {
  font-size: 1.25em;
  margin: .5em 0em 0em 1em;
  padding: 0em;
}

.hamburger-button {
  font-size: 1em;
  width: 2em;
  padding: 0em;
  margin: .5em;
}

.clickable { cursor: pointer; }

.content {
  margin: 1em auto;
  padding: .25em;
  width: fit-content;

  background-color: rgb(40, 40, 40);
  border: 2px solid rgb(150, 150, 150);
  border-radius: 10px;
}

/* Touch screen device */
@media (pointer:coarse) {
  body {
    font-size: 1.25em;
  }
  .mv {
    grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
  }
}