/* ---------- ---------- ---------- ---------- ---------- */
body.arthyz {
  /* font-family: "Open Sans", sans-serif; */
  /* background-image: url('../arthyz/arthyz-favicon.svg'); */
  background-position: center;
  background-repeat: no-repeat;
  background-color: dimgray;
  background-size: 25vh;
  height: 100vh;

  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(3,1fr);
  gap: 4rem;

  padding: 1rem;
}
body.arthyz .candidate {
  display: flex;
}
body.arthyz img.experience {
  height: 3.25rem;
}
body.arthyz .candidate>div {
  padding: .25rem;
  margin: auto;
  border-radius: 1rem;
  background-color: ghostwhite;
  border: .5rem solid ghostwhite;
  transition: background-color .2s ease, border-color .2s ease;
  cursor: pointer;
  display: flex;
}
body.arthyz .candidate>div:hover {
  /* background-color: whitesmoke; */
  border-color: gainsboro;
}
body.arthyz>div.bnw:hover>div {
  background-color: gray;
}
body.arthyz>div.yellow:hover>div {
  background-color: gold;
}
body.arthyz>div[hidden] {
  visibility: hidden;
}
/* ---------- ---------- ---------- ---------- ---------- */
body.arthyz #logo, body.arthyz #instagram {
  display: flex;
  cursor: initial;
  flex-direction: column;
}
body.arthyz #logo>div, body.arthyz #instagram>div {
  margin: auto;
}
#logo svg {
  margin: auto;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: transparent;
}
body.arthyz #logo svg {
  width: 25vh;
  height: 25vh;
}
body.arthyz #logo svg { cursor: pointer !important }
/* ---------- ---------- ---------- ---------- ---------- */
/* body.arthyz:not(.day) #logo { display: none !important } */
/* ---------- */
body.arthyz #logo svg:not(:hover) .hover * { display: none }
body.arthyz #logo svg:hover .base * { display: none }
body.arthyz #logo svg:hover .hover path[letter] { stroke-width: 6px !important; stroke: snow }
/* ---------- */
/* body.arthyz.day #shadow { display: none } */
/* body.arthyz.day { background-image: none } */
/* body.arthyz.day>#logo svg circle { stroke: #212121; fill: #212121 } */
body.arthyz>#logo svg circle { stroke: #212121; fill: #212121 }
/* ---------- */
body.arthyz>#logo svg circle.cursor { stroke: transparent; fill: transparent; stroke-width: 30px }
/* ---------- */
body.arthyz>#logo svg circle.shadow,
body.arthyz>#logo svg path.shadow { stroke: transparent; fill: transparent; stroke-width: 3px }
/* ---------- */
body.arthyz>#logo svg #a, body.arthyz>#logo svg #z { stroke-width: 12px }
body.arthyz>#logo svg #r, body.arthyz>#logo svg #t, body.arthyz>#logo svg #h, body.arthyz>#logo svg #y { stroke-width: 6px }
/* ---------- */
body.arthyz>#logo svg [word="arthyz"] path, { stroke-width: 0 }
body.arthyz>#logo svg [word="about"], body.arthyz>#logo svg [word="experiences"] path { stroke-width: 0; fill: snow }
/* ---------- */
body.arthyz.day_6>#logo svg circle.shadow, body.arthyz:not(.day)>#logo svg circle.shadow { stroke: snow }
body.arthyz.day_6>#logo svg #a, body.arthyz:not(.day)>#logo svg #a { stroke: snow }
body.arthyz.day_6>#logo svg #r, body.arthyz:not(.day)>#logo svg #r { stroke: dimgray }
body.arthyz.day_6>#logo svg #t, body.arthyz:not(.day)>#logo svg #t { stroke: dimgray }
body.arthyz.day_6>#logo svg #z, body.arthyz:not(.day)>#logo svg #z { stroke: darkgray }
body.arthyz.day_6>#logo svg #y, body.arthyz:not(.day)>#logo svg #y { stroke: dimgray }
body.arthyz.day_6>#logo svg #h, body.arthyz:not(.day)>#logo svg #h { stroke: dimgray }

