/* HOLO RIVALS STYLE SHEET - MEGAERICZERO on NEOCITIES */

a { text-decoration:none; }

body
 {
  background-image:url('https://images2.imgbox.com/1e/9a/ThXFZSIU_o.jpg');
  box-sizing:border-box;
  color:midnightblue;
  display:flex;
  flex-direction:column;
  font-family:Arial;
  margin:0 auto;
  width:min(100%,100vh);
 }

footer
 {
  background-color:deepskyblue;
  bottom:0;
  color:white;
  font-size:0.8rem;
  left:0;
  padding:0.5rem 1rem;
  position:sticky;
  right:0;
  z-index:2;
 }

h1
 {
  background-color:deepskyblue;
  border-radius:3rem;
  color:white;
  font-size:2rem;
  padding:0.5rem;
  text-align:center;
 }

h2
 {
  border-bottom:1px solid black;
  margin:2rem 0 1rem;
 }

h3
 {
  border-bottom:1px solid silver;
  font-size:1rem;
  margin:0 0 0.5rem;
  padding:0 0 0.5rem 5rem;
 }

header
 {
  background-color:deepskyblue;
  border-radius:0 0 1rem 1rem;
  display:flex;
  justify-content:space-between;
  left:0;
  padding:0 2rem;
  position:sticky;
  right:0;
  top:0;
  z-index:2;
 }

header a { color:white; }
header a:hover { background-color:#ffffff80; }

li { margin-left:1.5rem; }

main { padding:2rem; }

nav
 {
  display:grid;
  font-size:0;
  gap:1rem;
  grid-template-columns:1fr 1fr 1fr 1fr;
 }

nav a
 {
  aspect-ratio:1/1;
  border:1px solid midnightblue;
  border-radius:0.5rem;
  overflow:hidden;
 }

nav a:hover { opacity:0.7; }

nav a img
 {
  height:100%;
  object-fit:cover;
  width:100%;
 }

.character-gallery
 {
  display:grid;
  gap:1rem;
  grid-template-columns:1fr 1fr 1fr 1fr;
 }

.character-gallery figure
 {
  aspect-ratio:3/4;
  background-color:white;
  background-position:center top;
  background-size:cover;
  border:1px solid black;
  border-radius:0.5rem;
  margin:0;
 }

.character-portrait
 {
  border:1px solid midnightblue;
  border-radius:1rem;
  flex:1;
 }

.character-profile
 {
  display:flex;
  gap:1rem;
 }

.character-skill { margin:2rem auto; }

.character-stat
 {
  background-color:midnightblue;
  border-radius:1rem;
  color:white;
  display:flex;
  height:1rem;
  padding:0.5rem 2rem;
 }

.character-stat b, .character-stat span
 {
  flex:1;
  text-align:center;
 }
.character-stat b { font-size:0.9rem; }

.character-stats
 {
  display:flex;
  flex:1;
  flex-direction:column;
  gap:0.5rem;
 }

.skill-info
 {
  align-items:flex-start;
  display:flex;
  gap:1rem;
  justify-content:space-between;
 }

.skill-key
 {
  background-color:gold;
  border-radius:0.5rem;
  font-size:0.6rem;
  font-weight:bold;
  padding:0.4rem 0.5rem;
  text-align:center;
  width:3rem;
 }

.skill-text { flex:1; }

#disclaimer { font-weight:bold; }

#home-link
 {
  font-size:1.5rem;
  font-weight:bold;
  line-height:1em;
  padding:0.25rem 1rem;
  font-style:italic;
 }
#home-link:after  { content:']'; }
#home-link:before { content:'['; }

#return-link
 {
  font-size:1rem;
  padding:0.5rem 1rem;
 }

/* END STYLE SHEET */