html {
	font-family:Helvetica,sans-serif;
	font-size:16px;
}
body {
	background-color:white;
	border-radius:6px;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px, rgba(0, 0, 0, 0.2) 0px 2px 4px, rgba(0, 0, 0, 0.2) 0px 4px 8px, rgba(0, 0, 0, 0.2) 0px 8px 16px, rgba(0, 0, 0, 0.2) 0px 16px 32px, rgba(0, 0, 0, 0.2) 0px 32px 64px;
	max-width:900px;
	margin:2em auto;
	padding:2em 2em 3em;
}
h1 {margin-top:0;}
form,input,button {font-size:1rem;}
textarea {
	border-radius:3px;
	width:99%;
}
textarea#output {background-color:#ddd;}
#submit, #copy-button {
	border:none;
	border-radius:6px;
	display:block;
	font-weight:bold;
	margin:1rem auto 1rem;
	padding:0.8rem 1.6rem;
	transition: all 0.15s ease-out;
}
#submit {
	background-color:#A70C6E;
	color:#fff;
}
#submit:hover {
	padding:0.8rem 3.2rem;
	box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;
}
#copy-button {
	background-color:#e39d00;
	cursor:copy;
}
#copy-button:hover {
	padding:0.8rem 3.2rem;
	box-shadow: rgba(227, 157, 0, 0.4) 5px 5px, rgba(227, 157, 0, 0.3) 10px 10px, rgba(227, 157, 0, 0.2) 15px 15px, rgba(227, 157, 0, 0.1) 20px 20px, rgba(227, 157, 0, 0.05) 25px 25px;
}

.option-box {
	background-color:#ddd;
	border:1px solid #666;
	border-radius:3px;
	display:inline-block;
	margin:4px 4px 4px 0;
	padding:0.3rem;
}
.option-box:hover {
	background-color:#A70C6E;
	border-color:#A70C6E;
	color:white;
}
.future-opt, .option-box.future-opt:hover {
	background-color:#999;
	border:1px solid black;
}
.future-opt label {
	color:#666;
}


/* tooltip */
[tooltip]{
  /*margin:20px 60px;*/
  position:relative;
  display:inline-block;
}
[tooltip]::before {
    content: "";
    position: absolute;
	top:100%;
    left:50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0,0,0,0.7) transparent transparent     transparent;
    z-index: 99;
    opacity:0;
	margin-top:8px;
	transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}

[tooltip]::after {
    content: attr(tooltip);
    position: absolute;
    left:50%;
	top:100%;
    transform: translateX(-50%)   translateY(-100%);
    background: rgba(0,0,0,0.7);
    text-align: center;
    color: #fff;
    padding:4px 2px;
    font-size: 12px;
    min-width: 80px;
    border-radius: 5px;
    pointer-events: none;
    padding: 4px 4px;
    z-index:99;
    opacity:0;
	margin-top:8px;
	transform: translateX(-50%) translateY(0%);
}

[tooltip]:hover::after,[tooltip]:hover::before {
   opacity:1
}