/* Fonts */
@font-face {
  font-family: "0xProto";
  src: url(https://humantooth.neocities.org/fonts/0xProto-Regular.woff2)
    format("woff2");
}
/* General */
* {box-sizing: border-box;}
:root {
  --transparent: #ff000000;
}
html {background-color: var(--mid-color)}
body {
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  font-family: "0xProto";
  font-size: 1em;
  color: var(--dk-color);
}
a {
  color: var(--accent);
  font-weight: 700;
}
a:hover {text-decoration: none}
ul {list-style-type: circle}
h1 {
  margin: 0;
  font-style: italic;
  text-shadow: 1px 0 3px var(--mid-transparent);
  text-transform: uppercase;
  font-size: 3em;
  color: var(--lt-color);
}
h2 {
  margin: 0;
  padding: 10px 0;
  border-bottom: 2px solid var(--dk-color);
  background: linear-gradient(var(--dk-color), var(--mid-color));
  background-clip: padding-box;
  text-align: center;
  font-weight: 700;
  font-size: 1.25em;
  color: var(--lt-color);
}
h3 {
  margin: 0 0 5px;
  padding-left: 5px;
  border-left: 2px solid var(--dk-color);
  text-align: left;
  color: var(--dk-color);
  background-image: linear-gradient(to left, var(--transparent), var(--mid-transparent))
}
hr {
  margin: 0;
  height: 2px;
  border: none;
  background-color: var(--dk-color);
}
.box-style {
  border: 2px solid var(--dk-color);
  background-color: var(--lt-color);
  border-radius: 10px;
  overflow: hidden;
}
.content {
  height: calc(100% - 45px);
  max-height: 250px;
  padding: 10px;
  overflow: auto;
  overflow-x: hidden;
}
.back-button {
  margin-bottom: 5px;
  padding: 5px 10px;
  border: 2px solid var(--dk-color);
  border-radius: 10px;
  background-color: var(--mid-color);
  box-shadow: 0 5px 15px #00000400;
  color: var(--lt-color);
  text-align: center;
  text-decoration: none;
  font-size: 1.25em;
  font-family: "0xProto";
}
.back-button:hover {background-color: var(--extra);}
/* Layout */
#container {
  border: 2px solid var(--dk-color);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 10px 15px 5px #00000400;
  background-color: var(--mid-color);
}
#parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto 72px 250px 250px 250px auto;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}
#title {
  grid-area: 1 / 1 / 2 / 5;
  background: linear-gradient(var(--dk-color), var(--mid-color));
  text-align: center;
}
#overview {grid-area: 2 / 1 / 3 / 5;}
#overview .flex {padding: 10px;}
.flex {
  display: flex;
  gap: 10px;
}
.overview-img {
  width: 60%;
  padding: 10px;
  border-radius: 10px;
  background-color: var(--extra);
}
.overview-img img {
  display: block;
  margin: auto;
  max-height: 400px;
}
.stat-container {
  width: 40%;
  height: auto;
  padding: 10px;
  border-radius: 10px;
  background-color: var(--extra);
}
.stats {
  padding: 0 5px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  border-radius: 8px;
  background-color: var(--mid-color);
  color: var(--lt-color);
}
.stats p {margin: 5px 0;}
.stats p:nth-child(odd) { 
  font-weight: 700;
  text-transform: uppercase;
  color: var(--dk-color);
}
.stats p:nth-child(even) {text-align:end;}
#story {grid-area: 3 / 1 / 4 / 5;}
#stamps {
  grid-area: 4 / 1 / 5 / 5;
  padding: 3px;
  background-color: var(--extra);
  border: 2px dashed var(--dk-color);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  overflow: hidden;
}
#stamps img {
  width: 110px;
  height: 62px;
}
#trivia {grid-area: 5 / 1 / 6 / 3;}
#abilities {grid-area: 5 / 3 / 6 / 5;}
#relationships {grid-area: 6 / 1 / 7 / 5;}
.relation {
  display: flex;
  gap: 10px;
  overflow: auto;
}
.relation-text {
  width: 85%;
}
.relation-image {
  width: 15%;
}
.relation img {
  width: 100%;
  border: 2px solid var(--dk-color);
  border-radius: 5px;
}
#picture {grid-area: 7 / 4 / 8 / 5;}
#picture img { 
  width: 100%;
  height: 100%;
  border: 2px solid var(--dk-color);
  border-radius: 10px;
  background-color: var(--mid-color);
  object-position: center;
  object-fit: cover;
}
#ribbons {grid-area: 7 / 1 / 8 / 4;}
#ribbons p {text-align: center; }
.ribbon-flex {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}
.ribbon {
  margin: 10px;
  padding: 20px;
  height: 100px;
  width: 100px;
  border-radius: 5px;
  background-color: var(--extra);
  text-align: center;
}
#links {
  grid-area: 8 / 1 / 9 / 5;
  text-align: center;
}
.bottom-credit {
  padding: 5px;
  margin: 10px 0 0;
  border-radius: 10px;
  background-color: var(--lt-color);
}
@media only screen and (max-width: 810px) {
  body {max-width: 95%;}
  #parent {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 300px 72px 250px 250px 245px 250px auto;
    grid-column-gap: 0;
    grid-row-gap: 5px;
  }
  #title {grid-area: 1 / 1 / 2 / 7}
  #overview {grid-area: 2 / 1 / 3 / 7}
  .overview-img {display: none}
  #info {grid-area: 3 / 1 / 4 / 7}
  .stat-container, .column, .stats {width: 100%; }
  #stamps {grid-area: 4 / 1 / 5 / 7}
  #abilities {grid-area: 5 / 1 / 6 / 7}
  #trivia {grid-area: 6 / 1 / 7 / 7}
  #relationships {grid-area: 7 / 1 / 8 / 7}
  .relation {flex-direction: column}
  .relation img {display: none}
  .relation-text {width: 100%}
  #picture {display: none}
  #ribbons {grid-area: 8 / 1 / 9 / 7}
  #links {grid-area: 9 / 1 / 10 / 7}
}
/* Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--dk-color) var(--lt-color);
}
*::-webkit-scrollbar {width: 5px;}
*::-webkit-scrollbar-track {background: var(--lt-color);}
*::-webkit-scrollbar-thumb {
  background-color: var(--mid-color);
  border-radius: 10px;
  border: 1px solid var(--dk-color);
}
/* Tooltips */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]::before, [data-tooltip]::after {
  position: absolute; 
  opacity: 0; 
  visibility: hidden;
  transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none; z-index: 1000;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  background: var(--mid-color);
  color: #fff;
  padding: 5px;
  border-radius: 6px;
  max-width: 250px;
  width: max-content;
  text-align: center;
  font-size: .7em;
}
.small-tooltip[data-tooltip]::before {
  max-width: 150px;
  width: 150px;
}
[data-tooltip]::after { content: ""; border: 8px solid transparent; }
/* Positions */
[data-direction="top"]::before, [data-direction="top"]::after { left: 50%; bottom: 100%; transform: translateX(-50%) translateY(10px); }
[data-direction="top"]::after { border-top-color: var(--mid-color); margin-bottom: -4px; }
[data-direction="top"]::before { margin-bottom: 12px; }

