/* SMASH BROS FANSITE STYLE SHEET - MEGAERICZERO */

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

html { font-size:2vw; }

a { text-decoration:none; }

body
 {
  background-color:gray;
  background-image:linear-gradient(180deg,#eaeaea,#aaaaaa 500px 100%);
  font-family:Arial;
  margin:0 0 3em;
 }

footer
 {
  background-color:white;
  bottom:0;
  font-size:0.8em;
  left:0;
  padding:0.5em 1em;
  position:fixed;
  right:0;
 }

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

main
 {
  background-color:white;
  padding:2em;
  margin:0 0 1em;
 }
main::after
 {  
  background-color:#f4f4f4;
  border:1px solid #aaaaaa;
  clear:both;
  color:#0000cc;
  content:'Super Smash Bros. Fansite - megaericzero';
  display:block;
  font-size:0.8em;
  margin:1.5em 0 0;
  padding:1em 0.5em;
 }

nav
 {
  column-count:auto;
  column-width:200px;
  float:left;
  width:100%;
 }

#palette-gallery
 {
  display:inline-grid;
  gap:0.25rem;
  grid-template-columns:1fr 1fr 1fr 1fr;
 }

.nav-header
 {
  border:solid black;
  border-width:0 0 1px;
  font-size:1.4em;
  margin:1em 0 0;
 }
.nav-subheader
 {
  font-size:1.2em;
  margin:1em 0 0;
 }
.nav-link
 {
  background-color:#eaeaea;
  background-image:linear-gradient(135deg,black 0 10%,rgba(0,0,0,0) 10% 90%, black 90% 100%);
  border:2px solid black;
  color:white;
  display:block;
  font-weight:bold;
  margin:0.25em 0;
  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%,rgba(255,255,255,0.5) 10% 90%, black 90% 100%);
 }
#fighters-navgroup a { background-color:#ff2020; }
#stages-navgroup a   { background-color:#6080ff; }
#spirits-navgroup a { background-color:#20cc20; }
#misc-navgroup a   { background-color:#eacc20; }

#page-container
 {
  margin:0 auto;
 }

.gallery { text-align:center; }

.gallery-photo
 {
  background-color:#eaeaea;
  border:1px solid #cccccc;
  display:inline-block;
  margin:0 0.25em 0.5em;
  padding:0.5em;
  vertical-align:top;
 }
.gallery-photo img
 {
  background-color:white;
  border:1px solid #cccccc;
  display:block;
  height:100px;
  margin:0.25em auto 0.5em;
 }

.profile-box
 {
  float:right;
  margin:0 0 0 1em;
  max-width:50%;
 }
.profile-box td { font-size:0.8em; }
.profile-box img { max-width:100%; }

.character-palette
 {
  background-color:white;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain;
  border:2px solid black;
  border-radius:8px 8px 0 0;
  display:inline-block;
  font-size:0;
  height:200px;
  margin:0 0.25rem calc( 22px + 0.25rem );
  position:relative;
  width:150px;
 }
.character-palette::after
 {
  background-color:gray;
  border:2px solid black;
  bottom:-20px;
  content:' ';
  display:block;
  height:20px;
  left:-2px;
  position:absolute;
  width:100%;
 }
.mii-color-black::after       { background-color:#303030; }
.mii-color-brown::after       { background-color:#804040; }
.mii-color-red::after         { background-color:#cc0000; }
.mii-color-orange::after      { background-color:#ffaa00; }
.mii-color-yellow::after      { background-color:#eaea00; }
.mii-color-green::after       { background-color:#40cc40; }
.mii-color-light-green::after { background-color:#80cc80; }
.mii-color-blue::after        { background-color:#0000cc; }
.mii-color-light-blue::after  { background-color:#80aacc; }
.mii-color-purple::after      { background-color:#8000aa; }
.mii-color-pink::after        { background-color:#ffaaee; }
.mii-color-white::after       { background-color:#cccccc; }

.move-box
 {
  background-color:white;
  border:2px solid black;
  border-radius:8px;
  box-shadow:2px 2px 2px rgba(0,0,0,0.5);
  display:block;
  margin:0 0 8px;
 }

.move-summary
 {
  font-size:1.25rem;
  font-weight:bold;
  height:2em;
  list-style:none;
 }

.move-symbol
 {
  aspect-ratio:1/1;
  background-color:black;
  display:inline-block;
  font-size:1em;
  font-weight:bold;
  line-height:1em;
  padding:0.5em;
  text-align:center;
  vertical-align:top;
 }
.side-move .move-symbol, .forward-move .move-symbol, .back-move .move-symbol
                           { color:var(--smash-bros-blue);   }
.neutral-move .move-symbol { color:var(--smash-bros-red);    }
.up-move      .move-symbol { color:var(--smash-bros-yellow); }
.down-move    .move-symbol { color:var(--smash-bros-green);  }

.move-preview
 {
  aspect-ratio:16/9;
  background-color:#606060;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  display:inline-block;
  font-size:0;
  height:100%;
  vertical-align:top;
 }

.move-category
 {
  background-color:gray;
  display:inline-block;
  color:white;
  font-size:0.5em;
  height:2em;
  margin:0;
  padding:1em;
  text-align:center;
  vertical-align:top;
  width:9em;
 }
.side-move .move-category, .forward-move .move-category, .back-move .move-category
                             { background-color:var(--smash-bros-blue);   }
.neutral-move .move-category { background-color:var(--smash-bros-red);    }
.up-move .move-category      { background-color:var(--smash-bros-yellow); }
.down-move .move-category    { background-color:var(--smash-bros-green);  }

.move-header
 {
  display:inline-block;
  font-size:1em;
  font-weight:bold;
  height:1em;
  margin:0;
  padding:0.5em 1em;
  text-align:center;
  vertical-align:top;
 }

.move-info
 {
  border-style:solid;
  border-width:2px 0 0;
  display:block;
  padding:1em;
 }

#classic-mode-table
 {
  font-size:0.8em;
  width:100%;
 }
#classic-mode-table tr:first-child th { width:25%; }

.spirit-table
 {
  font-size:0.8em;
  width:100%;
 }
.spirit-table td { text-align:center; }
.spirit-table tr td:first-child { width:8em; }
.spirit-table img
 {
  max-width:8em;
  max-height:8em;
 }

.spirit-icon { height:2em; }

.spirit-power-icon
 {
  height:1.5em;
  vertical-align:middle;
 }

@media (pointer:fine)
 {
  html { font-size:16px; }
  body { margin:1em 0 3em; }
  #page-container { width:900px; }
 }
@media (pointer:fine) and (min-width:1100px)
 {
  .wiki-page main
   {
    float:right;
    padding:20px;
    width:860px;
   }
  .wiki-page nav
   {
    font-size:0.9em;
    margin:1em 0 0;
    width:190px;
   }
  .wiki-page 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;
    margin:0 auto 1.4rem;
    width:90%;
   }
  #page-container { width:1100px; }
 }

/* END STYLE SHEET */