/* SUPER SMASH BROS FANSITE STYLE SHEET - MEGAERICZERO on NEOCITIES */

:root
 {
  --smash-blue:   #0e4be5;
  --smash-green:  #06a21f;
  --smash-red:    #ff1b25;
  --smash-yellow: #f38d08;
 }

a { text-decoration:none; }

body
 {
  align-items:start;
  background-color:gray;
  background-image:linear-gradient(180deg,#eaeaea,#aaaaaa 500px 100%);
  display:grid;
  grid-template-columns:12rem 1fr;
  gap:0.5rem;
  font-family:Arial;
  margin:0 auto;
  width:min(100%,150vh);
 }

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

h1
 {
  border-bottom:3px double silver;
  margin:0 0 1rem;
  padding-bottom:0.125rem;
 }

h2, h3
 {
  border-bottom:1px solid silver;
  clear:both;
  margin:1rem 0 0.5rem;
  padding-bottom:0.125rem;
 }

h4 { margin:0.5rem 0; }

h5
 {
  font-size:1rem;
  margin:0.5rem 0 0;
 }

hr
 {
  background-color:black;
  border:0;
  height:1px;
 }

img { max-width:100%; }

main
 {
  background-color:white;
  padding:2rem;
 }
main::after
 {  
  background-color:whitesmoke;
  border:1px solid silver;
  clear:both;
  color:#0000cc;
  content:'Super Smash Bros. Fansite - megaericzero - All info presented is fan-made';
  display:block;
  font-size:0.8rem;
  margin:1.5rem 0 0;
  padding:1rem;
 }

main > img
 {
  background-color:gainsboro;
  border:1px solid silver;
  max-height:200px;
  padding:0.5rem;
 }

nav
 {
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  padding:0.5rem;
 }

nav::before
 {
  aspect-ratio:1/1;
  background-color:black;
  background-image:linear-gradient(0deg ,transparent 25%,white 25% 35%, transparent 35%),
                   linear-gradient(90deg,transparent 25%,white 25% 35%, transparent 35%);
  border-radius:50%;
  content:'';
  display:block;
  font-size:0;
  width:100%;
 }

.fighter-palette
 {
  background-color:white;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain;
  border:2px solid black;
  border-radius:0.5rem 0.5rem 0 0;
  display:inline-block;
  font-size:0;
  height:13.5rem;
  margin:0 auto;
  position:relative;
  width:9.375rem;
 }
.fighter-palette::after
 {
  background-color:gray;
  border:2px solid black;
  bottom:-2px;
  content:' ';
  display:block;
  height:1rem;
  left:-2px;
  position:absolute;
  width:100%;
 }

.fighter-palette-black::after       { background-color:#303030; }
.fighter-palette-brown::after       { background-color:#804040; }
.fighter-palette-red::after         { background-color:#cc0000; }
.fighter-palette-orange::after      { background-color:#ffaa00; }
.fighter-palette-yellow::after      { background-color:#eaea00; }
.fighter-palette-green::after       { background-color:#40cc40; }
.fighter-palette-light-green::after { background-color:#80cc80; }
.fighter-palette-blue::after        { background-color:#0000cc; }
.fighter-palette-light-blue::after  { background-color:#80aacc; }
.fighter-palette-purple::after      { background-color:#8000aa; }
.fighter-palette-pink::after        { background-color:#ffaaee; }
.fighter-palette-white::after       { background-color:#cccccc; }

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

.gallery
 {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
 }

.gallery figcaption
 {
  font-size:0.8rem;
  padding:0 0.5rem;
 }

.gallery figure
 {
  background-color:whitesmoke;
  border:1px solid silver;
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  margin:0;
  padding:0.25rem;
 }

.gallery img
 {
  background-color:white;
  border:1px solid silver;
  height:150px;
 }

.move-box
 {
  background-color:white;
  border:2px solid black;
  border-radius:0.5rem;
  box-shadow:0.125rem 0.125rem 0.125rem #00000080;
  margin:0 0 8px;
 }

.move-box summary
 {
  display:flex;
  font-weight:bold;
  list-style:none;
 }

.move-category
 {
  align-items:center;
  background-color:gray;
  color:white;
  display:flex;
  font-size:0.7rem;
  height:1rem;
  justify-content:center;
  padding:1rem;
  text-align:center;
  width:3rem;
 }
.move-category.neutral { background-color:var(--smash-red);    }
.move-category.side    { background-color:var(--smash-blue);   }
.move-category.up      { background-color:var(--smash-yellow); }
.move-category.down    { background-color:var(--smash-green);  }

.move-desc
 {
  border-top:2px solid black;
  padding:0.5rem 1rem;
 }

.move-name
 {
  flex:1;
  font-weight:bold;
  height:1rem;
  padding:1rem;
 }

.move-preview
 {
  aspect-ratio:16/9;
  background-color:#606060;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  font-size:0;
  height:3rem;
 }

.move-symbol
 {
  background-color:black;
  color:white;
  font-weight:bold;
  height:1rem;
  padding:1rem;
  text-align:center;
  width:1rem;
 }
.move-symbol.neutral { color:var(--smash-red);    }
.move-symbol.side    { color:var(--smash-blue);   }
.move-symbol.up      { color:var(--smash-yellow); }
.move-symbol.down    { color:var(--smash-green);  }

.music-list
 {
  list-style:none;
  padding:0;
 }

.nav-header
 {
  border-bottom:1px solid black;
  font-size:1.4em;
  margin:0;
 }
.nav-header:not(:first-of-type) { margin-top:0.5rem; }

.nav-link
 {
  background-color:#eacc20;
  background-image:linear-gradient(135deg,black 0 10%,transparent 10% 90%, black 90% 100%);
  border:2px solid black;
  color:white;
  font-size:0.8rem;
  font-weight:bold;
  padding:0.5em 0.5em 0.5em 1.4em;
  text-shadow:1px 1px 3px black,1px 1px 3px black,1px 1px 3px black,1px 1px 3px black,1px 1px 3px black,
              1px 1px 3px black;
 }
.nav-link:hover
 { background-image:linear-gradient(135deg,black 0 10%,#ffffff80 10% 90%, black 90% 100%); }

.fighter-link  { background-color:#ff2020; }
.stage-link    { background-color:#6080ff; }
.spirits-link  { background-color:#20cc20; }

.nav-subheader
 {
  font-size:1.2em;
  margin:0;
 }

.profile-portrait
 {
  margin:0 auto;
  max-width:100%;
 }

.spirit-icon { height:1rem; }

.spirit-power
 {
  display:grid;
  grid-template-columns:1rem 1fr;
  text-align:right;
 }

.spirit-power-icon { width:100%; }

.spirit-sum
 {
  border-top:1px solid black;
  font-weight:bold;
  grid-column:span 2;
 }

.spirit-table td { text-align:center; }

.spirit-table img
 {
  max-width:8em;
  max-height:8em;
 }

.wiki-image
 {
  background-color:white;
  border:solid gainsboro;
  border-width:0.5rem 0.5rem 1rem;
  box-shadow:1px 1px 0 0 silver,1px -1px 0 0 silver,-1px 1px 0 0 silver,-1px -1px 0 0 silver;
  height:200px;
 }

.wiki-profile
 {
  float:right;
  margin:0 0 1rem 1rem;
  max-width:max(30%,30vh);
 }

.wiki-table
 {
  background-color:silver;
  border-spacing:1px;
  font-size:0.9rem;
  width:100%;
 }

.wiki-table td
 {
  background-color:white;
  padding:0.25rem 0.5rem;
 }

.wiki-table th
 {
  background-color:whitesmoke;
  padding:0.125rem 0.5rem;
 }

/* END STYLE SHEET */