.menu {
	width: 100%;
	text-align: right;
	padding-top: 30px;
}
.menu a {
	padding: 20px;
	font-weight: bold;
}
#frame {
	max-width: 60em;
	margin: auto;
	margin-top: 5em;
	font-family: Arial, Helvetica, sans-serif;
  }
  .intro {
	  text-align: center;
	  max-width: 22em;
	  margin: auto;
	  margin-bottom: 50px;

  }
  .intro h1 {
	  color:brown;
  }

  .intro h3 {
	color:#555;
}

  #input {
	border: 1px solid grey;
	margin: 0 0 0.25em;
	width: 100%;
	font-size: 120%;
	box-sizing: border-box;
  }
  #render {
	  padding: 10px 20px;
	  font-size: 15px;
	  outline: none;
	  border: none;
	  font-weight: 500;
	  background-color: brown;
	  color: #fff;
	  cursor: pointer;
  }
  #output {
	font-size: 120%;
	margin-top: 0.35em;
	border: 1px solid grey;
	padding: 0.25em;
	min-height: 2em;
	overflow-y: scroll;
  }
  #output > pre {
	margin-left: 5px;
  }
  .lr {
	  display: flex;
	  justify-content: space-between;
  }
  #mobile-notice {
	  padding: 20px;
	  margin: 10px;
	  margin-bottom: 50px;
	  border: 2px solid red;
	  display: none;
	  position: relative;
  }
  .close {
	  padding: 10px 20px;
	  font-weight: bold;
	  font-size: 30px;
	  position: absolute;
	  right: 0;
	  top: 0;
	  background: red;
	  cursor: pointer;
  }

  #download-img {
	  margin-top: 10px;
	  padding: 10px 20px;
	  font-size: 15px;
	  outline: none;
	  border: 2px solid brown;
	  font-weight: 500;
	  background-color: transparent;
	  color: brown;
	  cursor: pointer;
	  display: none;
  }

  .options {
	  display: flex;
	  flex-wrap: wrap;
	  margin-top: 20px;
  }

  .tips h4 {
	  margin-bottom: 1px;
  }

  .tips ul {
	  margin-top: 0;
	  padding-left: 23px;
  }
  .tips li {
	  font-size: 15px;
	  font-style: italic;
  }

  @media(max-width:550px){
	#mobile-notice {
		display: block;
	}

}