/*////////////////////////////////////
            ROOT VARIABLES
////////////////////////////////////*/

  /* FONT IMPORT */
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Irish+Grover:300,400,500,600,700,800');

:root {
  --backgroundcolor: #090909;
  --contentboxcolor: #0e0e0e;
  --contrastcolor: #fefefe;
  --neutralcolor: grey;
  --accentcolor: #59ea20;
  --accenthighlight: #51c80f;
  
  --headerborderwidth: 0px;
  --mainboxborderwidth: 0px;
  --leftboxborderwidth: 0px;
  
  --mainfont: 'Roboto Mono';
  --headerfont: 'Irish Grover';
}


  /* TEXT SELECT */
::selection {
background: #59ea20;
color: #0e0e0e;
}

::-moz-selection {
  background: #59ea20;
  color: #0e0e0e;
}

/*////////////////////////////////////
                BODY
////////////////////////////////////*/

* {
  box-sizing: border-box;
}

body::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(12, 5, 15, 0) 50%, rgba(0, 0, 0, 0.2) 50%);
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
  z-index:200;
}

body {
  background-color: var(--backgroundcolor);
  background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/79453326_MtGdKPDlprLot11.png);
  background-size: 100px;
  background-position: center;
  background-blend-mode: overlay;
  color: var(--contrastcolor);
  font-family: var(--mainfont);
  font-size: 14px;
  letter-spacing: .7px;
  padding-top: 20px;
}

/*////////////////////////////////////
                LINKS
////////////////////////////////////*/

a {
  color: var(--accentcolor);
  transition-duration: 0.3s;
}

a:hover {
  letter-spacing: 2.4px;
  color: var(--accenthighlight);
  transition-duration: 0.3s;
}

/*////////////////////////////////////
                  IDs
////////////////////////////////////*/


  /* THIS IS THE CONTENT WRAPPER, IT CONTAINS ALL YOUR CONTENT AND PREVENTS IT FROM BLEEDING ALL OVER YOUR SITE */
#contentwrapper {
  /* WIDTH OF THE WRAPPER */
  width: 900px;
  
  /* CENTER THE WRAPPER */
  margin-right: auto;
  margin-left: auto;
  
  /* ADD PADDING AND SPACING */
  margin-top: -16px;
  margin-bottom: 10px;
}

  /* THIS FLEX CONTAINER CONTAINS THE SIDEBAR AND THE MAIN CONTENT */
#contentcontainer {
  /* WIDTH OF THE CONTAINER */
  width: 900px;
  
  /* CENTER THE CONTAINER */
  margin-right: auto;
  margin-left: auto;
  
  /* ADD PADDING AND SPACING */
  margin-top: 10px;
  
  display: flex;
  flex-wrap: nowrap;
}

  /* THIS IS YOUR PAGE'S HEADER IMAGE */
#mainheader {
  background-image:url(/images/bubbles6.png);
  background-size: contain;
  background-position: top center;
  width: 900px;
  height: 120px;
  display: table-cell;
  vertical-align: middle;
  border-color: var(--contrastcolor); 
  border-width: var(--leftboxborderwidth);
  border-style: solid;
  font-family: var(--headerfont);
}

  /* THIS IS THE MAIN BOX AND WHERE YOU PUT YOUR CONTENT IN */
#mainbox {
  background-color: var(--contentboxcolor);
  width: 720px;
  height: 600px;
  padding: 15px;
  margin-left: 10px;
  overflow: auto;
  border-color: var(--contrastcolor); 
  border-width: var(--mainboxborderwidth);
  border-style: solid;
  font-family: var(--mainfont);
}

  /* THIS IS YOUR SIDEBAR, PUT LINKS IN IT OR SOMETHING */
#leftbox {
  background-color: var(--contentboxcolor);
  width: 170px;
  height: 600px;
  padding: 10px;
  border-color: var(--contrastcolor); 
  border-width: var(--leftboxborderwidth);
  border-style: solid;
  font-family: var(--mainfont);
  overflow: auto;
  
}

  /* THIS IS THE NAVIGATION LIST CODING, GOOD FOR LINKS */
#leftbox ul {
  list-style-image: url(/images/eyeball3.gif); 
  margin: 4px;
  padding-left: 20px;
  font-size: 16px;
}


.useravatar {
  max-width: 150px;
  padding: 0 0 2px 0;
}

/*////////////////////////////////////
              CLASSES
////////////////////////////////////*/

  /* CENTERS THE TEXT IN AN ELEMENT */
.centered {
  text-align: center;
}

  /* CENTERS AN ELEMENT (DIV, TABLE, ETC) */
.centeredelement {
  margin-right: auto;
  margin-left: auto;
}

  /* BRIGHT BOX IN CASE YOU WANNA ADD CONTENT WARNINGS OR SOMETHING */
.warning {
  padding: 5px;
  margin: 5px 0 5px 0;
  background: var(--accentcolor);
  color: var(--backgroundcolor);
}

  /* CODING FOR FANCY <ul> LISTS */
.customul {
  margin-bottom: 0;
  margin-top: 5px;
  
  /* CHANGE THE x TO CHANGE THE BULLET */
  list-style-image: url(/images/question1.gif); 
}

.customul li {
  padding-bottom: 7px;
}

  /* CUSTOM <hr> LINES */
