* {
  box-sizing: border-box;
  margin: 0;
}

html, body { height: 100vh }

body{
  width: 780px;
  margin: 0 auto;
  background-color: #c0c0c0;
//  overflow-y: hidden;
}

/*
body > div.scroll {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
  text-align: center;
}
*/

a.button {
  display: block;
  color: black;
  text-decoration: none;
  font-size: 92px;
  padding: 2rem;
  background: #DDD;
  border-radius: 0.5rem;
  text-align: center;
}
a.button:hover { background: #EEE }
a.button:visited { color: black }

a.menu {
  text-decoration: none;
  color: yellow;
  font-size: 32px;
  text-align: center;
}

a:visited.menu { color: yellow }

button {
  font-size: 32px;
  padding: 2rem 0.5rem;
}

div.box, span.box {
  border:7px double red;
  background-color:black;
  color:white;
  padding:13px;
  text-align:center;
  font: normal 24px Arial;
}

form {
  display: flex;
  flex-flow: column;
}

input.frm {
  font-size: 20px;
  padding: 0.5rem;
}

video { width: 100% }

.errors, .onlineerror { color: red }

.flex { display: flex }
.flex-col { display: flex; flex-direction: column; }
.flex-1 { flex: 1 }
.items-center { align-items: center }

.sticky { position: sticky }
.top { top: 0 }

.toggle {
  font-size: 24px;
  padding: 2rem;
  background: #DDD;
  border-radius: 0.25rem;
  cursor: default;
}

.toggle.selected {
  background: #0000FF;
}


@media (max-width: 360px) {
  body: { width: 360px }
}

@media (min-width: 780px) {
  body: { width: 780px }