/* FATE/GRAND ORDER FANSITE - STYLE SHEET - MEGAERICZERO on NEOCITIES */

body
 {
  align-items:start;
  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;
  box-sizing:border-box;
  display:grid;
  font-family:Arial;
  gap:1rem;
  grid-template-columns:10rem 1fr;
  margin:0 auto;
  width:min(100vh,100%);
 }

footer
 {
  background-color:#CFDEE5F2;
  border-radius:0.5rem 0.5rem 0 0;
  bottom:0;
  color:#000000;
  font-size:0.8rem;
  grid-column:span 2;
  left:0;
  padding:0.5rem;
  position:sticky;
  z-index:2;
 }

header
 {
  background-color:#cfdee5aa;
  background-image:linear-gradient( 90deg , #00000000 , #cfdee5ee 20% 80% , #00000000 );
  border:solid white;
  border-width:0 0.15rem 0.15rem;
  box-shadow:0 0 0.5rem #80eaff;
  box-sizing:border-box;
  grid-column:span 2;
  padding:0.5rem 0.75rem;
 }

main.custom
 {
  align-items:start;
  display:grid;
  gap:1rem;
  grid-template-columns:1fr 1fr;
 }
main:not(.custom)
 {
  background-color:white;
  background-image:linear-gradient(180deg,#ffffff00,white 30rem),
                   url('/fgo-fansite/images/event-background.png');
  padding:1rem;
 }

nav
 {
  background-image:linear-gradient(to top,#29405b,#3a709f,#357098,#3a709f,#29405b);
  border:1px solid #ccaa99;
  border-radius:1rem;
  box-shadow:0 0 0.25rem 0.1rem #00000099;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  padding:0.5rem;
 }

.ascension-button
 {
  background-color:white;
  background-image:linear-gradient(90deg,#2aade3,#005088,#2aade3);
  border:1px solid white;
  box-shadow:0 0 0.25rem 0 black,inset 0 0 0.25rem black;
  color:white;
  text-shadow:0 0 0.125rem #000000,0 0 0.125rem #000000,0 0 0.125rem #000000;
 }
.ascension-button:hover { background-image:linear-gradient(90deg,#2aade3cc,#005088cc,#2aade3cc); }
.ascension-button.current-ascension { background-image:linear-gradient(90deg,#f7c123,#9b0a07,#f7c123); }

.ascension-list
 {
  display:flex;
  gap:1em;
  justify-content:space-between;
 }
.ascension-list button
 {
  flex:1;
  font-size:1rem;
 }
.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;
  color:white;
  margin:0 auto;
  position:relative;
  width:100%;
 }

.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:'+'; }
.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; }

.content-group
 {
  display:flex;
  flex-direction:column;
  gap:1rem;
 }

.illust-va-text:before
 {
  display:inline-block;
  font-weight:bold;
  width:3rem;
 }

.info-box
 {
  background-color:#151719E5;
  border:0.125rem solid white;
  color:white;
  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;
 }

.infobox-header
 {
  background-color:white;
  border-radius:0 0 1rem 0;
  color:#16171a;
  display:block;
  font-size:0.9rem;
  font-weight:bold;
  margin:-0.5rem -0.5rem 0.5rem;
  padding:0.125rem 0.25rem;
  text-shadow:none;
  width:80%;
 }

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

.mc-divider
 {
  border-bottom:1px dotted silver;
  color:silver;
  margin:0 0 0.5rem;
 }

.mc-image
 {
  aspect-ratio:512/683;
  background-color:#4b87a6;
  background-position:center center;
  background-size:cover;
  border-radius:1rem;
  box-shadow:0 0 0.1rem 0.05rem white inset;
 }

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

.nav-header
 {
  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 #0000001a;
  color:#000000;
  font-size:0.9rem;
  margin:0;
  padding:0.25rem;
  text-align:center;
 }

.nav-link
 {
  background-color:#ffffff99;
  border-radius:0.25rem;
  color:black;
  font-size:0.8rem;
  padding:0.25rem 0.125rem;
  text-align:center;
  text-decoration:none;
 }
.nav-link:hover { background-color:white; }

.np-card
 {
  float:left;
  margin:0 1rem 1rem 0;
 }

.np-class:before { content:'Class'; }

.np-class:before, .np-hits:before, .np-rank:before
 {
  color:#ffd900;
  display:inline-block;
  font-weight:bold;
  width:6rem;
 }

.np-effect
 {
  clear:both;
  font-size:0.9rem;
  padding:0.25rem;
 }

.np-hits:before  { content:'Hit Count'; }

.np-name
 {
  font-size:1.1rem;
  font-weight:bold;
  margin:0px;
 }

.np-rank:before  { content:'Rank'; }

.np-stats
 {
  float:right;
  width:calc(100% - 85px);
 }

.np-stats * { display:block; }

.np-title { margin:0; }

.npe-arts { color:#80ccff; }
.npe-buster { color:#ffaaaa; }
.npe-quick{ color:#80ff80; }
.npe-text
 {
  margin-bottom:0;
  text-shadow:1px 1px 1px black,1px -1px 1px black,-1px 1px 1px black,-1px -1px 1px black;
 }

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

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

.profile-alignment:before { content:'Alignment:'; }

.profile-attribute:before { content:'Attribute:'; }

.profile-gender:before { content:'Gender:'; }

.profile-height-weight:before { content:'Height/Weight:'; }

.profile-origin:before { content:'Origin:'; }

.profile-region:before { content:'Region:'; }

.profile-subtext:before
 {
  display:inline-block;
  font-weight:bold;
  width:8rem;
 }

.profile-traits { margin-bottom:1rem; }
.profile-traits:before
 {
  content:'Traits:';
  display:block;
 }

.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;
  color:white;
  display:block;
  font-size:0.68rem;
  width:100%;
 }

.saint-graph-atk
 {
  bottom:0;
  font-size:3.5rem;
  left:1rem;
  position:absolute;
 }

.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-class
 {
  font-size:4em;
  margin:0;
  padding:136.5% 0 0;
  text-align:center;
 }

.saint-graph-hp
 {
  bottom:0;
  font-size:3.5rem;
  position:absolute;
  right:1rem;
 }

.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%;
  position:relative;
  width:100%;
 }

.saint-graph-name
 {
  font-size:2em;
  margin:-2.5% 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.5% auto -0.5%;
  width:70%;
 }

.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-stat
 {
  text-shadow:0 0 0.25rem black,0 0 0.25rem black,0 0 0.25rem black,0 0 0.25rem black,0 0 0.25rem black,0 0 0.25rem black;
  font-family:times new roman;
  font-weight:bold;
 }

.servant-illust:before { content:'Illust:'; }

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

.servant-va:before     { content:'VA:'; }

.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;
 }

.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-absorb:before       { content:'Star Absorption'; }
.status-atk:before          { content:'ATK'; }
.status-cost:before         { content:'COST'; }
.status-death-chance:before { content:'Death Rate'; }
.status-hp:before           { content:'HP'; }
.status-level { margin-bottom:0.5rem; }
.status-level:before
 {
  color:gold;
  content:'Max Lv.';
  display:inline-block;
  font-weight:bold;
  width:5rem;
 }
.status-np-gain:before      { content:'NP Gain'; }
.status-star-gen:before     { content:'Star Generation'; }

.status-text { width:100%; }.status-text:before
 {
  color:#7acccc;
  display:inline-block;
  font-size:0.8rem;
  font-weight:bold;
 }

.wiki-table { background-color:black; }

.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) td { background-color:#eaeaea; }
.wiki-table tr:nth-child(odd)  td { background-color:#ffffff; }

#notes-group { grid-column:span 2; }

#page-title, #page-subtitle
 {
  color:white;
  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; }

/* END STYLE SHEET */