:root {
  --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", "Verdana", "Arial",
    sans-serif;
  
  --bg-h: 200,200,200;
  
  --bg-nsf: 250,0,0;
  --bg-navb: 212,201,55;
  --bg-navbs: 173,256,230;
  --color-n: black;
  
  --bg-m: 212,201,55;
 
  color-scheme: light dark;
}



@media screen and (max-width: 500px){

body tr, body th{
    display: block;
    padding: 10px 10px;}
body tr {
    border: 1px solid black;}
}


@media  (min-width: 1000px) { 
body main tr,th {
    font-size: 1.3em;
}
}

@media (prefers-color-scheme: dark) {
	:root {
	  --text-color: #ffffff;
	}
}

@media (prefers-color-scheme: light) {
	:root {
	  --text-color: #000000;  
	}
}

table {padding: 1px 1px;
   border: 1px solid silver;
   border-radius: 15px;
   width: 100%;}
tr,th {
   padding: 20px 20px;
   border: 1px solid silver;
   border-radius: 15px; 
   } 
  
.tabbed figure { 
   display: block; 
   margin-left: 0; 
   border-bottom: 0px solid silver;
   clear: both;
    } 
.tabbed > input,
.tabbed figure>div { display: none; }
.tabbed figure>div {
  padding: 8px 15px;
  width: 100%;
  border: 1px solid silver;
  background: rgba(212,201,55,0.9);
  box-shadow: inset 0 0 18px #37D447;
  line-height: 1.3em;
  font-size: 0.8em;
  text-align: center;
  letter-spacing: 0.3px;  
  border-radius: 15px;
  }
#tab1:checked ~ figure .tab1, #tab2:checked ~ figure .tab2, #tab3:checked ~ figure .tab3,
#tab4:checked ~ figure .tab4,
#tab5:checked ~ figure .tab5,
#tab6:checked ~ figure .tab6 { 
display: block; } 
figure nav label {
   float: left;
   text-align: center;
   color: black;
   font-size: 0.8em;  
   width: 100%;
   padding: 8px 15px;
   border: 1px solid rgba( var(--bg-m),0.5);
   background: rgba(212,201,55,0.9);
   box-shadow: inset 0 0 30px 0 red;
   border-radius: 15px;
   font-weight: bold;
   }
figure nav label:nth-child(1) {
    border: 1px solid silver;}
figure nav label:hover {
    background: rgba(212,201,55,0.5);
  box-shadow: inset 0 0 18px #37D447;    
  cursor: pointer;  }
figure nav label:active { 
    background: rgba(212,201,55,0.5);
  box-shadow: inset 0 0 18px #37D447;
  color: var(--text-color);
  }
#tab1:checked ~ figure nav label[for="tab1"],
#tab2:checked ~ figure nav label[for="tab2"],
#tab3:checked ~ figure nav label[for="tab3"],
#tab4:checked ~ figure nav label[for="tab4"],
#tab5:checked ~ figure nav label[for="tab5"],
#tab6:checked ~ figure nav label[for="tab6"] 
 {background: rgba(212,201,55,0.5);
  box-shadow: inset 0 0 18px #37D447;
  font-weight: bold;
  position: relative;
  border-bottom: 0px;
  color: var(--text-color);
  }
  
#tab1:checked ~ figure nav label[for="tab1"]:after,
#tab2:checked ~ figure nav label[for="tab2"]:after,
#tab3:checked ~ figure nav label[for="tab3"]:after,
#tab4:checked ~ figure nav label[for="tab4"]:after,
#tab5:checked ~ figure nav
label[for="tab5"]:after,
#tab6:checked ~ figure nav
label[for="tab6"]:after
{content: "";
  display: block;
  position: absolute;
  height: 0px;
  width: 100%;
  background: black ;
  left: 0;
  bottom: -1px;}