@media screen {

html {
	height:max-content;
  margin:0;
  padding:0;
}

body {
	min-height:100%;
  margin:0;
  padding:0;
  /* Stop Copy Selection */
  user-select: none;
}

#site_wrapper {
	bottom:0;
  display:block;
  font-family:sans-serif;
	left:0;
  margin:0;
  padding:0;
  position:absolute;
  right:0;
  top:0;
}

.header, .footer {
  background-color:rgb(64,64,64);
  color:white;
  display:inline-block;
	font-size: 1.5em;
  margin:0;
  padding: 0.4em 0 0.5em 0;
  text-align: center;
  width:100%;
}

.header h1, .header h3 {
    display:inline;
    margin:0;
    padding:0;
}

.sub_header {
    padding: 0.6em 0 0 0;
}

#blocks {
	display:block;
	font-family:sans-serif;
	padding-bottom:1em;
	padding-top:1em;
	position:relative;
  text-align: center;
  width:100%;
}

#blocks .block {
	background-color:#FFF;
	color:dark-gray;
	display:inline-block;
	margin:2em;
	padding: 0 1em 0 1em;
	position:relative;
	width:15em;
}

#grnButton, #redButton {
	appearance:auto;
	cursor:pointer;
	border:2px gray solid;
	border-radius:0.5em;
	color:white;
	font-size:2em;
	font-weight:bold;
	height:2em;
	width:5em;
}

#main {
	font-size:1em;
	max-width:30em;
}

#mask{
	align-items: center;
	background-color:rgba(0,0,0,0.7);
	bottom:0;
  display: flex;
	left:0;
	justify-content: center;
	position:absolute;
	right:0;
	top:0;
}

#auth{
	background-color: white;
	border-radius: 1em;
  display: flex;
	height: 16em;
  flex-flow: row wrap;
	justify-content: center;
	padding: 1em;
  width: 22em;
}

input {
  display: inline;
	font-size:1.2em;
	height: 1.4em;
	margin:1em;
}

label {
	font-size:1.1em;
	margin:1em;
}

#authbtn {
	cursor:pointer;
  display: inline;
}
}

@media
screen and (max-width: 60em) and (orientation: landscape),
screen and (max-width: 30em) and (orientation: portrait) {
/* Size of Item Blocks */
#blocks .block {
	font-size:1.5em;
	width:70vw;
}
}