/* FGO FANSITE STYLESHEET - MEGAERICZERO */

body
 {
  background-color:#4d8099;
  background-attachment:fixed;
  background-image:url('/fgo-fansite/images/main-background.jpg');
  background-position:center top;
  background-repeat:no-repeat;
  background-size:cover;
  color:white;
  margin:0 0 3em;
 }

.wiki-page footer
 {
  background-color:rgba(207,222,229,0.95);
  border-radius:0 0.5rem 0 0;
  bottom:0;
  color:#000000;
  font-size:0.8em;
  left:0;
  margin:0;
  padding:0.5em;
  position:fixed;
 }

.wiki-page header
 {
  background-color:#cfdee5aa;
  background-image:linear-gradient( 90deg , #00000000 , #cfdee5ee 20% 80% , #00000000 );
  border:solid #ffffff;
  border-width:0 0.15rem 0.15rem;
  box-shadow:0 0 0.5rem #80eaff;
  padding:0.5rem 0.75rem;
 }

#page-title, #page-subtitle
 {
  margin:0;
  text-align:right;
  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;
 }
#page-title    { font-size:2rem; }
#page-subtitle { font-size:1.5rem; }

.wiki-page main
 {
  background-image:linear-gradient( 0deg , #ffffff00 , #ffffffea 5% 95% , #ffffff00 ) , url('/fgo-fansite/images/event-background.png');
  color:black;
 }

.wiki-page nav
 {
  background-image:linear-gradient(to top,#29405b,#3a709f,#357098,#3a709f,#29405b);
  border-color:#ccaa99;
  border-style:solid;
  border-width:1px;
  box-shadow:0 0 0.25rem 0.1rem rgba(0,0,0,0.6);
 }

.wiki-page nav h1
 {
  background-color:#eaeaea;
  background-image:linear-gradient(to bottom,#ffffff,#cccccc,#ffffff);
  border:1px;
  border-color:#000000;
  border-style:solid;
  border-radius:0.25rem;
  box-shadow:0 0 0.5rem rgba(0,0,0,1);
  color:#000000;
  font-size:1.15em;
  margin:0 auto;
  padding:0.25em;
  text-align:center;
 }

.wiki-page nav a
 {
  background-color:rgba(255,255,255,0.6);
  border:0;
  border-radius:0.25rem;
  break-inside:avoid;
  color:black;
  display:block;
  margin:0.25em 0;
  padding:0.25em;
  text-align:center;
 }
.wiki-page nav a:hover { background-color:rgba(255,255,255,1); }

.content-group
 {
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:1rem;
  vertical-align:top;
  width:100%;
 }

.saint-graph-new
 {
  aspect-ratio:512/874;
  background-position:center center, center 25%, center center, center 98.5%;
  background-repeat:no-repeat;
  background-size:cover, contain, cover, 20%;
  display:block;
  font-size:0.68rem;
  width:100%;
 }

.saint-graph-old
 {
  aspect-ratio:512/874;
  background-image:url('../images/class_cards/class_card_unknown.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  display:block;
  font-size:0.68rem;
  width:100%;
 }

.saint-graph
 {
  aspect-ratio:512/874;
  background-image:url('../images/class_cards/class_card_unknown.jpg');
  background-size:cover, contain;
  background-position:center center, center 25%;
  background-repeat:no-repeat;
  display:block;
  font-size:0.68rem;
  width:100%;
 }

.saint-graph-portrait
 {
  background-image:url('../images/illustrations/generic_servant.jpg');
  background-size:contain;
  background-position:center 25%;
  background-repeat:no-repeat;
  height:100%;
  width:100%;
 }

.saint-graph-frame
 {
  background-image:url('../images/saint_graph_borders/sg_border_0.png');
  background-position:center center, center 98.5%;
  background-repeat:no-repeat;
  background-size:cover, 20%;
  height:100%;
  width:100%;
 }

.saint-graph-border
 {
  background-image:url('../images/saint_graph_borders/sg_border_0.png');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  height:100%;
  width:100%;
 }

.saint-graph-icon
 {
  background-image:url('../images/class_icons/class_beast_black.png');
  background-position:center 98.5%;
  background-repeat:no-repeat;
  background-size:20%;
  height:100%;
  width:100%;
 }

.saint-graph-stat
 {
  text-shadow:0 0 3px #000000,0 0 0.25rem #000000,0 0 0.25rem #000000,0 0 0.25rem #000000,0 0 0.25rem #000000;
  font-family:times new roman;
  font-weight:bold;
 }

.saint-graph-class
 {
  font-size:4em;
  margin:0;
  padding:136% 0 0;
  text-align:center;
 }

.saint-graph-name
 {
  font-size:2em;
  margin:-3% 0 0;
  text-align:center;
 }
.saint-graph-name::before
 {
  background-image:linear-gradient(to right,rgba(0,0,0,0) 10%,rgba(255,255,255,0.9) 15% 85%,rgba(0,0,0,0) 95%);
  box-shadow:0 0 2px 0 black;
  content:' ';
  display:block;
  height:0.125rem;
  margin:1% auto -1%;
  width:70%;
 }

.saint-graph-hp, .saint-graph-atk
 {
  font-size:4.1em;
  margin:4%;
 }
.saint-graph-hp
 {
  float:right;
  margin-right:50px;
  text-align:right;
 }
.saint-graph-atk
 {
  float:left;
  margin-left:50px;
 }

.info-box
 {
  background-color:rgba(21,23,25,0.9);
  border:0.125rem;
  border-color:#ffffff;
  border-style:solid;
  color:#ffffff;
  margin:0 0 1em;
  overflow:hidden;
  padding:0.5rem;
  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;
 }
.info-box::before
 {
  background-color:#ffffff;
  border:0;
  border-radius:0 0 1rem 0;
  color:#16171a;
  display:block;
  font-size:0.9em;
  font-weight:bold;
  margin:-0.5rem -0.5rem 0.5rem;
  padding:0 0.25rem;
  text-shadow:none;
  width:50%;
 }
#notes-box { width:auto; }

#ascension-box::before         { content:'Saint Graphs'; }
#status-box::before            { content:'Status'; }
#personal-skills-box::before   { content:'Skills'; }
#class-skills-box::before      { content:'Class Skills'; }
#append-skills-box::before     { content:'Append Skills'; }
#np-box::before                { content:'Noble Phantasm'; }
#command-cards-box::before     { content:'Command Card'; }
#illust-va-box::before         { content:'Illustrator/VoiceActor'; }
#character-info-box::before    { content:'Character Info'; }
#parameters-box::before        { content:'Parameters'; }
#profile-1-box::before         { content:'Profile 1'; }
#profile-2-box::before         { content:'Profile 2'; }
#profile-3-box::before         { content:'Profile 3'; }
#profile-4-box::before         { content:'Profile 4'; }
#profile-5-box::before         { content:'Profile 5'; }
#profile-6-box::before         { content:'Profile 6'; }
#voice-summon-box::before      { content:'Summon'; }
#voice-levelup-box::before     { content:'Level up'; }
#voice-ascension-1-box::before { content:'Ascension 1'; }
#voice-ascension-2-box::before { content:'Ascension 2'; }
#voice-ascension-3-box::before { content:'Ascension 3'; }
#voice-ascension-4-box::before { content:'Ascension 4'; }
#voice-bond-1-box::before      { content:'Bond Level 1'; }
#voice-bond-2-box::before      { content:'Bond Level 2'; }
#voice-bond-3-box::before      { content:'Bond Level 3'; }
#voice-bond-4-box::before      { content:'Bond Level 4'; }
#voice-bond-5-box::before      { content:'Bond Level 5'; }
#voice-likes-box::before       { content:'Likes'; }
#voice-dislikes-box::before    { content:'Dislikes'; }
#voice-grail-box::before       { content:'About the Holy Grail'; }
#voice-event-box::before       { content:'During an Event'; }
#voice-birthday-box::before    { content:'Birthday'; }
#voice-16-box::before          { content:'Conversation 1'; }
#voice-17-box::before          { content:'Conversation 2'; }
#voice-18-box::before          { content:'Conversation 3'; }
#voice-19-box::before          { content:'Conversation 4'; }
#voice-20-box::before          { content:'Conversation 5'; }
#voice-21-box::before          { content:'Conversation 6'; }
#voice-22-box::before          { content:'Conversation 7'; }
#voice-23-box::before          { content:'Conversation 8'; }
#bond-box::before              { content:'Max Bond Craft Essence'; }
#valentine-box::before         { content:'Valentine / White Day Gift'; }
#illustrator-box::before       { content:'Illustrator'; }
#comments-box::before          { content:'Comments'; }
#notes-box::before             { content:'Notes'; }
.ce-status-box::before         { content:'Status'; }
.ce-skill-box::before          { content:'Skills'; }
.ce-illustrator-box::before    { content:'Illustrator'; }
.ce-comments-box::before       { content:'Comments'; }
.ce-notes-box::before          { content:'Notes'; }

#ascension-list
 {
  display:flex;
  gap:1em;
  justify-content:space-between;
 }
#ascension-list button
 {
  flex:1;
  font-size:1rem;
 }

.infobox-divider
 {
  border:none;
  border-top:1px #ffffff dotted;
  clear:both;
  height:0;
  margin:0.5rem;
  width:95%;
 }

.status-text { width:100%; }

.stat-subsection-a
 {
  display:flex;
  gap:1rem;
  justify-content:space-between;
 }
#stat-subsection-a .status-text::before { width:40%; }

#stat-subsection-b
 {
  display:grid;
  gap:0.5rem;
  grid-template-columns:1fr 1fr;
 }
#stat-subsection-b .status-text::before { width:60%; }

#status-level, .ce-level
 { margin-bottom:0.5rem; }
#status-level::before, .ce-level::before
 {
  color:gold;
  content:'Max Lv.';
  display:inline-block;
  font-weight:bold;
  width:5rem;
 }

.ce-stat-hp, .ce-stat-atk, .ce-stat-cost { width:33%; }

.status-text::before
 {
  color:#7acccc;
  display:inline-block;
  font-size:0.8em;
  font-weight:bold;
 }
.ce-stat-hp::before, .ce-stat-atk::before, .ce-stat-cost::before { width:40%; }

#status-hp::before           { content:'HP'; }
#status-attack::before       { content:'ATK'; }
#status-cost::before         { content:'COST'; }
#status-absorb::before       { content:'Star Absorption'; }
#status-generation::before   { content:'Star Generation'; }
#status-gain::before         { content:'NP Gain'; }
#status-death::before        { content:'Death Rate'; }
.ce-stat-hp::before               { content:'HP'; }
.ce-stat-atk::before              { content:'ATK'; }
.ce-stat-cost::before             { content:'Cost'; }

.skill
 {
  display:grid;
  gap:0.25rem 0.5rem;
  grid-template-columns:4rem auto;
  margin:0 0 1rem;
  width:100%;
 }

.skill-header
 {
  font-size:0.7rem;
  font-weight:bold;
  margin:0;
 }
.skill-header-a { color:#acc4e5; }
.skill-header-b { color:#7acccc; }

.skill-name
 {
  font-weight:bold;
  margin:0;
 }

.skill-icon
 {
  height:3rem;
  width:3rem;
 }

.skill-effect { font-size:0.9em; }

.skill-cooldown { font-size:0.7em; }
.skill-cooldown::before
 {
  break-inside:avoid;
  color:#7acccc;
  content:'Cooldown';
  display:inline-block;
  font-weight:bold;
  margin-right:1em;
 }

#np-card
 {
  float:left;
  margin:0 1em 1em 0;
 }
#noble-phantasm-stats
 {
  float:right;
  width:calc(100% - 85px);
 }
#noble-phantasm-title, #noble-phantasm-name, #noble-phantasm-rank, #noble-phantasm-class, #noble-phantasm-hits
 { display:block; }
#noble-phantasm-name
 {
  font-size:1.1em;
  font-weight:bold;
  margin:0px;
 }
#noble-phantasm-title { margin:0; }
#noble-phantasm-rank::before, #noble-phantasm-class::before, #noble-phantasm-hits::before
 {
  color:#ffd900;
  display:inline-block;
  font-weight:bold;
  width:100px;
 }
#noble-phantasm-rank::before  { content:'Rank'; }
#noble-phantasm-class::before { content:'Class'; }
#noble-phantasm-hits::before  { content:'Hit Count'; }
#noble-phantasm-effect
 {
  clear:both;
  font-size:0.9em;
  padding:5px;
 }

.command-card
 {
  width:20%;
 }

.command-deck
 {
  display:flex;
  justify-content:space-between;
 }

.hit-counts
 {
  display:flex;
  justify-content:space-between;
 }
.hit-counts::before
 {
  content:'Hit Count';
  color:#7acccc;
  display:inline-block;
  font-weight:bold;
 }
.hit-counts::before, .hit-counts div
 {
  text-align:center;
  width:20%;
 }

.hits-icon { height:1em; }

#servant-illust, #servant-va { display:block; }

.illust-va-text::before
 {
  display:inline-block;
  font-weight:bold;
  width:100px;
 }
#servant-illust::before { content:'Illust:'; }
#servant-va::before     { content:'VA:'; }

.servant-parameters
 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.25em;
 }

.parameter-label
 {
  display:inline-block;
  font-weight:bold;
  width:2em;
 }

.parameter-bar
 {
  height:1em;
  margin:0 0.25em;
  vertical-align:middle;
 }


.profile-subtext { display:block; }

#profile-traits { margin-bottom:20px; }

.profile-subtext::before
 {
  display:inline-block;
  font-weight:bold;
  width:8em;
 }
#profile-height-weight::before { content:'Height/Weight:'; }
#profile-origin::before { content:'Origin:'; }
#profile-region::before { content:'Region:'; }
#profile-alignment::before { content:'Alignment:'; }
#profile-gender::before { content:'Gender:'; }
#profile-attribute::before { content:'Attribute:'; }
#profile-traits::before
 {
  content:'Traits:';
  display:block;
 }

.ce-saint-graph
 {
  aspect-ratio:512/875;
  background-image:url('../images/craft_essence_borders/ce_border_1.png') ,
                   url('../images/illustrations/generic_craft_essence.jpg');
  background-position:center center, center top;
  background-repeat:no-repeat;
  background-size:cover;
  border-radius:1.15rem;
  margin:0 auto;
  position:relative;
  width:100%;
 }

#bond-box .ce-saint-graph, #valentine-box .ce-saint-graph { transform:scale(0.9); }

.ce-sg-stat
 {
  font-family:times new roman;
  position:absolute;
  text-shadow:0 0 4px #000000,0 0 4px #000000,0 0 4px #000000,0 0 4px #000000,0 0 4px #000000,0 0 4px #000000;
 }

.ce-sg-name, .ce-sg-label { width:100%; }

.ce-sg-name
 {
  bottom:11%;
  font-size:3em;
  font-weight:bold;
  text-align:center;
  white-space:nowrap;
 }
.ce-sg-name::after
 {
  background-image:linear-gradient(to right, #00000000 10%, #ffffffea 15% 85%, #00000000 95%);
  box-shadow:0 0 0.125rem 0 black;
  content:' ';
  display:block;
  height:0.125rem;
  margin:-0.25rem auto 0;
  width:70%;
 }
.ce-sg-name-long
 {
  margin-left:-50%;
  text-shadow: 4px 2px 1px black,   4px 0 1px black,  4px -2px 1px black,
               0   2px 1px black,   0   0 1px black,  0   -2px 1px black,
              -4px 2px 1px black,  -4px 0 1px black, -4px -2px 1px black;
  transform:scaleX(0.5);
  transform-origin:center;
  width:200%;
 }

.ce-sg-label
 {
  bottom:6%;
  font-size:2em;
  text-align:center;
 }

.ce-sg-atk, .ce-sg-hp
 {
  bottom:1%;
  font-size:2.5em;
  font-weight:bold;
 }
.ce-sg-atk
 {
  left:10%;
  text-align:left;
 }
.ce-sg-hp
 {
  right:10%;
  text-align:right;
 }
.ce-sg-atk::before, .ce-sg-hp::before { content:'+'; }

/* Event Styles */

#event-title
 {
  background-color:blue;
  background-image:linear-gradient(to bottom,#042b56,#063d7e,#08509c);
  border-radius:8px;
  color:white;
  font-size:1rem;
  font-weight:bold;
  padding:16px;
 }
#event-title::before
 {
  color:yellow;
  content:'Event';
  display:inline-block;
  font-size:0.9rem;
  font-weight:normal;
  margin-right:10px;
 }

#event-prologue
 {
  background-color:rgba(255,223,223,0.7);
  border-radius:1rem;
  font-size:1.2em;
  margin:1rem 0;
  font-weight:bold;
  padding:1rem;
 }

.event-banner
 {
  aspect-ratio:8/3;
  background-position:center center;
  background-size:cover;
  font-size:0;
  margin:1em 0;
  width:100%;
 }
.event-banner::before
 {
  background-image:url('../images/banners/banner_event_border.png');
  background-size:contain;
  content:' ';
  display:block;
  height:100%;
  width:100%;
 }

.summon-banner
 {
  aspect-ratio:800/289;
  background-image:url('../images/banners/banner_summon_backdrop.jpg');
  background-size:cover;
  margin:0 auto 1em;
  position:relative;
  width:90%;
 }
.summon-banner::after
 {
  background-image:url('../images/banners/banner_summon_border.png');
  background-size:contain;
  bottom:0;
  content:' ';
  display:block;
  left:0;
  position:absolute;
  right:0;
  top:0;
  z-index:3;
 }
.summon-banner-subheader
 {
  bottom:1em;
  color:white;
  display:block;
  font-family:Times New Roman;
  font-size:2em;
  font-style:italic;
  font-weight:bold;
  left:0;
  margin:0;
  position:absolute;
  right:0;
  text-align:center;
  text-shadow:0 0 0.15em #202000,0 0 0.3em #ffd900,0 0 0.3em #ffd900,0 0 0.3em #ffd900,0 0 0.3em #ffd900;
  white-space:nowrap;
  z-index:2;
 }

.quest-box
 {
  background-color:silver;
  border-radius:1em;
  padding:0.5em;
 }
.quest-box + .quest-box { margin:1em 0 0; }
.main-quest { background-color:maroon; }
.free-quest { background-color:forestgreen; }

.quest-box table
 {
  border-spacing:1px;
  overflow:hidden;
  width:100%;
 }
.quest-box table:first-child
 {
  border-top-left-radius:0.75em;
  border-top-right-radius:0.75em;
 }
.quest-box table:last-child
 {
  border-bottom-left-radius:0.75em;
  border-bottom-right-radius:0.75em;
 }
.quest-box table + table { margin-top:0.5em; }

.quest-info td, .quest-battle td, .quest-notes td
 {
  background-color:white;
 }
.quest-info td, .quest-battle td
 {
  padding:0.5em;
  text-align:center;
 }
.quest-notes td { padding:1em; }
.quest-info th, .quest-battle th
 {
  color:white;
  font-size:0.8em;
  padding:0.25em;
  text-shadow:0.1em 0.1em 0 black,-0.1em 0.1em 0 black,0.1em -0.1em 0 black,-0.1em -0.1em 0 black;
 }

.quest-info th { width:calc( 100% / 3 ); }

.quest-battle td
 {
  display:flex;
  justify-content:space-evenly;
 }
.quest-battle th { width:3em; }

.fighter-entry
 {
  font-size:0.8em;
  width:100%;
 }
.fighter-entry + .fighter-entry
 {
  border:solid silver;
  border-width:0 0 0 1px;
 }
.fighter-name
 {
  font-weight:bold;
 }
.fighter-subname { font-size:0.9em; }
.fighter-class { width:2em; }

.fighter-level::before, .fighter-hp::before
 {
  font-size:0.9em;
  font-weight:bold;
  width:3em;
 }
.fighter-level::before { content:'Lv '; }
.fighter-hp::before { content:'HP '; }

/* Wiki Styles */

.wiki-title
 {
  border-bottom:1px solid black;
  clear:both;
  margin:0 0 15px;
 }

.wiki-header
 {
  border-bottom:1px solid black;
  clear:both;
  margin:15px 0 10px;
 }

.wiki-subheader
 {
  clear:both;
  margin:15px 0 10px;
 }

.wiki-image
 {
  background-color:white;
  border-color:#eaeaea;
  border-style:solid;
  border-width:8px 8px 16px;
  box-shadow:0 0 0 1px #cccccc;
  max-height:500px;
  max-width:300px;
  vertical-align:top;
 }

.wiki-table
 {
  background-color:black;
  border-spacing:1px;
 }
.wiki-table tr:first-child td, .wiki-table tr:first-child th
 {
  background-image:linear-gradient(to bottom,#042b56,#063d7e,#08509c);
  color:white;
  font-size:0.75rem;
  font-weight:bold;
  text-align:center;
  text-shadow:0 0 2px #000000;
 }
.wiki-table tr:nth-child(even) { background-color:#eaeaea; }
.wiki-table tr:nth-child(odd)  { background-color:#ffffff; }
.wiki-table td { padding:8px; }

.wiki-text
 { margin:0 0 20px; }

@media (pointer:fine)
 {
  html { font-size:18px; }

  .custom-content
   {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:1em;
   }
  #notes-group { grid-column:span 2; }

  .info-box { margin:0; }

  @media (min-width:1100px)
   {
    .wiki-page nav { border-radius:0 0 1rem 0; }
   }
 }
 
/* END STYLESHEET */