body.arthyz.day_6>#logo svg [word="arthyz"] [letter="a"] path { fill: snow }
body.arthyz.day_6>#logo svg [word="arthyz"] [letter="r"] path { fill: dimgray }
body.arthyz.day_6>#logo svg [word="arthyz"] [letter="t"] path { fill: dimgray }
body.arthyz.day_6>#logo svg [word="arthyz"] [letter="h"] path { fill: dimgray }
body.arthyz.day_6>#logo svg [word="arthyz"] [letter="y"] path { fill: dimgray }
body.arthyz.day_6>#logo svg [word="arthyz"] [letter="z"] path { fill: darkgray }
/* ---------- */
body.arthyz.day_0>#logo svg circle.shadow { stroke: var(--chartreuse) }
body.arthyz.day_0>#logo svg #a, body.arthyz.day_0>#logo svg path.shadow.a { stroke: var(--chartreuse) }
body.arthyz.day_0>#logo svg #r, body.arthyz.day_0>#logo svg path.shadow.r { stroke: var(--amber) }
body.arthyz.day_0>#logo svg #t, body.arthyz.day_0>#logo svg path.shadow.t { stroke: var(--vermillon) }
body.arthyz.day_0>#logo svg #z, body.arthyz.day_0>#logo svg path.shadow.z { stroke: var(--magenta) }
body.arthyz.day_0>#logo svg #y, body.arthyz.day_0>#logo svg path.shadow.y { stroke: var(--violet) }
body.arthyz.day_0>#logo svg #h, body.arthyz.day_0>#logo svg path.shadow.h { stroke: var(--teal) }

body.arthyz.day_0>#logo svg [word="arthyz"] [letter="a"] path { fill: var(--chartreuse) }
body.arthyz.day_0>#logo svg [word="arthyz"] [letter="r"] path { fill: var(--amber) }
body.arthyz.day_0>#logo svg [word="arthyz"] [letter="t"] path { fill: var(--vermillon) }
body.arthyz.day_0>#logo svg [word="arthyz"] [letter="h"] path { fill: var(--teal) }
body.arthyz.day_0>#logo svg [word="arthyz"] [letter="y"] path { fill: var(--violet) }
body.arthyz.day_0>#logo svg [word="arthyz"] [letter="z"] path { fill: var(--magenta) }
/* ---------- */
body.arthyz.day_1>#logo svg circle.shadow { stroke: var(--teal) }
body.arthyz.day_1>#logo svg #r, body.arthyz.day_1>#logo svg path.shadow.r { stroke: var(--chartreuse) }
body.arthyz.day_1>#logo svg #t, body.arthyz.day_1>#logo svg path.shadow.t { stroke: var(--amber) }
body.arthyz.day_1>#logo svg #z, body.arthyz.day_1>#logo svg path.shadow.z { stroke: var(--vermillon) }
body.arthyz.day_1>#logo svg #y, body.arthyz.day_1>#logo svg path.shadow.y { stroke: var(--magenta) }
body.arthyz.day_1>#logo svg #h, body.arthyz.day_1>#logo svg path.shadow.h { stroke: var(--violet) }
body.arthyz.day_1>#logo svg #a, body.arthyz.day_1>#logo svg path.shadow.a { stroke: var(--teal) }

body.arthyz.day_1>#logo svg [word="arthyz"] [letter="a"] path { fill: var(--teal) }
body.arthyz.day_1>#logo svg [word="arthyz"] [letter="r"] path { fill: var(--chartreuse) }
body.arthyz.day_1>#logo svg [word="arthyz"] [letter="t"] path { fill: var(--amber) }
body.arthyz.day_1>#logo svg [word="arthyz"] [letter="h"] path { fill: var(--violet) }
body.arthyz.day_1>#logo svg [word="arthyz"] [letter="y"] path { fill: var(--magenta) }
body.arthyz.day_1>#logo svg [word="arthyz"] [letter="z"] path { fill: var(--vermillon) }
/* ---------- */
body.arthyz.day_2>#logo svg circle.shadow { stroke: var(--violet) }
body.arthyz.day_2>#logo svg #t, body.arthyz.day_2>#logo svg path.shadow.t { stroke: var(--chartreuse) }
body.arthyz.day_2>#logo svg #z, body.arthyz.day_2>#logo svg path.shadow.z { stroke: var(--amber) }
body.arthyz.day_2>#logo svg #y, body.arthyz.day_2>#logo svg path.shadow.y { stroke: var(--vermillon) }
body.arthyz.day_2>#logo svg #h, body.arthyz.day_2>#logo svg path.shadow.h { stroke: var(--magenta) }
body.arthyz.day_2>#logo svg #a, body.arthyz.day_2>#logo svg path.shadow.a { stroke: var(--violet) }
body.arthyz.day_2>#logo svg #r, body.arthyz.day_2>#logo svg path.shadow.r { stroke: var(--teal) }

