/* This file is used for the basic structure of the website's CSS =)
All of the code written in here is for positioning, page structure, or anything else that should always remain the same regardless of theme =)
Anything involing colors and backgrounds is in the themes folder =)*/



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

/* This is for the entire body of the page =)
Elements within the body are stacked vertically instead of horizontally =)
The height of this element takes up the entire view of the page =) */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

/* A general purpose container that centers the elements within it =) */
.centerContents{
    display: flex;
    justify-content:center;
    text-align: center;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
  }
  
/* Created as a container for changing the flex direction to "row" as opposed to "column" =)
Was originally used for the gallery but wasn't needed, may remove before we go live =) */
.rowContainer{
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    justify-content: center;
  }

/* The border present around the main page body and in front of the background =)*/
.pageBorder{
    width: 80%;
    max-width: 80%;
    min-height: 100vh;
    display: flex;
    justify-content:center;
    flex-direction: row;
    flex: 100%;
  }

/* The container for the main page contents =) */
.pageBody{
    height: 100%;
    width: 70%;
  }
  
.arrowButton{
    position: absolute;
    padding: 16px;
    font-size: 1.8vw;
  }

.arrowNext{ right: 0; }
.arrowPrev{ left: 0; }
/*=============================*/
/*=============================*/ 
/*=============================*/ 



/*=============================*/
/* TEXT STYLING =) */
/*=============================*/

/* Text used for the title of page sections =) */
h1{
    font-size: 50px;
    position: relative;
    margin-top: 1em;
    text-decoration-line: underline;
  }

/* Text used for paragraphs on the pages =) */  
p1{
    font-size: 20px;
    position: relative;
    margin-top: 1em;
  }
  
p2{
    font-size: 18px;
    position: relative;
    left: 0;
  }
/*=============================*/
/*=============================*/ 
/*=============================*/ 


 
/*=============================*/ 
/* NAVBAR STYLING =) */ 
/*=============================*/
/* The navbar at the top of each page =) 
"font-Size" will adjust the size of the text =)*/
#navbar{
  width: 1000px;
  height: 100px;
  font-size: 25px;
  display: flex;
  justify-content: center;
  list-style-type: none;
  text-align: center;
  transform: translateY(-50%);
  }
  
/* The individual buttons within the navbar =) */
.navButton{
    display:block;
    padding:14px 16px;
    margin:0;
  }
/*=============================*/
/*=============================*/ 
/*=============================*/ 



/* FOOTER STYLING =) */
/*=============================*/  
/* The size and position of the footer =) */
.footer{
    height:3em;
    width:100%;
    position: fixed;
    bottom: 0;
    left: 0;
  }

/* The settings button within the footer =) */
.settingsButton{
    position: absolute;
    right: 0;
    margin-right: 50px;
    justify-content: center;
  }
/*=============================*/
/*=============================*/ 
/*=============================*/ 


 
/*=============================*/
/*PROJECT NEWS STYLING =)*/  
/*=============================*/
#newsContainer{
    position: relative;
    display: grid;
    margin-bottom: 3em;
    width: 35vw;
    height: 10vw;
  }
  
#newsDate{
    text-align: left;
    margin-left: 2em;
  }

.scrollBox{
    overflow-y: scroll;
    width: 85%;
    height: 100%;
    margin: auto;
  }
  
.arrowNews{ top: 25%; }
  
/*=============================*/
/*=============================*/ 
/*=============================*/ 



/*=============================*/  
/* SLIDESHOW STYLING  =) */
/*=============================*/
  
/* The container for the images in the slideshow =) */
.slideContainer {
    position: relative;
    display: grid;
    width: 35vw;
    height: 20vw;
    margin-bottom: 6em;
  }
  
/* The individual slides for the slideshow =) */
.devSlide{
    overflow: hidden;
    height: 100%;
    width: 100%;
  }

/* The images within the slides =) */
.devSlide img{ 
  object-fit: contain;
  width: 100%;
  height: 100%;
  }
  
/* Styling for the prev button in the slideshow =) */
.arrowSlide { top: 40%; }
  
/*  An empty div used to fill space between elements if necessary =) 
Currently only being used to fill in space between the devslides and the bottom of the home page =) */
.spaceFiller {
    height: 5em;
  }
/*=============================*/  
/*=============================*/ 
/*=============================*/ 



/*=============================*/  
/* GALLERY SPECIFIC STYLING =) */  
/*=============================*/

/* The container for the gallery =) */
.gallery{
  position: relative;
  top: 2em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10vw, 1fr));
  gap: 2em;
  width: 100%;
  } 

/* The items within the galleries =) */
.galleryItem{
  overflow:hidden;
  width: calc(10vw - 1.5em);
  height: calc(10vw - 1.5em);
  margin: auto;
  }

/* The Art stored witin the individual gallery items =) */
.galleryImage{
    width: 100%;
    height: 100%;
    object-fit: scale-down;
  }

/* The lightbox in the image galleries =)
More specifically the background and the container for everything within the lightbox =) */
#lightbox{
    z-index: 2;
    position: fixed;
    width: 100%;
    height: 100%;
    display: none;
  }

