/*
https://stackoverflow.com/questions/48814993/html-details-summary-element-marker-styling
CSS is applying content: "-"; to all summary:after elements within details[open], so it cascades to children too.

applying it to only direct children of the parent element with a child combinator (>)

details[open] > summary:after {
    content: "-";
}

@media screen and (min-width: 512px){
  div.container { position:absolute; top: 10; left:100; right:100; bottom:100 }
}
*/




/*
animate opening:
adding the [open] attribute on the DETAILS tag, it only fires the animation keyframe when clicked
SUMMARY ~ * means: all elements after the SUMMARY tag, so that the animation applies to those, and not the SUMMARY element as well
*/
details[open] summary ~ * { animation: sweep 0.2s ease-in-out; }
/*
@keyframes sweep {
  0%    {opacity: 0; margin-left: -4px}

  100%  {opacity: 1; margin-left: 0px}
}
*/

@keyframes sweep {
  /* 0%    {opacity: 0; margin-top: -14px; margin-left: -14px; font-size:0.3em } */
  0%    {opacity: 0; margin-top: 10px; margin-left:10px; font-size:0.1em }
  100%  {opacity: 1; margin-top: 0px; margin-left: 0px; font-size:var(--summary-size) }
}

:root {
    /* https://htmlcolorcodes.com/ */
    --summaryfont: "BillHair", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --summarysize: 1.8em;
    --linkfont: "BillWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --main-clickable-color: #0068FF;
    --textfont: "BillHair", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --main-fg-color: #000000;
    --textsize: 1.5em;
    --linksize: 1.1em;
    --main-hover-bgcolor: #1474FF;
    --main-hover-fgcolor: #CAE0FF;
}

@font-face {
    font-family: 'bill_regularregular';
    src: url("fonts/bill_0021k-webfont.eot");
    src: url("fonts/bill_0021k-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/bill_0021k-webfont.woff") format("woff"), url("fonts/bill_0021k-webfont.ttf") format("truetype");
    font-weight: normal; font-style: normal;
}
@font-face {
    font-family: 'BillWeb';
    src: url("fonts/bill-web.eot");
    src: url("fonts/bill-web.woff") format("woff"), url("fonts/bill-web.ttf") format("truetype"), url("fonts/bill-web.svg#Bill Regular") format("svg");
    font-weight: normal; font-style: normal; font-stretch: normal;
}
@font-face {
    font-family: 'BillHair';
    src: url('fonts/bill-hair.eot');
    src: url('fonts/bill-hair.eot?#iefix') format('embedded-opentype'),
    url('fonts/bill-hair.woff') format('woff'),
    url('fonts/bill-hair.ttf') format('truetype'),
    url('fonts/bill-hair.svg#BillHair') format('svg');
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
}


details > details { margin:20 0 0 0; }
/* details > details[open] summary ~ * { animation: sweep 0.2s ease-in-out; } */
/* html{ font-family: "BillHair", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.2em; } */

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
body{
    font-family: var(--textfont);
    font-size:var(--textsize);
    scroll-behavior: smooth;
}

div.container { position:absolute; top: 10; left:100; right:100; bottom:100 }


details{ margin:10 0 10 0 }
details > details { margin:10 0 10 0; }

summary{ color:var(--main-clickable-color); font-family: var(--summaryfont); margin:4 0 4 0; font-size:var(--summarysize); text-align:left }
summary:hover{ background-color:var(--main-hover-bgcolor); color:var(--main-hover-fgcolor) }
details summary::-webkit-details-marker { display:none }
details summary::marker { display:none }

p{ font-family: var(--textfont); color:var(--main-fg-color); margin:4 0 4 0 }

a{ font-family: var(--linkfont); color:var(--main-clickable-color); margin:0 4 0 4; text-decoration:none; font-size:var(--linksize) }
a:hover{ background-color:var(--main-hover-bgcolor); color:var(--main-hover-fgcolor) }
a:visited{ color:var(--main-clickable-color) }
a:visited:hover{ color:var(--main-hover-fgcolor) }

i{ letter-spacing: 0.3em; font-style: normal; }