/* ---[ Fixing ]--- */
* { padding: 0; margin: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; scroll-behavior: smooth;}
/* --- */

/* ---[ Themes ]--- */
#SiteTheme:not(:checked) ~ #SiteData{
  color-scheme: light;

  --background: rgba(196, 196, 196, 1);
  --text-color: rgba(36, 36, 33, 1);
  --fade-motion: cubic-bezier(.9, .6, .3, .09);
  
  --title-shade: 0 0 6px rgba(36, 36, 33, 1);
  --title-hover: rgba(36, 36, 33, 1);
  --title-motion: ease-out;
  --subtitle-shade: 0 0 13px rgba(36, 36, 33, 1);

  --card-title: rgba(9, 96, 3, 1);
  --card-text: rgba(93, 96, 33, 1);
  --card-data: rgb(96, 39, 9);
  
  --footer-color: rgba(36, 36, 33, 1);

  --border-color: rgba(6, 93, 99, 1);
}
#SiteTheme:checked ~ #SiteData{
  color-scheme: dark;

  --background: rgba(36, 36, 33, 1);
  --text-color: rgba(9, 133, 3, 1);
  --fade-motion: cubic-bezier(.3, .6, .9, .9);

  --title-shade: 0 -3px 3px rgba(196, 196, 196, 1);
  --title-hover: rgba(196, 196, 196, 1);
  --title-motion: ease-in;
  --subtitle-shade: 0 0 6px rgba(196, 196, 196, 1); 

  --card-title: rgba(9, 133, 3, 1);
  --card-text: rgba(163, 163, 3, 1);
  --card-data: rgb(169, 36, 69);
  
  --footer-color: rgba(196, 196, 196, 1);

  --border-color: rgba(133, 236, 233, 1);
}
/* --- */

/* ---[ Site's structure ]--- */
#SiteData {
  transition-timing-function: var(--fade-motion);
  will-change: background-color, color;

  height: 100%;
  background-color: var(--background);
  color: var(--text-color);
  -webkit-tap-highlight-color: transparent;

  font: clamp(1.36rem, 6vw, 2.6rem)/.9 'body';

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-top: 19px;
  padding-bottom: 9px;
  overflow: hidden;

  transition:
    background-color .9s,
    color .9s;
}

#SiteData header,
#SiteData main,
#SiteData footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
/* --- */

/* ---[ Site's Header ]--- */
#SiteData header { 
  flex-direction: column; 
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* old IE */
}
#SiteTitle, #SiteSubtitle { color: var(--background); display: flex; } 
#SiteTitle { text-shadow: var(--title-shade); }
#SiteSubtitle { text-shadow: var(--subtitle-shade); }
#SiteTitle h1 { 
  display: flex; 

  cursor: pointer;
}
#SiteTitle h1 span,
#SiteSubtitle { 
  will-change: color, transform, text-shadow;

  display: flex; 
  align-items: flex-end;

  transition: 
    color .9s,
    transform .9s,
    text-shadow .6s;
}
#SiteSubtitle, #SiteSubtitleReflection { font-size: 106%;}
#SiteSubtitleReflection { 
  color: var(--background);
  text-shadow: var(--title-shade);
  position: fixed;
  transform: translateY(159%) scaleX(1.01) scaleY(.369) rotate(180deg);
  opacity: 0.3;

  transition: 
    color .9s,
    text-shadow .6s;
}
@media (hover: hover) and (pointer: fine){
  #SiteTitle h1 span:hover,
  #SiteTitle h1 span:active { 
    color: var(--title-hover); 
    transform: scale(1.03);
    text-shadow: none;
  }
}
/* --- */

/* --[ Site's Main Content ]--- */
#SiteData main {
  font-size: 69%;

  flex: 1 1 auto;
  margin-top: 29px;
  margin-bottom: 9px;
  padding: 9px;

  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;  /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
}
#SiteData main::-webkit-scrollbar {
  display: none;          /* Chrome, Safari */
}
.NameCard{
  will-change: box-shadow;

  height: 39vw;
  width: 69vw;

  min-height: 136px;
  max-height: 236px;
  min-width: 213px;
  max-width: 396px;

  display: grid;
  grid-template-columns: 1.6fr 3fr;
  align-items: center;
  gap: 19px;
  padding: 9px;

  transition: box-shadow 1.3s;
  box-shadow: -.9px 1.3px 6px var(--border-color);
  border-radius: 6%;
}
/* --- */

/* --[ Card Details ]--- */
.CharacterImage{ height: 99%; }
.CharacterInfo { 
  display: flex;
  align-items: center;
  flex-direction: column; 
  gap: 3px; 
}
.CharacterInfo span:nth-child(1) { 
  color: var(--card-title);
  font-size: 199%; 
  margin-bottom: 6px;
}
.CharacterInfo span:nth-child(2), 
.CharacterInfo span:nth-child(3) { 
  font-size: 89%; 
  color: var(--card-text);
}
.CharacterInfo span:nth-last-child(1) {
  font-size: 119%;
  letter-spacing: .03em;
  color: var(--card-data);

  margin-top: 9px;
}

/* --- */

/* --[ Site's Footer ]--- */
#SiteData footer {
  will-change: color;

  color: var(--footer-color);
  font-size: 49%;
  letter-spacing: .3rem;

  align-self: flex-end;  

  transition: color 1.3s;
}
/* --- */

/* --[ Animations ]--- */
/* --- */

/* ---[ Fonts ]--- */
@font-face {
  font-family: 'body';
  src: url('../../fonts/body.woff2') format('woff2'),
       url('../../fonts/body.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
/* --- */