/* MEGA MAN NETWORK BATTLE STYLE SHEET - MEGAERICZERO */

a { text-decoration:none; }

body
 {
  align-items:start;
  background-color:#304060;
  color:white;
  font-family:Arial;
  margin:0;
  min-height:100vh;
  text-shadow:0.05rem 0.05rem 0 black, 0.05rem 0.05rem 0.1rem black;
 }

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

h6
 {
  border-bottom:1px solid white;
  font-size:1rem;
  margin:1rem 0 0.5rem;
 }

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

header a
 {
  border:solid white;
  border-width:0 1px;
  transform:skew(-15deg);
 }

main
 {
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin:0 auto;
  padding:1rem;
 }

@media (pointer:fine) { main { max-width:100vh; } }

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

section
 {
  background-color:#202020;
  border:3px double gray;
  overflow:auto;
  padding:0.5rem 1rem;
 }

ul
 {
  list-style:square;
  padding-left:1rem;
 }

#home-link
 {
  background-image:linear-gradient(lemonchiffon,gold,orange);
  background-clip:text;
  color:transparent;
  font-size:2rem;
  font-weight:bold;
  padding:0.25rem 1rem;
  text-shadow:none;
 }
#home-link:hover
 {
  color:lemonchiffon;
 }

#return-link
 {
  color:#ffffffaa;
  font-size:1rem;
  padding:0.75rem 1rem;
 }
#return-link:hover
 {
  background-color:#ffffff80;
  color:white;
 }

.char-debut { font-style:italic; }

.char-name
 {
  font-size:2rem;
  font-weight:bold;
 }

.char-portrait
 {
  aspect-ratio:1/1;
  background-color:white;
  background-position:center top;
  background-repeat:no-repeat;
  background-size:cover;
  border:1px solid black;
  margin:0 auto;
 }

.char-profile
 {
  align-items:start;
  display:flex;
  flex:1;
  gap:1rem;
  justify-content:space-between;
 }
.char-profile * { flex:1; }

.char-stat
 {
  display:flex;
  gap:1rem;
 }

.char-stat div
 {
  flex:1;
  text-align:center;
 }
.char-stat div:first-child { font-weight:bold; }

.char-stats
 {
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  justify-content:space-between;
 }

.char-stats section { flex:1; }

.icon { height:1em; width:1em; }

.move-header
 {
  clear:both;
  padding-bottom:0.125rem;
 }
.move-header:before
 {
  background-color:goldenrod;
  border-radius:0.2rem;
  font-size:0.6rem;
  margin-right:1rem;
  padding:0.2rem 0.5rem;
  vertical-align:top;
 }

.move-text { margin-top:0; }

.move-slot-main:before { content:'M1'; }
.move-slot-sub:before { content:'M2'; }
.move-slot-skill1:before { content:'E'; }
.move-slot-skill2:before { content:'F'; }
.move-slot-ultimate:before { content:'Q'; }

.nav-link
 {
  aspect-ratio:3/4;
  background-color:white;
  background-position:center top;
  background-repeat:no-repeat;
  background-size:cover;
  border:3px double black;
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:1px;
  position:relative;
 }
.nav-link:hover
 {
  box-shadow:0 0 0.5rem 0.125rem white;
  opacity:0.9;
 }

.nav-link-text
 {
  background-color:dimgray;
  border-top:1px solid black;
  bottom:0;
  color:white;
  left:0;
  height:1rem;
  line-height:1rem;
  padding:0.5rem;
  position:absolute;
  right:0;
  white-space:nowrap;
 }

.nav-role
 {
  position:absolute;
  right:1px;
  top:1px;
 }

.tooltip { border-bottom:1px dotted #ffffff40; }

/* END STYLE SHEET */