/* ----- CSS RESET --------------------
http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */

/* sub */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* -------- end of CSS RESET ----------------- */

/* for Wordpress */
input {
  all: unset;
}



:root {
  color-scheme: only light;
  --updatename: "";
  --bodybg: #000;
  /* --overlayanim: 300s; */
  --animspeed: 0.3s linear;
  --basecolor: 240;
  --darkness: 1;
  --saturation: 1;
  --bodytext: hsl(var(--basecolor), calc(var(--saturation) * 100%), calc(var(--darkness) * 93%));
  /* ddf */
  --lightrowbg: hsl(var(--basecolor), calc(var(--saturation) * 100%), calc(var(--darkness) * 87%));
  /* ccf */
  --lighterrowbg: hsl(var(--basecolor), calc(var(--saturation) * 100%), calc(var(--darkness) * 95%));

  --lightrowfg: hsl(var(--basecolor), calc(var(--saturation) * 11%), calc(var(--darkness) * 29.8%));
  /* 445 */
  --linkcolor: hsl(var(--basecolor), calc(var(--saturation) * 100%), calc(var(--darkness) * 83.5%));
  /* aaf */

  --menubg: hsl(var(--basecolor), calc(var(--saturation) * 20%), calc(var(--darkness) * 82%));
  /* bbc */
  --menufg: hsl(var(--basecolor), calc(var(--saturation) * 26%), calc(var(--darkness) * 42%));
  /* 66b */
  --menuhover: hsl(var(--basecolor), calc(var(--saturation) * 45%), calc(var(--darkness) * 80%));
  /* aad */


  --bordercolor: hsl(var(--basecolor), calc(var(--saturation) * 23.1%), calc(var(--darkness) * 56.4%));
  /* 77a -- replaces bordercolor in circlesmenu. this is so theme changes apply there also */



  --otherbg: hsl(var(--basecolor), calc(var(--saturation) * 5%), calc(var(--darkness) * 20%));
  --otherfg: hsl(var(--basecolor), calc(var(--saturation) * 100%), calc(var(--darkness) * 95%));
  /* ddf */

  --navbg: hsl(var(--basecolor), calc(var(--saturation) * 40%), calc(var(--darkness) * 70%));
  /* abf - approximate color */
  --navfg: hsl(var(--basecolor), calc(var(--saturation) * 100%), calc(var(--darkness) * 100%));

  --activesolid: hsl(calc(var(--basecolor) - 190), calc(var(--saturation) * 100%), calc(var(--darkness) * 65%));
  --active: hsla(calc(var(--basecolor) - 190), calc(var(--saturation) * 100%), calc(var(--darkness) * 65%), 0.8);

  --broken: hsl(calc(var(--basecolor) - 240), calc(var(--saturation) * 100%), calc(var(--darkness) * 50%));

  /* --delcolor: hsl(calc(var(--basecolor) - 240), calc(var(--saturation) * 100%), calc(var(--darkness) * 100%)); */
  --delcolor: var(--bodybg);



  --fontscale: 1;
  --mainfont: calc(var(--fontscale) * 24px);

  --navimgsize: 128px;
  --navheight: 50px;


  --animation: 0.2s;

  --rowheight: 38px;
  --rowmargins: 20px;

  --fixedwidth: 450px;

  --navheightflex: 10vw;

  --navimgflex: 25vw;

  --rowheightflex: 8vw;
  --rowmarginsflex: 4vw;

  --hidetrash: none;

}


/* ***************** */



body {
  border: none;
  background-color: var(--otherbg);
  color: var(--otherfg);
  /* font-weight: bold; */
  /* font-family: Arial,sans; */
  font-size: var(--mainfont);
  /* SMALLIFY 5vw */
  position: relative;
}




a {
  color: var(--linkcolor);
  cursor: pointer;
  text-decoration: none;
}

a:hover {
  color: var(--lightrowbg);
}

a:visited {
  color: var(--linkcolor);
}

a:hover:visited {
  color: var(--lightrowbg);
}


nav {
  position: fixed;
  background: var(--navbg);
  background-size: var(--navimgsize);
  height: var(--navheight);
  width: 100%;
  display: flex;
  text-align: left;
  vertical-align: middle;
  font-size: 120%;
  color: var(--navfg);
  /*	z-index:10;*/
  overflow: hidden;
  top: 0;

  text-shadow: 0.1em 0.1em 0.4em var(--otherbg),
    -0.1em -0.1em 0.4em var(--otherbg);

}



#getapp {
  position: absolute;
  bottom: 5%;
  right: calc(0.75 * var(--btnsize));

}

#getapp>img{
  height:1em;
}


/* 
  height: calc(0.45 * var(--btnsize));
  width: calc(0.45 * var(--btnsize));
  margin: auto;

  background-image: url('../img/install_app.svg');
  background-repeat: no-repeat;
  background-size: calc(0.45 * var(--btnsize)) calc(0.45 * var(--btnsize));
  top:50%;
	transform: translate(0,-50%);
  background-size: cover;
  border: none !important;
  background-color: transparent !important;
  background-image: url('../img/icon_android_bare.svg');
  filter: hue-rotate(100deg) saturate(1) brightness(1); */



main {
  padding-top: var(--navheight);
  /* TODO smallify */
}


#ob_main {
  background: var(--bodybg);
}


/*
nav #BAXmainlogo {
	height: var(--navheight);
	width: var(--navimgsize);
	background: url("../img/obwheel-normal.svg") no-repeat;
	background-size:  var(--navimgsize)  var(--navimgsize);
	background-position: 0 calc(-1*var(--navimgsize) / 4);
	display: block;
}
*/

nav #mainlogo {
  height: var(--navheight);
  width: var(--navimgsize);
  display: block;
  overflow: clip;
}


#mainlogo img {
  width: var(--navimgsize);
  position: relative;
  top: -55%;
}



/*
nav>a>img {
	height: var(--navimgsize);
	width: var(--navimgsize);
	margin-top: calc(-1*var(--navimgsize) / 4);
}
*/


nav span {
  position: relative;
  align-self: center;
}

nav #q_tag {
  font-size: 50%;
  line-height: 1.5em;
  margin-left: 0.6em;
}

#vnum {
  color: var(--navfg);
}


#vnum+#update {
  display: none;
  cursor: pointer;
  margin-left: 0.5em;
  color: var(--activesolid);
  /* font-size: 80%; */
  /* text-shadow: none; */
  /* background-color: var(--lightrowfg); */
  /* padding: 0.1em; */
  /* z-index: 10000; */
}

#q_tag a {
  color: var(--navfg);
}


#q_tag.getupdate #vnum {
  color: var(--activesolid);
  /* background: #000a; */
}

#q_tag.getupdate #update {
  display:inline
}





#menubtn {
  --btnsize: var(--navheight);
  position: fixed;
  /* TODO FIXME -- if menu is too long, can't scroll with fixed, and if absolute, the menu button scrolls out of view  */
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  align-items: center;
  cursor: pointer;
}


#menubtn .btn:first-child a {
  border-radius: var(--btnsize);
  border: none;
  background: transparent;
}

#menubtn .btn:first-child a:hover {
  background-color: var(--bodytext);
}



#menubtn .btn:not(:first-child) {
  font-size: 75%;
  border-top: 2px solid var(--navbg);
  cursor: pointer;
  background-color: var(--menubg);
  color: var(--menufg);
}

#menubtn .btn:not(:first-child):hover {
  background-color: var(--menuhover);
  transition: none;
}


.btn {
  text-transform: capitalize;
}