[data-direction="bottom"]::before, [data-direction="bottom"]::after { left: 50%; top: 100%; transform: translateX(-50%) translateY(-10px); }
[data-direction="bottom"]::after { border-bottom-color: var(--mid-color); margin-top: -4px; }
[data-direction="bottom"]::before { margin-top: 12px; }

[data-direction="left"]::before, [data-direction="left"]::after { top: 50%; right: 100%; transform: translateY(-50%) translateX(10px); }
[data-direction="left"]::after { border-left-color: var(--mid-color); margin-right: -4px; }
[data-direction="left"]::before { margin-right: 12px; }

[data-direction="right"]::before, [data-direction="right"]::after { top: 50%; left: 100%; transform: translateY(-50%) translateX(-10px); }
[data-direction="right"]::after { border-right-color: var(--mid-color); margin-left: -4px; }
[data-direction="right"]::before { margin-left: 12px; }
/* Trigger */
[data-tooltip]:hover::before, [data-tooltip]:hover::after { opacity: 1; visibility: visible; }
[data-direction="top"]:hover::before, [data-direction="top"]:hover::after,
[data-direction="bottom"]:hover::before, [data-direction="bottom"]:hover::after { transform: translateX(-50%) translateY(0); }
[data-direction="left"]:hover::before, [data-direction="left"]:hover::after,
[data-direction="right"]:hover::before, [data-direction="right"]:hover::after { transform: translateY(-50%) translateX(0); }