@import url('theme/reset.css');
@import url('theme/template.css');

body {
   background-color:rgb(250,250,250);
}
form section {
   flex:1;
   display:grid;
   align-content:start;
}
form section header {
   display:flex;
}
form section header label {
   flex:1;
}
form section fieldset {
   display:grid;
   grid-template-columns:auto 1fr;
   grid-auto-rows:auto;
   grid-column-gap:0.5em;
	box-sizing:border-box;
	padding:0.5em;
}
form section fieldset span {
   text-align:center;
}

/*\

tab

\*/

form input[id='tab-snake']:not(:checked) ~ section header label[for='tab-snake'],
form input[id='tab-lizard']:not(:checked) ~ section header label[for='tab-lizard'],
form input[id='tab-squid']:not(:checked) ~ section header label[for='tab-squid'] {
   background-color:rgb(200,200,200);
}
form input[id='tab-snake']:checked ~ section fieldset:not([form='snake']),
form input[id='tab-lizard']:checked ~ section fieldset:not([form='lizard']),
form input[id='tab-squid']:checked ~ section fieldset:not([form='squid']) {
   display:none;
}
form input[id='tab-snake']:checked ~ section button:not([form='snake']),
form input[id='tab-lizard']:checked ~ section button:not([form='lizard']),
form input[id='tab-squid']:checked ~ section button:not([form='squid']) {
   display:none;
}