/* The button used to exit the lightbox =) */
#closeBox{
    z-index: 3;
    position: absolute;
    top: 1em;
    right: 1em;
    font-size: 24px;
  }

/* The container for the image within the lightbox =) */
#lightboxImage{
    width: 40vw;
    height: 40vw;
    margin: 2em 0;
  }

/* The image itself within the lightbox =) */
#lightboxImage img{
    object-fit: scale-down;
    object-position: center;
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }
  
/* The container for all of the data within the lightbox including the title, description, and artist name =) */  
#lightboxData{
    display: flex;
    flex-direction: column;
    width: 40%;
    z-index: 2;
  }
  
/* The title of the item within the lightbox =) */  
#lightboxTitle{
    font-size: 50px;
    text-decoration-line: underline;
    padding-top: 1.5em;
  }

/* The description of the item within the ligthbox =) */
#lightboxDesc{
  padding-top: 2.5em;
  font-size: 30px;
  }

/* The name of the artist who created the image within the lightbox =) */
#lightboxArtist{
  font-size: 20px;
  padding-top: 2.5em;
  }
  
#lightboxTags{
  margin-top: 0;
  padding-left: 0;
  list-style-type: none; 
  }

#lightboxTags li{
    display: inline-block;
    margin: 1em;
    font-size: 1.3em;
    padding: 0.5em;
  }
  
/* The container holding all of the individual tags in the galleries =) */
#tagContainer{ padding-top: 0.5em; }

/* The individual tags and the clear selection button used in the galleries =) */
.tag, #galleryReset{ padding: 0.5em; }

/* Indicates that an element is currently hidden, used within the galleries to hide items that have been filtered out by the tags =) */
.hidden{ display: none; }
/*=============================*/
/*=============================*/
/*=============================*/



/*=============================*/
/* CHARACTER PROFILE STYLING =)*/
/*=============================*/

/* Container for the thumbnails on the character index that lead to the character profiles =) */
.charList{
    position: relative;
    display: grid;
    grid-template-columns: auto auto;
    gap: 3em;
    margin-top: 5em;
    margin-bottom: 5em;
  }

/* The thumbnails for each of the characters that leads to the character profiles =) */
.charThumb{
    overflow: hidden;
    width: calc(20vw - 1.5em);
    height: calc(20vw - 1.5em);
  }
  
/* The container for all of the elements found on the character profiles aside from the header and footer =) */
.profileContainer{
    display: flex;
    justify-content:center;
    margin: 0;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    margin-right: 6em;
  }
  
/* The container for the name section of the character profiles =) */
.profileName{
    height: 100%;
    width: 30%;
    overflow-y: scroll;
    position: relative;
  }

/* The container for the profile pictures on the character profiles =) */
.profilePicture{
    overflow: hidden;
    width: calc(20vw - 1.5em);
    height: calc(20vw - 1.5em);
    margin-left: 2em;
    position: relative;
  }

.profilePicture img, .postImage img{
    height: 100%;
    width: 100%;
    overflow: hidden;
    object-fit: contain;
  }

/* The container for the about me sections and post sections of the character profiles =) */
.profileAboutPostContainer{
    display: flex;
    flex-direction: column;
    width: 40%;
    height: 100%;
    margin-left: 2em;
  }

/* The about me section of the character profiles =) */
.profileAbout{
    width: 100%;
    height: 40%;
    margin-bottom: 2em;
    overflow-y: scroll;
  }
  
/* This code creates an indent for the paragraph in the about section for the character profiles =) */
.profileAbout p1{ margin-left: 4em; }

/* The container for the text in the about section for the character profiles =) */
.profileAboutText{
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 2em;
  }

/* The container for the posts within the character profiles =) */
.profilePostContainer{
    height: 80%;
    width: 100%;
    overflow-y: scroll;
  }

/* The header text for the different sections of the character profiles =) */  
.profileHeader{
    top: 0;
    left: 0;
    margin: 0.5em;
    font-size: 40px;
  }

/* Container for the information stored under the name and profile picture of a character =) */
.profileInfoContainer{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-left: 2em;
  }

.profileInfoContainer2{ margin-top: 0.5em; margin-bottom: 0.5em; }

/* The text used for the information under the character profiles =) */
.profileInfo{
    top:0;
    left:0;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 0.5em;
  }
 
 /* The text used for the character's current mood in the character profiles =) */ 
.profileInfo2{ margin-left: 0em; }

/* The text used as the bullet points under "Relationships, Likes, and Dislikes" =) */
.profileInfo3{ 
    margin-left: 4em; 
    margin-bottom: 0em;
    margin-top: 0.25em;
  }
  
/* An empty element positioned at the bottom of the screen to stop the info from going beneath the footer =) */
.pageFiller{ height: 8vh; width: 100%;}
  
.profilePostContainer{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

.profilePost{
    margin: 2em;
    display: flex;
    flex-direction: column;
  }
  
.postImage{
    width: 100%;
    height: 20em;
    margin-top: 0.5em;
  }