/* ---------font import------- */

@font-face {
  font-family: VG5000;
  src: url("/font.otf") format("opentype");
}

/* --------------------------- */

/* --------main stuff--------- */

:root {
  --main-color: #5ac26a;
}


body {
  background-color: #0b0b0b;
  color: #dee3df;
  font-family: VG5000;
  font-size: 1.4rem;
  list-style-type: none;
  text-transform: lowercase;
  padding: 15px;
}

footer {
  margin-top: 10em;
  font-size: 80%;
}

footer img {
  height: 20px;
  width: auto;
}

h2 {
  text-align: center;
}

/* --------------------------- */

/* --------events table------- */

.time:before {
  content: "⌛ ";
  color: var(--main-color);
}

.time,
.time-upcoming {
  margin: 5px;
}

.time-upcoming:before {
  content: "🗓 ";
  color: var(--main-color);
}

.events li {
  list-style-type: none;
  font-size: 80%;
  line-height: 2.2;
}

.events {
  padding-top: 10px;
  padding-bottom: 10px;
}

.events ul {
  padding-left: 8px;
}

.event {
  display: inline-block;
  text-decoration: dashed underline gray;
}

.event:before {
  content: "✓ " !important;
  color: var(--main-color);
}

/* --------------------------- */

/* --releases class (music)--- */

.release {
  display: inline list-item;
}

.release a img {
  display: none;
}

.release-long:before {
  content: "♬ ";
  color: var(--main-color);
}

.release-mid:before {
  content: "♫ ";
  color: var(--main-color);
}

.release-mix:before {
  content: "📶 ";
  color: var(--main-color);
}

.release-mix {
  text-decoration: dashed underline gray;
  display: inline-block;
}

.release-short:before {
  content: "♪ ";
  color: var(--main-color);
}

.releases:before {
  content: "♫ ";
  color: var(--main-color);
}

.release-mixes:before {
  content: "🌊 ";
  color: var(--main-color);
}


.release:hover+sub .alt-link {
  display: none;
}

.release a:hover img {
  display: block;
  height: 10%;
  width: 10%;
  object-fit: scale-down;
}

.release-short {
  text-decoration: dashed underline gray;
  display: inline-block;
}

.release-mid {
  text-decoration: dashed underline gray;
  display: inline-block;
}

.release-long {
  text-decoration: dashed underline gray;
  display: inline-block;
}

.releases-list {
  padding-top: 10px;
  padding-bottom: 10px;
}

.releases-list ul {
  padding-left: 8px;
}

.releases-list li {
  list-style-type: none;
  font-size: 80%;
  line-height: 2.2;
}

/*  --------------------------- */


/* -alternate link (subscript)- */

.alt-link {
  display: inline-block;
}

/*  --------------------------- */


/* -stuff-rows classes (dirs)-- */

.stuff-rows {
  outline: 1px dotted var(--main-color);
  margin: 8px;
  text-wrap: balance;
}

/*  --------------------------- */


/* ---entries list (writings)--- */

.entries-list li {
  list-style-type: none;
  font-size: 80%;
  line-height: 2.2;
}

.entry-review-igloo {
  text-decoration-thickness: 2px;
}

.entry-review-igloo:before {
  content: "📡  ";
  color: var(--main-color);
}

.entries-list {
  padding-top: 10px;
}

.entries-list li {
  padding-top: 8px;
}

/* --------------------------- */



/* -------bidules list-------- */

.bidules-list li {
  list-style-type: none;
  font-size: 100%;
  line-height: 2.2;
}

.bidule-sound {
  text-decoration-thickness: 2px;
}

.bidule-sound:before {
  content: "📡  ";
  color: var(--main-color);
}


.bidules-list {
  padding-top: 10px;
}

.bidules-list li {
  padding-top: 8px;
}


/* ---------menu------------- */

#menu ul {
  list-style-type: none;
  padding-left: 0;
}

#menu li {
  display: inline-block;
}