body.arthyz.day_2>#logo svg [word="arthyz"] [letter="a"] path { fill: var(--violet) }
body.arthyz.day_2>#logo svg [word="arthyz"] [letter="r"] path { fill: var(--teal) }
body.arthyz.day_2>#logo svg [word="arthyz"] [letter="t"] path { fill: var(--chartreuse) }
body.arthyz.day_2>#logo svg [word="arthyz"] [letter="h"] path { fill: var(--magenta) }
body.arthyz.day_2>#logo svg [word="arthyz"] [letter="y"] path { fill: var(--vermillon) }
body.arthyz.day_2>#logo svg [word="arthyz"] [letter="z"] path { fill: var(--amber) }
/* ---------- */
body.arthyz.day_3>#logo svg circle.shadow { stroke: var(--magenta) }
body.arthyz.day_3>#logo svg #z, body.arthyz.day_3>#logo svg path.shadow.z { stroke: var(--chartreuse) }
body.arthyz.day_3>#logo svg #y, body.arthyz.day_3>#logo svg path.shadow.y { stroke: var(--amber) }
body.arthyz.day_3>#logo svg #h, body.arthyz.day_3>#logo svg path.shadow.h { stroke: var(--vermillon) }
body.arthyz.day_3>#logo svg #a, body.arthyz.day_3>#logo svg path.shadow.a { stroke: var(--magenta) }
body.arthyz.day_3>#logo svg #r, body.arthyz.day_3>#logo svg path.shadow.r { stroke: var(--violet) }
body.arthyz.day_3>#logo svg #t, body.arthyz.day_3>#logo svg path.shadow.t { stroke: var(--teal) }

body.arthyz.day_3>#logo svg [word="arthyz"] [letter="a"] path { fill: var(--magenta) }
body.arthyz.day_3>#logo svg [word="arthyz"] [letter="r"] path { fill: var(--violet) }
body.arthyz.day_3>#logo svg [word="arthyz"] [letter="t"] path { fill: var(--teal) }
body.arthyz.day_3>#logo svg [word="arthyz"] [letter="h"] path { fill: var(--vermillon) }
body.arthyz.day_3>#logo svg [word="arthyz"] [letter="y"] path { fill: var(--amber) }
body.arthyz.day_3>#logo svg [word="arthyz"] [letter="z"] path { fill: var(--chartreuse) }
/* ---------- */
body.arthyz.day_4>#logo svg circle.shadow { stroke: var(--vermillon) }
body.arthyz.day_4>#logo svg #y, body.arthyz.day_4>#logo svg path.shadow.y { stroke: var(--chartreuse) }
body.arthyz.day_4>#logo svg #h, body.arthyz.day_4>#logo svg path.shadow.h { stroke: var(--amber) }
body.arthyz.day_4>#logo svg #a, body.arthyz.day_4>#logo svg path.shadow.a { stroke: var(--vermillon) }
body.arthyz.day_4>#logo svg #r, body.arthyz.day_4>#logo svg path.shadow.r { stroke: var(--magenta) }
body.arthyz.day_4>#logo svg #t, body.arthyz.day_4>#logo svg path.shadow.t { stroke: var(--violet) }
body.arthyz.day_4>#logo svg #z, body.arthyz.day_4>#logo svg path.shadow.z { stroke: var(--teal) }

