:root {
  --hue_cycle_1_sat: 75%;
  --hue_cycle_1_lig: 50%;
}

html{
  margin:0;
  padding: 0px;
}

body{
  background-color: #EEE;
  margin:0;
  padding: 0px;
  text-align: center;
  position: relative;
}

#full_screen_background_container{
  position: relative;
  width:100%;
  height:100vh;
}

#home_link{
  background: #FFFFFF80;
  color:#000;
  position: absolute;
  top:32px;
  left:24px;
  padding:2px 12px;
  margin:0px;
  border:1px solid #00000080;
  border-radius: 16px;
}

#home_link:hover{
  background: #FFFFFFD0;
  color:#000;
}

#show_hide_button{
  background: #FFFFFF80;
  outline:2px solid #DDDDDD80;
}

#show_hide_button:hover{
  outline:2px solid #EEEEEEEE;
  background: #FFFFFFFF;
}

#info_box{
  background: none;
  /* width: 960px; */
  margin: 0px;
  padding: 0px 24px;
  position:absolute;
  top:32px;
  right:32px;
  border:0px solid #888;

}

#show_hide_container{
  background-color: #FFFFFF80;
  /* width: 960px; */
  margin: 0px;
  padding: 0px 24px;
  position:relative;
  border:4px solid #88888880;
  border-radius: 32px;
}

#info_box h1{
  font-family: sans-serif;
  font-size: medium;
}

section{
  margin: 20px auto;
  padding: 2px;
}

svg{
  background-color:#000;
  border:0px solid #888;
  width:100%;
  height:100%;
}

line, circle, rect, polygon{
  mix-blend-mode: screen;
}

@keyframes hue_cycle_1 {
  0% {fill: hsl(0, var(--hue_cycle_1_sat), var(--hue_cycle_1_lig))}
  40% {fill: hsl(90, var(--hue_cycle_1_sat), var(--hue_cycle_1_lig))}
  50% {fill: hsl(180, var(--hue_cycle_1_sat), var(--hue_cycle_1_lig))}
  60% {fill: hsl(270, var(--hue_cycle_1_sat), var(--hue_cycle_1_lig))}
  100% {fill: hsl(360, var(--hue_cycle_1_sat), var(--hue_cycle_1_lig))}
}

@keyframes example2 {
  0%   {fill: red;}
  25%  {fill: yellow;}
  50%  {fill: blue;}
  100% {fill: green;}
}

@keyframes example1 {
  from {fill: red;}
  to {fill: yellow;}
}

/*
polygon {
  fill: red;
  animation-name: hue_cycle_1;
  animation-duration: 14s;
  animation-iteration-count: infinite;
}
*/

aside.float_box{
  float:right;
}

div.float_clear_fix{
  clear:both;
}

div.inputs_box{
  margin:24px;
  padding: 24px;
  border:1px solid #666;
}

/*
div.input_slider_container{
  margin: 0 0 8px 0;
  padding: 0;
  width:320px;
}

h3.input_slider_title{
  margin:0px;
  padding:0px;
  line-height: normal;

}

input.input_slider{
  height: 25px;
}
*/

input.textBox_info{
  width:92px;
}

#download_links_container{
  text-align: left;
  padding-bottom: 16px;
}

div.input_item_container{
  border:1px solid #444;
  border-radius: 6px;
  background-color: #FBFBFB;
  padding:2px 6px 2px 6px;
  margin:2px 0px;
  font-family: sans-serif;
  font-size: small;
  display: inline-block;
}

div.input_radio_container{
  width:202px;
}

input[type="checkbox"], input[type="radio"]{
  cursor:pointer;
}

input[type="checkbox"]:hover, input[type="radio"]:hover{
  outline: 2px solid rgba(120,120,120,0.5);
}

div.download_checkbox_container{
  padding: 4px 0 0 8px;
  display: inline-block;
}

div.input_button{
  display: inline-block;
  width:120px;
  padding:2px 6px 2px 6px;
  border:1px solid #444;
  border-radius: 6px;
  background-color: #DDD;
  cursor:pointer;
  text-align: center;
}

div.input_button:hover{
  background-color: #BBB;
  outline: 1px solid rgba(120,120,120,0.5);
  text-decoration: underline;
}