/* FATE GRAND OVERWATCH - STYLE SHEET - MEGAERICZERO */

a { text-decoration:none; }

body
 {
  background-image:url('/fgo-fansite/images/event-background.png');
  font-family:Arial;
  margin:0;
 }

h1
 {
  background-color:lightsteelblue;
  background-image:linear-gradient(90deg,slategray,transparent,slategray);
  border:2px solid white;
  box-shadow:0 0 0.125rem black,0 0 0.25rem black inset;
  color:white;
  font-family:georgia;
  font-style:italic;
  margin:0 0 1rem;
  padding:0.5rem;
  text-align:center;
  text-shadow:0 0 0.25rem black,0 0 0.125rem black;
 }

h2
 {
  border-bottom:3px double black;
  overflow:hidden;
 }

h3
 {
  border-bottom:1px solid black;
  margin:1rem 0 0;
  overflow:hidden;
 }

header
 {
  background-color:blue;
  background-image:linear-gradient(90deg,darkblue,transparent,darkblue);
  display:flex;
  justify-content:space-between;
  left:0;
  padding:0 1rem;
  position:sticky;
  right:0;
  top:0;
  z-index:2;
 }
header a
 {
  background-color:#ffffff20;
  border:solid #ffffff60;
  border-width:0 1px;
 }
header a:hover { background-color:#ffffff40; }

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

main
 {
  backdrop-filter:blur(1rem);
  border:3px double black;
  box-sizing:border-box;
  margin:1rem auto;
  padding:1rem;
  max-width:100vh;
 }

#home-link
 {
  color:gold;
  font-family:georgia;
  padding:1rem;
  text-shadow:0 0 0.25rem black,0 0 0.125rem black;
 }
#home-link:after { content:' ]'; }
#home-link:before { content:'[ '; }
#home-link:hover
 {
  background-color:#ffffff80;
  color:white;
 }

#return-link
 {
  color:gainsboro;
  font-size:0.7rem;
  padding:1.15rem;
  text-shadow:0 0 0.125rem black;
 }
#return-link:hover
 {
  background-color:#ffffff40;
  color:white;
 }

.character-portrait
 {
  float:right;
  margin:0 0.25rem 1rem 1rem;
 }

.portrait
 {
  filter:drop-shadow(1px 1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 0 0 black);
  width:min(15vh,15vw);
 }

.skill-desc
 {
  align-items:flex-start;
  display:flex;
  gap:0.5rem;
  margin:0.5rem 0 0;
 }

.skill-header.np:before
 {
  content:'[Noble Phantasm]';
  display:block;
  font-size:0.5rem;
  font-weight:normal;
 }

.skill-key
 {
  background-color:gold;
  border-radius:0.2rem;
  float:left;
  font-size:0.6rem;
  font-weight:bold;
  margin-right:0.5rem;
  padding:0.2rem;
  text-align:center;
  width:2.5rem;
 }

.skill-text { flex:1; }

.skin-list
 {
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  justify-content:space-between;
 }
.skin-list img
 {
  border:1px solid black;
  width:min(20vh,20vw);
 }

nav
 {
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  justify-content:space-between;
 }
nav a:hover { filter:drop-shadow(0 0 1rem lightskyblue); }
nav a:hover img { opacity:0.7; }

/* END STYLE SHEET */