body.arthyz.day_4>#logo svg [word="arthyz"] [letter="a"] path { fill: var(--vermillon) }
body.arthyz.day_4>#logo svg [word="arthyz"] [letter="r"] path { fill: var(--magenta) }
body.arthyz.day_4>#logo svg [word="arthyz"] [letter="t"] path { fill: var(--violet) }
body.arthyz.day_4>#logo svg [word="arthyz"] [letter="h"] path { fill: var(--amber) }
body.arthyz.day_4>#logo svg [word="arthyz"] [letter="y"] path { fill: var(--chartreuse) }
body.arthyz.day_4>#logo svg [word="arthyz"] [letter="z"] path { fill: var(--teal) }
/* ---------- */
body.arthyz.day_5>#logo svg circle.shadow { stroke: var(--amber) }
body.arthyz.day_5>#logo svg #h, body.arthyz.day_5>#logo svg path.shadow.h { stroke: var(--chartreuse) }
body.arthyz.day_5>#logo svg #a, body.arthyz.day_5>#logo svg path.shadow.a { stroke: var(--amber) }
body.arthyz.day_5>#logo svg #r, body.arthyz.day_5>#logo svg path.shadow.r { stroke: var(--vermillon) }
body.arthyz.day_5>#logo svg #t, body.arthyz.day_5>#logo svg path.shadow.t { stroke: var(--magenta) }
body.arthyz.day_5>#logo svg #z, body.arthyz.day_5>#logo svg path.shadow.z { stroke: var(--violet) }
body.arthyz.day_5>#logo svg #y, body.arthyz.day_5>#logo svg path.shadow.y { stroke: var(--teal) }

body.arthyz.day_5>#logo svg [word="arthyz"] [letter="a"] path { fill: var(--amber) }
body.arthyz.day_5>#logo svg [word="arthyz"] [letter="r"] path { fill: var(--vermillon) }
body.arthyz.day_5>#logo svg [word="arthyz"] [letter="t"] path { fill: var(--magenta) }
body.arthyz.day_5>#logo svg [word="arthyz"] [letter="h"] path { fill: var(--chartreuse) }
body.arthyz.day_5>#logo svg [word="arthyz"] [letter="y"] path { fill: var(--teal) }
body.arthyz.day_5>#logo svg [word="arthyz"] [letter="z"] path { fill: var(--violet) }
/* ---------- */
/* body.arthyz.day>#logo svg path.shadow { transform: rotateZ(-186deg); transform-origin: 120px 120px } */
body.arthyz>#logo svg path.shadow { transform: rotateZ(-186deg); transform-origin: 120px 120px }
/* ---------- ---------- ---------- ---------- ---------- */
body.arthyz #five, body.arthyz #four, body.arthyz #three, body.arthyz #two, body.arthyz #one {
  animation-duration: 1s;
  animation-name: numeral;
  transform-origin: 120px 120px;
  animation-iteration-count: 5 ;
  fill: none;
}
/* ---------- */
@keyframes numeral {
  0% { stroke-width: 0 }
  100% { stroke-width: 12 }
}
/* ---------- */
body.arthyz.numeral_5:not(.numeral_4)>#logo svg #five,
body.arthyz.numeral_4:not(.numeral_3)>#logo svg #four,
body.arthyz.numeral_3:not(.numeral_2)>#logo svg #three,
body.arthyz.numeral_2:not(.numeral_1)>#logo svg #two,
body.arthyz.numeral_1:not(.numeral_0)>#logo svg #one
{ stroke: snow }
/* ---------- ---------- ---------- ---------- ---------- */
body.arthyz #instagram, body.arthyz #instagram>div {
  background-color: transparent;
  cursor: initial;
}
/* ---------- */
body.arthyz #instagram a>img {
  height: 4rem;
  width: 4rem;
}
/* ---------- */
body.arthyz #instagram-logo {
  width: 6rem;
  height: calc( ( 300 / 840 ) * 6rem );
}
/* ---------- ---------- ---------- ---------- ---------- */
.unavailable { display: flex; }
.unavailable svg { margin: auto; }
/* ---------- ---------- ---------- ---------- ---------- */
#disclaimer {
  position: fixed;
  bottom: 0.125rem;
  left: 10vw;
  color: transparent;
  width: 80vw;
  text-align: center;
  font-size: x-small;
}
#disclaimer:hover {
  color: rgba(255,255,255,.25)
}
/* ---------- ---------- ---------- ---------- ---------- */
@media (max-width: 640px) {
  body.arthyz {
    gap: .5rem;
  }
  body.arthyz img.experience {
    height: 2rem;
  }
  body.arthyz #instagram a>img {
    height: 2rem;
    width: 2rem;
  }
}
@media (orientation: portrait) {
  body.arthyz .candidate>div {
    padding: .5rem;
  }
  body.arthyz {
    display: flex;
    flex-direction: column;
  }
  .available, .unavailable {
    display: none;
  }
  #logo {
    padding: .75rem;
  }
  #logo svg {
    height: 4rem !important;
  }
}
/* ---------- ---------- ---------- ---------- ---------- */