/* MARVEL RIVALS FAN SITE STYLE SHEET - MEGAERICZERO */

:root
 {
  --black:#21222a;
  --white:#dae1f2;
 }

a { text-decoration:none; }

body
 {
  background-color:#eaeaea;
  font-family:Arial;
  margin:0;
 }

body:before
 {
  background-image:url('https://images2.imgbox.com/94/a0/e2iG79E0_o.jpg');
  background-size:cover;
  background-position:center center;
  content:'';
  inset:0;
  opacity:0.2;
  position:fixed;
  z-index:-1;
 }

footer
 {
  background-color:var(--black);
  bottom:0;
  color:white;
  font-size:min(1vh,1vw);
  left:0;
  padding:min(1vh,1vw);
  position:sticky;
  right:0;
  z-index:2;
 }

header
 {
  background-color:var(--black);
  display:flex;
  font-size:min(1.5vh,1.5vw);
  justify-content:space-between;
  left:0;
  padding:0 1rem;
  position:sticky;
  right:0;
  top:0;
  z-index:2;
 }

header a
 {
  text-shadow:1px 1px 0 black,1px -1px 0 black,-1px 1px 0 black,-1px -1px 0 black;
  transform:skew(-15deg);
 }

main
 {
  margin:1rem auto;
  min-height:100vh;
  padding:1rem;
 }

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

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

#home-link
 {
  background-color:#ffffff20;
  border:solid var(--white);
  border-width:0 0.125em;
  color:yellow;
  font-size:1.5em;
  font-weight:bold;
  padding:0.25em 1em;
 }
#home-link:hover
 {
  background-color:#ffffff80;
  color:lemonchiffon;
 }

#portrait
 {
  background-color:white;
  border:1px solid black;
  display:block;
  margin:1rem auto;
  max-width:70%;
 }

#return-link
 {
  color:var(--white);
  font-size:1em;
  padding:0.5em;
 }
#return-link:hover
 {
  background-color:#ffffff80;
  color:white;
 }

.ability-key
 {
  background-color:yellow;
  border-radius:0.125rem;
  color:black;
  display:inline-block;
  font-size:0.5rem;
  margin-right:1rem;
  padding:0.125rem 0.25rem;
  transform:skew(-10deg);
 }

.ability-name
 {
  font-weight:bold;
 }

.ability-section
 {
  background-color:#000000cc;
  color:white;
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:1rem;
 }

.ability-section-header
 {
  border-bottom:1px solid white;
  font-style:italic;
  font-size:0.9rem;
  font-weight:bold;
  margin:0;
 }

.ability-text
 {
  margin:0.25rem 0;
 }

.hero-difficulty
 {
  color:gold;
  text-shadow:0 0 0.125rem black,0 0 0.125rem black,0 0 0.125rem black,0 0 0.125rem black,0 0 0.125rem black;
 }
.hero-difficulty:before
 {
  color:black;
  content:'Difficulty';
  font-weight:bold;
  margin-right:1rem;
  text-shadow:none;
 }

.hero-name
 {
  font-family:Arial;
  font-size:3rem;
  font-style:italic;
  line-height:1em;
  margin:0;
  text-shadow:1px 1px 0 black,1px -1px 0 black,-1px 1px 0 black,-1px -1px 0 black;
  white-space:nowrap;
 }

.hero-real-name
 {
  border-top:0.25rem solid white;
  font-size:1rem;
  transform:skew(-10deg);
 }
.hero-real-name span
 {
  background-color:white;
  padding:0.25rem 1rem;
  }

.hero-role
 {
  font-size:1rem;
  font-style:italic;
  font-weight:bold;
  margin:0;
 }
.hero-role:before
 {
  aspect-ratio:1/1;
  background-size:contain;
  content:' ';
  display:block;
  filter:invert(1);
  float:left;
  height:1rem;
  margin-right:0.5rem;
 }

.hero-role-duelist:before    { background-image:url('icons/roles/duelist.png'); }
.hero-role-strategist:before { background-image:url('icons/roles/strategist.png'); }
.hero-role-vanguard:before   { background-image:url('icons/roles/vanguard.png'); }

.hero-stats
 {
  display:flex;
  transform:skew(-10deg);
  gap:1rem;
  justify-content:space-between;
 }
.hero-stats * { flex:1; }

.nav-link
 {
  aspect-ratio:9/16;
  background-color:white;
  background-image:url('https://images2.imgbox.com/81/ab/U0F4Sskl_o.jpg');
  background-position:center top;
  background-size:100% 100%;
  position:relative;
 }
.nav-link:hover { box-shadow:0 0 0.25rem 0 gold,0 0 0.5rem 0.25rem yellow; }
.nav-link:hover .nav-link-text
 {
  background-color:transparent;
  color:white;
  background-image:linear-gradient(to top,#302e47,transparent);
 }

.nav-link-icon { height:1.5em; }

.nav-link-text
 {
  background-color:#302e47;
  bottom:0;
  color:#dae1f2;
  display:flex;
  justify-content:space-between;
  left:0;
  margin:0;
  padding:1rem;
  position:absolute;
  right:0;
  text-shadow:0 0 0.125rem #302e47,0 0 0.125rem #302e47,0 0 0.125rem #302e47,0 0 0.125rem #302e47;
  white-space:nowrap;
 }


/* END STYLE SHEET */