/*========================================*/
/* GENERAL PAGE STYLING =) */
/*========================================*/

/* Fonts =) */
@font-face{
        font-family: Lucyville;
        src: url('../themes/fonts/Lucy-MAYP.ttf');
      }
      
/* bg1 is purple =)
   bg2 is pink =)
   txt 1 is orange =)
   accent is green =)
   fade is low opacity black =) */
      
:root {
  --bg1: #9c44d4;
  --bg2: #ea4c88;
  --txt1: #f3b302;
  --accent: #a2e83b;
  --fade: rgba(10, 10, 10, 0.90);
  }

/* The background and border for the border around the main page contents =) */
.pageBorder {
    background-color: var(--bg1);
    border: 4px solid var(--accent);
  }
  
/* The background image for the page contents =) */
.pageBody{
  background-color: var(--bg2);
  border-left: 4px solid var(--accent);
  border-right: 4px solid var(--accent);
  }

h1{
    font-family: Lucyville;
    color: var(--txt1);
  }
  
p1{ font-family: Lucyville; color: var(--accent); }

p2{ font-family: Lucyville; color: var(--txt1); }
  
/*========================================*/
/*========================================*/
/*========================================*/



/*========================================*/
/* HEADER STYLING =) */
/*========================================*/

/* Color, Font, and Border of the navbar buttons =) */
.navButton{
    border: 4px solid var(--txt1);
    color: var(--txt1);
    background: var(--accent);
    font-family: Lucyville;
  }

.navButton:hover{
    color: var(--accent);
    border: 4px solid var(--accent);
    background: var(--txt1);
  }
/*========================================*/  
/*========================================*/
/*========================================*/



/*========================================*/
/* FOOTER STYLING =) */
/*========================================*/

/* Color and font of the footer =) */
.footer{ border-top: 4px solid var(--txt1); background-color: var(--accent); }
  
/*========================================*/
/*========================================*/
/*========================================*/

#newsContainer{ background-color: var(--bg1); border: 4px solid var(--accent); }



/*========================================*/
/* SLIDESHOW SPECIFIC STYLING =) */
/*========================================*/

.slideContainer{ background-color: var(--fade); }

/*========================================*/
/*========================================*/
/*========================================*/



/*========================================*/
/* Gallery Specific Styling =) */
/*========================================*/
.galleryItem{ border: 4px solid var(--accent); }

#lightbox{ background-color: var(--fade); }

#closeBox{ color: var(--accent); }

#lightboxTitle{ color: var(--bg1); font-family: Lucyville; }

#lightboxDesc{ color: var(--txt1); font-family: Lucyville; }

#lightboxArtist{ color: var(--bg1); font-family: Lucyville; }

#galleryReset{
    background-color: var(--bg1);
    color: var(--txt1);
    border: 1px solid var(--txt1);
    font-family: Lucyville;
  }

.tag, #lightboxTags li {
    background-color: var(--accent);
    color: var(--bg1);
    border: 1px solid var(--bg1);
    font-family: Lucyville;
  }

.active, .tag:hover{
    background-color: var(--bg1);
    color: var(--accent);
    border: 1px solid var(--accent);
  }
/*========================================*/
/*========================================*/
/*========================================*/


.charThumb, .profilePicture{
    border: 4px solid var(--accent);
  }
  
.profileAbout, .profilePostContainer, .profileName{ 
    border: 4px solid var(--accent);
    background-color: var(--bg1);
    font-family: Lucyville;
  }
  
.profileInfo2, .profileInfo3{ color: var(--txt1); }
  
.postImage{ border: 4px solid var(--accent); background-color: var(--fade) }
  
.postDate{ color: var(--txt1); }