@charset "utf-8";

/*
   Style Sheet for www.PsychicChamber.com 
   Index page
  
   Filename: indexstyles.css */
/* ======================================
   Base Global Styles Until Media Queries
   ====================================== */

body  {
      max-width: 820px;
      margin: auto;
    }

/* Video Player Styles */

#vidintro  {
   color: #ecaa20; /* Yellow-gold */
   font-family: Papyrus, serif;
   font-weight: bold;
   font-size: 1.3em;
   text-align: justify;
} 

video  {
   background: url(../images/posterbackground.jpg); 
   display: block;
   width: 100%;
   height: auto;
} 


/* Track Styles in Video Player */
 ::cue  {
   background: rgba(0,0,0,0.9);
   color: #ecaa20; /* Yellow-gold */
   font-family: Papyrus, serif;
   font: 4em; 
}


/* Aside Styles */ 
.tarot-h1  {
    font-size: 4em;
}

.tarot_blurb  {
    text-align: justify;
}


/* ================
     Flex Styles
   ================
*/

/* Crystal Girl image container with border */
.img_crystalgirl_wrapper {
    width: 100%; 
    display: flex; 
    justify-content: center;
    box-shadow: rgba(139, 20, 20, 0.8) 0px 0px 20px 20px;
}
.aside_blurb_container  {
   width: 100%; 
} 

/* Figure Styles */

/* Figure consists of Crystal Girl image 
with figcaption as call-to-action */
figure > h1  {
   color: #ecaa20; /* Yellow-gold */
   font-family: Papyrus, serif;
   font-weight: bold;
   font-size: 2em;
   text-align: center;
   margin-bottom: 15px; 
}

figure > img  {
   border-radius: 30px;
}

figcaption  {
   color: #ecaa20; /* Yellow-gold */
   font-family: Papyrus, serif;
   font-weight: bold;
   font-size: 1.5em; 
   text-align: center;
   margin-top: 30px;
   /*text-shadow: 2px 2px #ff0000;  */ 
} 

/* Aside Styles */

/* Direct Your Future header */
aside > h1  {
   color: #ecaa20; /* Yellow-gold */
   font-family: Papyrus, fantasy;
   font-weight: bold;
   font-size: 1.9em;
   margin-top: 55px;
   margin-bottom: 15.0936px;
}

/* Tarot! header */
.tarot_h1  {
   color: #ecaa20; /* Yellow-Gold */
   font-family: Papyrus, fantasy;
   font-weight: bold;
   font-size: 1.9em;
   margin-bottom: 15.936px; 
}

/* Questions & Blurb */
aside {
   color: #ecaa20; /* Yellow-Gold */
   font-family: Papyrus, fantasy;
   font-weight: bold;
   font-size: 1.3em;
}

.tarot_blurb {
    text-align: justify;
}

.tele_cartouche  {
    border-radius: 30px;
    margin-top: 15px;
    padding: 2px 2px 1px 1px;
    background-color: #ecaa20; /* Yellow-gold */
    color: blue; /* Blue*/
    font-family: Ariel, sans-serif;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    width: 100%; 
    display: flex; 
    justify-content: center;
}

/* Egyptian cartouche for Meet Our Readers! link */
.cartouche {
    color: #ecaa20;
    background-color: #4b0a0e;
    font-size: 1.9em;
    font-family: Papyrus, fantasy;
    text-decoration: none;
    text-shadow: 
                 2px 4px 2px blue;
    text-align: center;
    width: 400px;
    height: 50px;
    border: 4px double #ecaa20;
    border-radius: 50px;
    display: inline-block;
    padding: 3px 5px;
    position: relative;
    width: 90%;
    margin: auto;
  }
  
/* Vertical bar for Meet Our Readers! cartouche */
.cartouche::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -12px;
  display: inline-block;
  border: 4px double #ecaa20;
  border-radius: 4px;
  height: 100%;
}

/* ===============================
   Cell Phone Styles: 0px to 320px 
   =============================== */
@media only screen and (max-width: 320px) {
   
    /* Figure and aside */
        . {
            display: flex;
        } 

/* =============================
   Tablet Styles: 321px to 819px 
   ============================= */
   @media only screen and (min-width: 600px) {
   
/* Tablet Media Query to float figure on RIGHT/LEFT of blurb at larger screen sizes*/
 /* Figure and aside */
     .aside_blurb_container {
         display: flex;
     } 

     .needhelp_text  {
        font-size: 2.6em; 
     } 
} 

 /* =================================
   Desktop Styles: 820px and greater 
   ================================= */
@media only screen and (min-width: 820px) {

/* To lower h1_header paragraph so text doesn't hit bottom of lotuses */
    #h1_para {
        margin-top: 50px;
    }
}