#index:before,
#thingsmenu:before,
#about:before,
#gallery:before,
#entries:before,
#streams:before,
#zines:before,
#bidules:before,
#portfolio:before {
  font-size: 100%;
  margin-left: 8px;
  margin-right: 4px;
  color: var(--main-color);
}

#index:before {
  content: "⌂ ";
}

#gallery:before {
  content: "🖼 ";
}

#entries:before {
  content: "✏ ";
}

#thingsmenu:before {
  content: "🛰 ";
}

#about:before {
  content: "🌀 ";
}

#streams:before {
  content: "➰  ";
}

#bidules:before {
  content: "🌊 ";
}

#portfolio:before {
  content: "📙 ";
}

/* --------------------------- */


/* -----title icons (pages)----- */

#streamcontain {
  position: relative;
}

#hometitle:before {
  content: "⌂ ";
  color: var(--main-color);
}

#notfound:before {
  content: "?· · · ·";
  color: var(--main-color);
}

#abouttitle:before {
  content: "🌀 ";
  color: var(--main-color);
}

#thingstitle:before {
  content: "🛰 ";
  color: var(--main-color);
}

#gallerytitle:before {
  content: "🖼 ";
  color: var(--main-color);
}

#entriestitle:before {
  content: "✏ ";
  color: var(--main-color);
}

#streamstitle:before {
  content: "➰ ";
  color: var(--main-color);
}

#bidulestitle:before {
  content: "🌊 ";
  color: var(--main-color);
}

#zinestitle:before {
  content: "📕 ";
  color: var(--main-color);
}

#portfoliotitle:before {
  content: "📙 ";
  color: var(--main-color);
}

/* --------------------------- */


/* ----------about text-------- */

#abouttext {
  width: 90%;
  height: 20%;
  outline: 1px dotted var(--main-color);
  padding: 12px;
}

/* --------------------------- */


/* card classes for containing stuff */

/* --------main card-------- */

.card {
  width: 90%;
  height: 20%;
  outline: 1px dashed var(--main-color);
  padding: 12px;
  margin: 8px;
}

/*  ----------------------- */

/* -------sub card------- */

.card_down {
  width: 90%;
  height: 20%;
  outline: 1px dotted var(--main-color);
  padding: 8px;
  margin: 12px;
}

/* ----------------------- */

/* --------------------------- */


/* -------category icons------- */

.thing-viz:before {
  content: "☼ ";
  color: var(--main-color);
}

.thing-sound:before {
  content: "📶 ";
  color: var(--main-color);
}

.reviews-list:before {
  content: "📃 ";
  color: var(--main-color);
}

.category-tool:before {
  content: "✂ ";
  color: var(--main-color);
}

.category-sound:before {
  content: "📶 ";
  color: var(--main-color);
}

.category-read:before {
  content: "📘 ";
  color: var(--main-color);
}

.emptyfolder:before {
  content: "📁…";
  color: var(--main-color);
}

.mystery:before {
  content: "🔎 ";
  color: var(--main-color);
}

.about-thing {
  color: var(--main-color);
}

.about-thing:after {
  content: "▷ ";
  color: var(--main-color);
}

.defunct-proj:before {
  content: "† ";
  color: var(--main-color);
}

.defunct-proj {
  display: inline-block;
  text-decoration: dashed underline var(--main-color);
  color: #dee3df;
  text-decoration-thickness: 1px;
}

.notice {
  display: inline-block;
  text-decoration: dashed underline var(--main-color);
  color: #dee3df;
  text-decoration-thickness: 1px;
}

.bidule-sound:before {
  content: "⌇ ⦚ ";
}

.zine::before {
  content: "📖 ";
    color: var(--main-color);
}

/* --------------------------- */


/* -------things classes------- */

.thing-viz {
  color: #dee3df;
  text-decoration-thickness: 2px;
}

.things li {
  list-style-type: none;
  font-size: 80%;
  line-height: 2.2;
}

.things ul {
  padding-left: 8px;
}

.things {
  padding-top: 10px;
}

/* --------------------------- */


/* -------streams classes----- */

