/* This CSS file controls the actual sizing, distribution, and layout of the pages. This also controls media query, to make the pages responsive on mobile. */
/* For colors, see colors.css. For effects, see effects.css. */

:root {
  --padding-small: 7px;
  --padding-medium: 14px;
  --padding-large: 28px;
  --border: 7px;
  --border-round: 48px;
}

body {
  font-family: 'Lexend', sans-serif;
}

/*
.dark-mode {
  background-color: black;
  color: white;
  transition: 0.5s;
}

.light-mode {
  transition: 0.5s;
}
*/

/* Theme switcher. */

.theme {
  width: 48px;
  height: 48px;
  font-size: 24px;
  justify-content: center;
  right:0px;
  bottom: 0px;
  margin: 24px;
  position:fixed;
}

/* Layout CSS */


#container {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: var(--padding-small);
}

/* --- */

.header {
  width: 50%;
  width: 408px;
  height: 200px;
  height: 100%;
  float: left center;
}

/* Navigation bar. */

.navbar {
  max-width: 1100px;
  max-height: 300px;
  width: 100%;
  height: 100%;
  padding: var(--padding-small);
  border-radius: 7px;
  flex: 1;
}

  .navbar ul {
    display: flex;
    padding: 0; /*Leave this.*/
    margin: 0 auto;
    list-style-type: none;
    justify-content: space-evenly;
  }
  
  .navbar li {
    margin: 0 auto;
    padding: 14px 0px 0px 0px;
  }

/* --- */

#flex {
  display: flex;
  margin: 24px;
}

#main-content {
  margin: 0 14px 0 14px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  overflow: scroll;
  background: black;
}

#Left-SideNavigation {
  display: flex;
}

#Right-SideNavigation {
  display: flex;
}

  #leftSidebar {
    display: flex;
    max-width: 240px;
    width: 100%;
    overflow:scroll;
  }


  #rightSidebar {
    display: flex;
    max-width: 240px;
    width: 100%;
    overflow:scroll;
  }


  aside {
    display: flex;
    position: relative;
    border-radius: 7px;
    font-size: smaller;
  }


  .updatebox {
    height: 240px;
    border-radius: 14px;
    padding: 7px;
    overflow:auto;
    overflow-y: scroll;
    box-sizing: border-box;
  }
  
  .update {
    height: auto;
    width: auto;
    font-size: 14px;
  }


/* Ordering. */

#Left-SideNavigation {
  order: 1;
}

#main-content {
  order: 2;
}

#Right-SideNavigation {
  order: 3;
}

/* Media Query, for responsiveness on other devices. */

  @media only screen and (max-width:900px) {
                
    #container {
    margin: 24px auto;
    width: 80%;
    padding: 4px;
    }
                  
    #flex {
    flex-wrap: wrap;
    }
    
    #main-content {
      order: 1;
    }
    
    #Left-SideNavigation {
      order: 3;
    }
    
    #Right-SideNavigation {
      order: 4;
    }
    
    .navbar {
      display: flex;
    }
    
  }

/*   ✦  end of CSS for home page/provided by sadgrl   ✦   */

/* Starting CSS for character page. */

/* Navigation bar */


.tab-container {
  display: flex;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  justify-content: space-evenly;
  background-color: white;
}

  .tab-bar {
      display: flex;
      max-width: 800px;
      width: 100%;
      padding: 12px;
      margin: 0 auto;
      justify-content: space-evenly;
      background-color: gray;
  }
  
.tab-bar-item .tab-button {
  display: flex;
  min-width: 48px;
  background-color: black;
}


.tab-red {
  background-color: #0117B6;
  color: white;
}

.charaBox {
 float: left;
 padding: 14px;
 max-width: 270px;
 max-height: 480px;
 width: 40%;
 height: 40%;
 margin: 24px;
}

.charaImg {
  /* FUCK YOU */
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height:100%;
}