/* global tools & other curiosities */
#convenience {
  /*vscode color selection toy*/
  color:rgb(0, 0, 0);
}

:root {
  --color-blue: 69, 111, 186;
  --color-blue-dark: 8, 12, 19;
  --color-cream: 240, 220, 209; 
  --color-light: 238, 247, 238;

  --theme-light: var(--color-light);
  --theme-light-alt: var(--color-cream);
  --theme-dark: var(--color-blue-dark);

  --blur: blur(3px);
  --box-background: var(--theme-light);
  --box-background-a: rgba(var(--theme-light),1);
  --box-border: 1px solid rgba(var(--theme-dark),1);
  --box-backdrop-filter: var(--blur);
  --text-primary: var(--theme-light-alt);
  --text-secondary:var(--theme-dark);

  /* it's not fun to get lost */
  --z-low: 10;
  --z-mid: 20;
  --z-front: 30;
  --z-top: 999;

  --content-height:90%
}
body {
    margin:0px;
    background-color: rgba(var(--theme-light));
    image-rendering: pixelated;
    font-family: 'librebaskerville';
    color: rgba(var(--text-secondary),1);
    display:block;
    align-content: center;
    text-align: center;
    height:100dvh;
    max-height: 100dvh;
    width:100vw;
    margin:0px;
    padding:0px;
}



.blur {
  backdrop-filter: var(--blur);
}

.solid {
  --bg-opacity: 1;
  background-color: rgba(var(--box-background),var(--bg-opacity));
  /*backdrop-filter: var(--blur);*/
}

.background {
  position:fixed;
  height: 100%;
  width: 100%;
  top:0px;
  left:0px;
  opacity: 1;
  background-size: cover;
  background-position: center;
  image-rendering:pixelated;
  pointer-events: none;
}

.center-grid {
  height:100%;
  width:100%;
  display:grid;
  place-items: center;
  z-index: var(--z-low);
  position:relative;
}

.card {
  border: var(--box-border);
  min-height: 10ch;
  z-index: var(--z-low);
  padding: 5%;
}

div,main,aside,nav {
  box-sizing: border-box;
}

h1 {
  font-size: 1.6em;
}
h4 {
  margin:5px;
}

li {
    list-style-type: none;
    padding:0px;
    margin:0px;
}
ul {
  padding:0px;
  margin:0px;
}

summary {
  cursor: pointer;
  user-select: none;
}

.opacity-hover {
  opacity:0.8;
}
.opacity-hover:hover{
  opacity:1;
}

code {
  font-size: 1.3em;
  font-family: 'libertinusmono';
  color: rgba(var(--text-primary),1);
  background-color: rgba(var(--theme-dark),1);
}
a{
 color:blue;
}