/* ---------- ---------- ---------- ---------- ---------- */
@font-face {
  font-family: "Open Sans";
  src:
    local("Open Sans"),
    url("resources/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf") format("truetype");
}
/* ---------- ---------- ---------- ---------- ---------- */
:root {
  --amber: #ffbf00;
  --vermillon: #e34234;
  --magenta: #ff00ff;
  --violet: #8f00ff;
  --teal: #008080;
  --chartreuse: #7fff00;

  --white-clear: snow;
  --white-light: ghostwhite;

  --gray-ultralight: whitesmoke;
  --gray-extralight: gainsboro;
  --gray-light: lightgray;
  --gray-regular: silver;
  --gray-dark: darkgray;
  --gray-extradark: gray;
  --gray-ultradark: dimgray;
}
/* ---------- ---------- ---------- ---------- ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* ---------- ---------- ---------- ---------- ---------- */
body {
  font-family: "Open Sans", sans-serif;
}
/* ---------- */
body.darkness {
  background-color: rgb(40,44,53) !important;
}
/* ---------- */
body.darkness .darkable {
  background-color: rgb(33,37,44) !important;
  box-shadow: none !important;
}
/* ---------- */
body.darkness .logo.experience {
  border-radius: .25rem;
  background-color: whitesmoke;
}
/* ---------- ---------- ---------- ---------- ---------- */
#about, #parameters {
  position: fixed;
}
body:not(.arthyz) #about, #parameters {
  top:  20vh;
  left: 20vw;
  padding: 1rem;
}
body.arthyz #about {
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  background-color: rgba(125,125,125,.125);
}
body:not(.arthyz) #about.active, #parameters, body.arthyz #about>div {
  height: 60vh;
  width: 60vw;
  overflow-y: auto;
  border-radius: .25rem;
  background-color: rgba(240,240,240,.875);
  display: grid;
  grid-template-columns: 1fr;
}
/* ---------- */
#about { z-index: 80 }
#parameters { z-index: 70 }
/* ---------- */
body #about * {
  margin: auto;
}
body.arthyz #about>div {
  margin: 20vh 20vw;
  padding: 1.25rem 2.75rem;
}
/* ---------- */
#aboutTitle {
  font-size: larger;
  font-weight: bolder;
  padding: .5rem;
}
#aboutContent {
  line-height: 1.5;
  margin: 0 !important;
}
#about:not(.active) { display: none }
/* ---------- ---------- ---------- ---------- ---------- */
.logo {
  position: fixed;
  z-index: 25;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.logo:not(.external) {
  left: 50%;
  transform: translateX(-50%);
}
/* ---------- */
#arthyz-logo {
  height: 2rem;
  width: 2rem;
  bottom: 1rem;
  background-image: url("resources/arthyz/arthyz-favicon.svg");
}
/* ---------- */
#instagram-logo {
  width: 6rem;
}
/* ---------- */
#instagram-shortcut-logo {
  height: 1.25rem;
  width: 1.25rem;
  bottom: 1.375rem;
  left: calc(50% + 3rem);
  background-image: url("resources/instagram/Instagram_simple_icon.svg");
}
body.darkness #instagram-shortcut-logo {
  background-image: url("resources/instagram/Instagram_simple_icon_shadow.svg");
}
/* ---------- ---------- ---------- ---------- ---------- */
#parameters-shortcut {
  height: 1.25rem;
  width: 1.25rem;
  bottom: 1.375rem;
  left: calc(50% - 3rem);
  transform: translateX(-100%);
}
#parameters-shortcut svg {
  height: 100%;
  width: 100%;
  cursor: pointer;
}
#parameters-shortcut svg * {
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* ---------- */
#parameters-shortcut svg path {
  stroke-width: 2px;
  stroke: dimgray;
  fill: transparent;
}
#parameters-shortcut svg line,
#parameters-shortcut svg circle {
  stroke: dimgray;
  fill: dimgray;
}
/* ---------- */
body.darkness #parameters-shortcut svg path {
  stroke: whitesmoke;
}
body.darkness #parameters-shortcut svg line,
body.darkness #parameters-shortcut svg circle {
  stroke: whitesmoke;
  fill: whitesmoke;
}
body.darkness #playground {
  color: whitesmoke;
}
/* ---------- */
#parameters-shortcut:hover svg path {
  stroke: silver !important;
}
#parameters-shortcut:hover svg line,
#parameters-shortcut:hover svg circle {
  fill: silver !important;
  stroke: silver !important;
}
/* ---------- ---------- ---------- ---------- ---------- */
h2 { margin: .25rem 0 .5rem }
/* ---------- ---------- ---------- ---------- ---------- */
noscript {
  height: 100vh;
  width: 100vw;
  background-color: #fcfcfc;
  display: flex;
}
noscript>div {
  margin: auto;
}
/* ---------- ---------- ---------- ---------- ---------- */
input ~ label {
  cursor: pointer;
}
/* ---------- ---------- ---------- ---------- ---------- */
svg circle.chartreuse-full { stroke: var(--chartreuse); fill: var(--chartreuse) }
svg circle.amber-full { stroke: var(--amber); fill: var(--amber) }
svg circle.vermillon-full { stroke: var(--vermillon); fill: var(--vermillon) }
svg circle.magenta-full { stroke: var(--magenta); fill: var(--magenta) }
svg circle.violet-full { stroke: var(--violet); fill: var(--violet) }
svg circle.teal-full { stroke: var(--teal); fill: var(--teal) }
/*---------- */
svg circle.gray-ultralight-full { stroke: var(--gray-ultralight); fill: var(--gray-ultralight) }
svg circle.gray-extralight-full { stroke: var(--gray-extralight); fill: var(--gray-extralight) }
svg circle.gray-light-full { stroke: var(--gray-light); fill: var(--gray-light) }
svg circle.gray-regular-full { stroke: var(--gray-regular); fill: var(--gray-regular) }
svg circle.gray-dark-full { stroke: var(--gray-dark); fill: var(--gray-dark) }
svg circle.gray-extradark-full { stroke: var(--gray-extradark); fill: var(--gray-extradark) }
svg circle.gray-ultradark-full { stroke: var(--gray-ultradark); fill: var(--gray-ultradark) }
/* ---------- ---------- ---------- ---------- ---------- */
.scrolly {
  overflow-y: scroll;
}
/* ---------- ---------- ---------- ---------- ---------- */
.noDisplay {
  display: none !important;
}
/* ---------- ---------- ---------- ---------- ---------- */