/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


/* Define fonts here */
@font-face {
  font-family: "knitheart";
  src: url("./fonts/knitheart-personal-use.regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "mgf-pinlock";
  src: url("./fonts/mgf-pinlock-personal-use.regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "quironax";
  src: url("./fonts/the-quironax.demo.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

/* Side navagation list */
.sideNavagationList{
  padding-left: 10px;
  margin-left: 0;
  list-style-type: square;
}
.sideNavagationList a{
  color: #981a61;
  text-decoration: none;
  background-color: #ffb6cb;
  padding: 3px;
  width: calc(100% - 6px);
  display: inline-block;
  border-style: none;
  margin-right: 5px;
  border-color: darkred;
  border-radius: 10px;
}
.sideNavagationList a:hover{
  background-color: #f3dfdf;
  color: #e64444;
}
.sideNavagationList a:active{
  color: #767600;
  background-color: white;
}
.sideNavagationList li{
  margin-bottom: 3px;
}


/* The header area*/
.wholeCoverCenterer{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.fancyTextHeader{
  font-family: "mgf-pinlock";
  width: 320px;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background-color: #ac61a7;
  color: yellow;
  border-style: solid;
  border-width: 5px;
  border-radius: 30px;
  font-size: 58px;
  border-color: #510145;
  -webkit-text-stroke: 2px #8e7e01;
}
.flareixia-title {
  background: linear-gradient(
    0deg,
    rgba(236, 51, 242, 1) 0%,
    rgba(255, 249, 87, 1) 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 3px #b42909;
}
.flareixia-title a{
  text-decoration: none
}



/* Global element wide CSS code snippets here */
body {
  background-color: #ff879c;
  background-image:url('./images/background-title-for-flareixia.jpg');
  background-size: 50%;
  color: black;
  font-family: "quironax", Verdana;
}
h1{
  font-family: "knitheart";
  color: #ffff34;
  font-size: 24px;
}
h2, h3{
  font-family: "knitheart";
  font-size: 20px;
}
hr{
  color: darkred;
}



/* Other main CSS Code here */
.noSection{
  color: #551a04;
}
.yesSection{
  color: #b9ff72;
}
#welcomeDisclaimer{
  font-size: 12px;
  color: darkred;
}
.goldenMarker{
  color: yellow;
}
.RoyaleHigh_Label{
  color: pink;
}
.omgno{
  color: #370101;
}
.goddessDollixia{
  color: #efad12;
}
.centerer{
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  margin-top: 10px
}
.mainContentArea{

}
.mainContentAreaDecoration{
  background-color: #db3f5abd;
  border-style: solid;
  border-width: 4px;
  border-color: darkred;
  color: white; 
  padding: 15px;
  font-size: 16px;
  border-radius: 20px;
}

.welcomeContentArea{
  width: 100%;
}
  
.sharedContentAreaDesign{
    /* Comming soon */
}
.sideContentArea{
  width: 200px;
  padding: 10px;
  float: left;
  margin-right: 10px;
}


/* Some forms styling */
.buttonsCenterer{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.proceedButton{
  padding: 10px;
  border-style: solid;
  border-radius: 5px;
  background-color: #53002b;
  font-size: 24px;
  border-color: #7e3666;
  color: pink;
  border-width: 3px;
}
.proceedButton:hover{
  background-color: #e8469a;
  border-color: #fcf4b4;
  cursor: pointer;
}
.proceedButton:active{
  color: #f7ff00;
  background-color: #ffb8dd;
}

  
  
/* RH Outfits page */
.rh_OutfitContent{
  width: 70%;
  /*
  float: left;
  margin-right: 20px;
  */
  margin-left: auto;
  margin-right: auto;
}
.rh_OutfitThumbsDecoration_TableContent {
  border-radius: 10px;
  border-style: groove;
  border-color: purple;
  border-width: 6px;
  background-color: #2a002a;
}

.rh_OutfitThumbs{
  width: 100%;
  height: auto;
}
/* Unused. Was used to put a standalone image border on Royale High outfits */
.rh_OutfitThumbsDecoration{
  border-radius: 10px;
  border-style: groove;
  border-color: purple;
  border-width: 6px;
}
.rh_OutfitThumbsDecoration:hover{
  cursor: pointer;
}