@import url("reset.css");

body {
  margin: 0;
  padding: 8px;
  font-family: monospace;
  font-size: 13px;
  font-weight: normal;
  background-color: #161718;
  color: #FFFFFF;
}

body {
  display: flex;
  flex-direction: column;
  grid-gap: 8px;
}

nav {
  position: sticky;
  top: 0;
  margin: -8px -8px -6px -8px;
  padding: 8px 8px 6px 8px;
  background-color: #161718;
  z-index: 10;
}
nav main:first-child {
  margin-left: 100px;
  padding-left: 6px;
}

article {
  display: flex;
  flex-direction: row;
  grid-gap: 6px;
  width: fit-content;
  height: 100px;
}

header {
  position: sticky;
  display: flex;
  left: 8px;
  width: 100px;
  min-width: 100px;
  background-color: #161718;
  box-shadow: -2px 0 0 8px #161718;
}
main {
  display: flex;
  align-items: stretch;
}

figure {
  position: relative;
  width: 100%;
  background-color: #24262A;
  border-radius: 6px;
  z-index: 3;
}
figure.main { min-width: 100px; }
figure.small { width: 71px; }
aside {
  position: absolute;
  display: flex;
  flex-direction: row;
  grid-gap: 6px;
  left: 106px;
  width: calc(100vw - 114px);
  height: 71px;
  overflow-x: scroll;
  overflow-y: hidden;
  z-index: 1;
}
figure > img {
  /* width: 100%; */
  width: 130% !important;
  margin-top: -24% !important;
  margin-bottom: -6%;
  margin-left: -15% !important;
  z-index: 6;
}
figcaption {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4px 5px;
}
figcaption h2 {
  text-shadow: 0 0 3px rgba(0,0,0,1);
}
figcaption h3 {
  display: inline-flex;
  padding: 2px 3px;
  background-color: #595e67;
  border-radius: 4px;
  font-size: 10px;
  font-weight: normal;
}
figcaption img.shiny {
  position: absolute;
  top: 5px;
  right: 4px;
  width: 16px;
  opacity: .5;
}
aside figure { min-width: 71px; }
aside figure figcaption h2 { font-size: 9.5px; }
aside figure figcaption h3 { display: none; }

ol {
  display: flex;
  flex-direction: row;
}
ol li {
  display: flex;
  align-items: flex-end;
  width: 60px;
}
ol li.single {
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
ol li:last-child { padding-right: 8px; }
article time {
  display: flex;
  justify-content: center;
  width: 60px;
  min-width: 60px;
  background-color: #24262A;
}
article time[class] {
  padding: 4px 5px;
  border-radius: 4px;
}
article time:empty {
  height: 6px;
  margin: 8.5px 0;
}
article span.to {
  display: flex;
  width: 6px;
  height: 10px;
  background-color: #24262A;
}
nav li {
  flex-direction: column;
  align-items: center;
  width: 60px;
  min-width: 60px;
  font-size: 11px;
}
nav li time.date {}
nav li time.day {
  opacity: .5;
}

.badge_raid { background-color: #7D3832; }
.badge_spawn { background-color: #377d32; }
.badge_egg { background-color: #7d7332; }

/*

body {
  margin: 0;
  padding: 6px;
  font-family: monospace;
  font-size: 13px;
  font-weight: normal;
  background-color: #161718;
  color: #FFFFFF;
}

main {}

table {
  padding: 0;
  border: 0;
  -webkit-border-horizontal-spacing: 0px;
  -webkit-border-vertical-spacing: 6px;

  --raid: #7D3832;
  --spawn: #377d32;
  --egg: #7d7332;
}
th, td {
  padding: 3px 0;
  vertical-align: middle;
}
thead {
  position: sticky;
  top: -6px;
  background-color: #161718;
}
thead th {
  padding: 6px;
  font-weight: normal;
}
thead th[data-day="6"] { color: #bebebe; }
thead th[data-day="7"] time.day { color: #ff6060; }
thead th time { color: inherit; }
thead th.active time.date {
  font-weight: bold;
  color: #eebc29;
}
tbody th {
  position: sticky;
  left: 6px;
  background-color: #24262A;
  border-radius: 4px;
  box-shadow: 0 0 0 6px #161718;
}
tbody td {
  text-align: center;
}
colgroup col.weekend {
  background-color: rgba(75, 30, 30, .2);
}

figure {
  width: 100px;
  height: 120px;
  padding: 6px 4px 14px;
}
figure.shiny {
  position: absolute;
  right: 4px;
  bottom: 18px;
  width: 40px;
  height: 40px;
  padding: 0;
  z-index: 2;
}
figure img {
  width: 100%;
}
figcaption {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 5px 3px 5px;
  font-size: 12px;
  z-index: 5;
}
figcaption .method {
  display: flex;
  align-items: flex-end;
}
figcaption .name {
  display: flex;
  align-items: flex-start;
  text-align: left;
}

time { white-space: nowrap; }
time.day {
  font-size: 11px;
  opacity: .4;
}
h3 {
  padding: 2px 3px;
  background-color: #595e67;
  border-radius: 4px;
  font-size: 10px;
  font-weight: normal;
}
h3.raid { background-color: var(--raid); }
h3.spawn { background-color: var(--spawn); }
h3.hatch { background-color: var(--hatch); }

tbody tr time {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 6px 4px;
  background-color: #595e67;
}
tbody tr time.time { border-radius: 4px; }
tbody tr time.to {
  height: 6px;
  padding: 0;
}
tbody tr span {
  display: inline-flex;
  width: 6px;
  background-color: #595e67;
  text-indent: -9999px;
}
tbody tr.raid time.time { background-color: var(--raid); }
tbody tr.spawn time.time { background-color: var(--spawn); }
tbody tr.hatch time.time { background-color: var(--hatch); }