.mainhr {
  border-top: 0;
  border-right: 0;
  border-left: 0;
  clear: both;
  border-color: var(--accenthighlight); 
  border-width: 1px 0 0 0;
  border-style: dashed;
  margin: 14px 0 14px 0;
}

.navhr {
  border-top: 0;
  border-right: 0;
  border-left: 0;
  clear: both;
  border-color: var(--accenthighlight); 
  border-width: 1px 0 0 0;
  border-style: dashed;
  margin: 14px 0 14px 0;
}

  /* FLOAT AN ELEMENT LEFT */
.floatleft {
  float: left;
  padding: 5px 25px 25px 5px;
}

  /* FLOAT AN ELEMENT RIGHT */
.floatright {
  float: right;
  padding: 5px 5px 25px 25px;
}

  /* CHANGES THE APPEARANCE OF A <textarea> BOX */
.customtextarea {
  background-color: var(--backgroundcolor);
  width: 100px;
  height: 40px;
  border-color: var(--contrastcolor); 
  border-width: 1px;
  border-style: solid;
  color: var(--contrastcolor);
  font-family: var(--mainfont);
  font-size: 10px;
}

/*////////////////////////////////////
              HEADERS
  these are headers, aka the big text
  you see before paragraphs to let people
  know what they're about to read. 
  
  each header is numbered, and you can 
  surround your headers with the respective 
  tag to utilize them in your .html pages.
  
  i.e: 
    <h1>BIG HEADER</h1>
    <h2>SLIGHTLY LESS BIG HEADER</h2>
////////////////////////////////////*/

h4 {
  font-size: 15px;
  margin: 0;
}

h3 {
  font-size: 20px;
  margin: 0;
}

h2 {
  font-size: 25px;
  margin: 0;
}

h1 { 
  font-size: 35px;
  margin: 0;
}

h1, h2, h3, h4 {
  letter-spacing: 2px;
  font-variant: small-caps;
  font-family: var(--headerfont);
}

/*////////////////////////////////////
              SCROLLBAR
  this is the coding for the scrollbar.
  edit the colors and size as you please.
////////////////////////////////////*/

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: var(--accentcolor);
}

::-webkit-scrollbar-track {
  border-radius: 0px;
  width: 0px;  
  background: var(--contentboxcolor);
  border-color: var(--contrastcolor); 
  border-width: 0px;
  border-style: solid;
}
::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background: var(--accentcolor);
  border-color: var(--accentcolor); 
  border-width: 0px;
  border-style: solid;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accenthighlight);  
}

html {
  scrollbar-color: #59ea20 #0e0e0e;
}

/*////////////////////////////////////
              COLLAPSIBLES
////////////////////////////////////*/


input[type='checkbox'] { 
  display: none; 
} 

.collapsible-content {
  height: 0px;
  overflow: hidden;
  background-color: var(--backgroundcolor);
  color: var(--contrastcolor);
} 

.lbl-toggle { 
  display: block; 
  padding: 10px; 
  cursor: pointer; 
  transition: all 0.25s ease-out; 
  color: var(--accentcolor); 
  background: var(--backgroundcolor); 
  font-size: 16px; 
  text-transform: uppercase; 
} 

.lbl-toggle::before { 
  content: ' '; 
  display: inline-block; 
  border-top: 5px solid transparent; 
  border-bottom: 5px solid transparent; 
  border-left: 5px solid currentColor; 
  vertical-align: middle; margin-right: .7rem; 
  transform: translateY(-2px);
  transition: transform .2s ease-out; 
} 

.toggle:checked+.lbl-toggle::before { 
  transform: rotate(90deg) translateX(-3px); 
} 

.toggle:checked + .lbl-toggle + .collapsible-content { 
  height: auto; 
}

.collapsible-content .content-inner { 
  padding: 0 10px 0 10px;
} 

/*////////////////////////////////////
              MEDIA QUERY
  allows the layout to scale properly
  on mobile when screen is under 600px.
  don't touch unless you know what you're doing.
////////////////////////////////////*/

@media all and (max-width: 600px) {
  
  #contentwrapper, #contentcontainer, #characterheader, #leftprofile, #profilecontainer, #profilewrapper, #profilebox, #warningbox, #profilebox, #leftprofile, #mainbox, #leftbox, #characterbox, #gallerybox  {
    width: 100% !important;
  }
	
	#profilecontainer, #profilewrapper, #profilebox, #warningbox, #profilebox, #mainbox, #characterbox, #gallerybox {
		height: 500px;
	}
	
  #profilewrapper, #mainbox, .characterrowlong {
    margin: 0 !important;
  }
    
  #leftbox {
    height: auto;
    text-align: center;
    margin: 10px 0;
  }
  
  #leftbox ul, #leftprofile ul {
    list-style: none;
  }

  #contentcontainer {
    display: block;
  }
    
  .profilefloatleft, .profilefloatright, .characteravatar {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
    
  .spacerimg {
    width: 100%;
  }
  
  .characterrowlong {
  flex-wrap: wrap;
  }
  
  .charactercardlong {
  margin: 5px 0 !important;
  }
  
  
  #mainheader {
    background-image:url(/images/bubbles6.png);
    background-size: cover;
    background-position: top center;
    width: 900px;
    height: 120px;
    display: table-cell;
    vertical-align: middle;
    border-color: var(--contrastcolor); 
    border-width: var(--leftboxborderwidth);
    border-style: solid;
    font-family: var(--headerfont);
  }
    
}