/* mobile first */
 body {font-size: 1rem;}
 h1 {font-weight: normal; font-size:1.2rem}

/* kind of tablet */
@media screen and (min-width: 760px) {
  body {font-size: 1.5rem;}
  h1 {font-weight: normal; font-size:1.8rem}
}
/* kind of desktop */
@media screen and (min-width: 1024px) {
 body {font-size: 1.8rem;}
 h1 {font-weight: normal; font-size:2rem}
}


input { display: inline; }
form { display: inline; }

a img {outline : none;}


img.big {height:6.4rem;}
img.medium {width:2rem;}
img.icon {width:1.8rem;}


.par {}

.current {font-weight: 700;}

div.juggler:hover { background-color:#999999;}
div.toggler:hover { background-color:#999999;}

ul, #decomp {
  list-style-type: none;
  text-color: black;
    margin: 0; 
    padding: 0.5rem;   
}

.bigtx {font-size: 5rem;} 
.txp0, .txp1, .txp2, .txp3, .txp4, .txp5, .txp8, .txp9 {font-size: 6rem;} 


hr {
  border-top: 1px solid grey;
  width:50%;
}
.navbar {
  position: fixed;
  right: 5px;
  left: 5px;
  top: 0px;
  z-index: 1030;
}

.flex-topnav {
  display: flex;
  background-color: white;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap-reverse;  	
  border: 2px solid #AAAAAA;
  overflow: hidden;
  padding: 4px;
}

.nav-item {
  background-color: white;
  text-align: center;
  min-width: 60px;
}


.contentindex {
 /* position: fixed;
  right: 0;
  left: 0;
  top: 200;
 margin-top: 200px;  */
}


.content { margin-top: 80px;}

dl.grid {display: flex; flex-wrap: wrap;}
.grid dt {width: 160px; border-bottom-style:dotted; border-bottom-color: grey; border-bottom-width: 0px ;padding: 0 0;  margin-top: 0}
.grid dd { width: calc(100% - 165px); margin-left: 0; padding:0 0;  }

dl.gridw {display: flex; flex-wrap: wrap;}
.gridw dt {width: 100px; border-bottom-style:none; border-bottom-color: grey; border-bottom-width: 1px ;padding: 0 0;  margin-top: 0}
.gridw dd {width: calc(100% - 110px); margin-left: 0; padding: 0 0;  }


dl.gridm {display: flex; flex-wrap: wrap;}
.gridm dt {width: 120px; border-bottom-style:none; border-bottom-color: grey; border-bottom-width: 1px ;padding: 0 0;  margin-top: 0}
.gridm dd {width: calc(100% - 130px); margin-left: 0; padding: 0 0;  }

dl.grids {display: flex; flex-wrap: wrap;}
.grids dt {width: 80px; padding: 0em 0;  margin-top: 0}
.grids dd { width: calc(100% - 90px); margin-left: 0; padding: 0em 0;  }


iframe { height: 90vh ; width: 100%; border:0; }

ul.icons {
	padding-left: 1em;   
}

ul.icons li::before{
  content: '';
  display: inline-block;
  height: 1em;
  width: 1em;
}

li.links {
    background-image:url(statics/links.svg);
	background-repeat: no-repeat;
	background-position: left center;    
    background-size: 1em;
}    

li.megaphone {
  background-image:url(statics/megaphone.svg)   ;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1em;
}    

li.megaphone2 {
  background-image:url(statics/megaphone2.svg)   ;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1em;
}    

li.approx {
  background-image:url(statics/approx.svg)   ;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1em;
}    

li.partchar {
  background-image:url(statics/partchar.svg)   ;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1em;
}   

li.permutation {
  background-image:url(statics/permutation.svg)   ;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1em;
}  

li.c {
  background-image:url(statics/circ-c.svg)   ;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1em;
}  

li.w {
  background-image:url(statics/circ-c.svg)   ;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1em;
}  

li.h 
  background-image:url(statics/circ-h.svg)   ;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1em;
}  

details>summary {
   list-style: none;
 }
 summary::-webkit-details-marker {
   display: none
 }
details  {
  padding: 2px 6px;
  background-color: #fff;
  border: none;
  box-shadow: 3px 3px 3px grey;
}
summary::-webkit-details-marker,	
summary::marker {
  color: grey;
}	

details[open] summary::-webkit-details-marker,
details[open] summary::marker {
  color: grey;
}

ruby {
  ruby-position: over;
}