#streamcontain {
  position: relative;
  width: 80%;
  padding: 12px;
  text-wrap: wrap;
}

#streamsnd {
  display: none;
  position: relative;
}

#streamimg {
  display: none;
  position: relative;
}

#streamimg {
  position: relative;
  width: 10%;
  height: 10%;
}

#streamtxt {
  position: relative;
}

/* --------------------------- */


/* ----------gallery---------- */

.gallery {
  display: block;
}

.gallery__img {
  width: 60%;
  object-fit: contain;
}

/* --------------------------- */


/* -------links style---------- */

/* -----external links----- */

.external-link:before {
  content: "↗ ";
  color: var(--main-color);
}

.external-link {
  text-decoration: dotted underline var(--main-color);
  color: #dee3df;
  text-decoration-thickness: 2px;
}

.external-link:hover {
  color: #dee3df;
  text-decoration: dotted overline underline var(--main-color);
  text-decoration-thickness: 4px;
}

/*  ----------------------- */

/* -------other links------ */

.email-link {
  text-decoration: dashed underline var(--main-color);
  color: #dee3df;
  text-decoration-thickness: 1px;
}

.email-link:before {
  content: "@ ";
  color: var(--main-color);
}

.email-link:hover {
  color: #dee3df;
  text-decoration: dashed overline underline var(--main-color);
  text-decoration-thickness: 2px;
}


/*  ----------------------- */

/* -----internal links----- */

.internal-link {
  text-decoration: solid underline var(--main-color);
  color: #dee3df;
  text-decoration-thickness: 2px;
}

.internal-link:hover {
  color: #dee3df;
  text-decoration: solid overline underline var(--main-color);
  text-decoration-thickness: 4px;
}

/*  ----------------------- */

/*  --------------------------- */


/* --------list unfold--------- */

.clic {
  text-decoration: dotted underline var(--main-color);
  color: #dee3df;
  text-decoration-thickness: 2px;
}

.clic:hover {
  color: #dee3df;
  text-decoration: solid underline var(--main-color);
  text-decoration-thickness: 2px;
}

.unfold {
  margin-top: 10px;
  color: var(--main-color);
}

details>summary {
  list-style: none;
}

details>summary::-webkit-details-marker {
  display: none;
}

details {
  padding: 8px;
}

/* --------------------------- */


/* --------about pic---------- */

.face {
  max-width: 50%;
  height: auto;
}

/* --------------------------- */

/* --------bidules------------ */

#rnbo-root {
  height: 100vh;
  width: 100vw;
}

#rnbo-root {
  margin: auto;
  max-width: 540px;
}

#rnbo-clickable-keyboard {
  display: flex;
  flex-wrap: wrap;
}

#rnbo-clickable-keyboard>div {
  margin: 2px;
  border: solid black 1px;
  min-height: 50px;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#rnbo-clickable-keyboard>div.clicked {
  background: #222222;
  color: #dddddd;
}

#rnbo-parameter-sliders {
  display: flex;
  flex-direction: column;
}

#rnbo-parameter-sliders>div {
  display: flex;
}

#rnbo-parameter-sliders>div>input:first-of-type {
  flex-grow: 1;
}

.param-slider[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  cursor: pointer;
  outline: none;
  overflow: hidden;
}

.param-slider[type="range"]::-webkit-slider-runnable-track {
  height: 15px;
  background: #dee3df;
}

.param-slider[type="range"]::-moz-range-track {
  height: 5px;
  background: #dee3df;
}

.param-slider {
  width: 80%;
  padding: 0px 10px;
  background: #0b0b0b;
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 15px;
  width: 15px;
  background-color: var(--main-color);
}

input[type="range"]::-moz-range-thumb {
  height: 15px;
  width: 15px;
  background-color: var(--main-color);
  border-radius: 10%;
}

output {
  color: #dee3df;
}

/* --- portfolio --- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.pf-img {
  width: 100%;
  object-fit: cover;
}

.other {
  border: 2px dashed var(--main-color);
  width: 100%;
  height: 100%;
}