/* 
    ________________________________________________________
    > website:            mrsginger.nl/
    > theme:              template name
    > designed by:        ladyginger
    > please do NOT remove this credit!
    
    > this design was handmade with lots of frustration, trial
      and errors, and it would be appreciated if you didn't 
      steal the code!
    ________________________________________________________ */

/*  ________________________________________________________
    -- ROOT SETTINGS -- 
    ________________________________________________________ */
:root {
  --font-size:              10px;
  --body:                   #919191;
  --header:                 #161515;
  --container:              #555555;
  --footer:                 #121111;
  --border:                 #100C0F;
  --linkbuttons:            #151515;
  --linkbuttonhover:        #808080;
  --activelink:             #808080;
  --hoverlink:              #ffffff;
  --navhover:               #121111;
  --font:           		    'Open Sans', sans-serif;
}

* {
  box-sizing:               border-box;
}

/* -- MAIN BODY -- */
body,html,head {
	background:               var(--body);
	margin:                   0;
	padding:                  0;
}

#header {
	background:               var(--header);
	width:                    900px;
	height:                   300px;
	margin:                   0 auto;
	text-align:               center;
}

#title{
	padding-top:              120px;
}

a.title:link, a.title:active, a.title:visited {
	color:                    var(--activelink);
	text-decoration:          none;
	margin:                   0;
	font-family:              var(--font);
	font-size:                50px;
}

a.title:hover {
	font-family:              var(--font);
	font-size:                50px;
	color:                    var(--hoverlink);
	text-decoration:          none;
}

a:link,a:active,a:visited {
	font-family:              var(--font);
	font-size:                12px;
	color:                    var(--hoverlink);
	text-decoration:          none;
}

a:hover {
	font-family:              var(--font);
	font-size:                12px;
	color:                    var(--hoverlink);
	text-decoration:          none;
}

/* -- NAVIGATION -- */
#navigation {
	margin:                   0;
	list-style:               none;
}

#navigation li {
	float:                    left;
}

#navigation li a {
	color:                    var(--activelink);
	display:                  block;
	width:                    150px;
	font-family:              var(--font);
	font-size:                14px;
	padding:                  10px;
	text-decoration:          none;
	text-align:               center;
}

#navigation li a:hover {
	font-family:              var(--font);
	font-size:                16px;
	color:                    var(--navhover);
	text-decoration:          none;
}

/* -- NAVIGATION BUTTONS --*/
a.nav2, a.nav2:link, a.nav2:active, a.nav2:visited { 
	width:                    90px;
	height:                   90px;
	display:                  inline-block;
	border-radius:            45px;
	  -moz-border-radius:     45px;
	  -webkit-border-radius:  45px;
	  -khtml-border-radius:   45px;
	font-size:                18px;
	margin:                   2px;
	line-height:              90px;
	text-align:               center;
	background:               var(--linkbuttons);
	font-family:              var(--font); 
	text-transform:           lowercase; 
	font-style:               italic;
	text-decoration:          none;
	font-weight:              none;
	letter-spacing:           -1px;
	  -webkit-transition:     0.8s ease-out;
	  -moz-transition:        0.8s ease-out;
	  transition:             0.8s ease-out;
	color:                    var(--linkbuttonhover);
	border:                   2px solid #100C0F;
} 

a.nav2:hover { 
	transform:                rotate(360deg); 
	  -moz-transform:         rotate(360deg); 
	  -webkit-transform:      rotate(360deg); 
	  -o-transform:           rotate(360deg);
	color:                    #151515;
	background:               #808080;
}

/* -- CONTAINER -- */
#container {
	font-family:              var(--font);
	font-size:                12px;
	background:               var(--container);
	text-align:               justify;
	width:                    920px;
	margin:                   10px auto;
	padding:                  10px;
}

#content {	
	width:                    630px;
	float:                     left;
}

#sidebar{
	width:                    230px;
	float:                    right;
}

#footer {
	background:               var(--footer);
	clear:                    both;
	height:                   30px;
	padding:                  5px;
	text-align:               center;
	align:                    center;
	color:                    #808080;
	font-family:              var(--font);
	font-size:                10px;
}

/* -- TEXT SETTINGS -- */
h1 {
	font-family:              var(--font);
	font-size:                23px;
	text-align:               center;
	color:                    #808080;
  border-bottom:            1px solid #121111;
}

h2 {
	font-family:              var(--font);
	font-size:                17px;
	text-align:               left;
	color:                    #121111;
  border-bottom:            1px dashed #808080;
}

h3 {
  font-family:              var(--font);
  font-size:                15px;
  color:                    #808080;
  margin-bottom:            5px;
}

blockquote {
  margin:                   20px 0;
  padding:                  10px 15px;
  border-left:              3px solid #121111;
  color:                    #808080;
  font-style:               italic;
}

ul {
  padding-left:             25px;
}

li {
  margin-bottom:            5px;
}

mark {
  background:               #121111;
  color:                    #ffffff;
  padding:                  2px 4px;
}

code {
  background:               #121111;
  color:                    #aaa;
  padding:                  2px 5px;
  font-family:              monospace;
}

hr {
  border:                   0;
  border-top:               1px solid #121111;
  margin:                   20px 0;
}

.small-text {
  font-size:                10px;
  color:                    #808080;
}


/* -- CODE BOX -- */
.code-grid {
  display:                  grid;
  grid-template-columns:    300px 300px;
  gap:                      10px;
}

.code-grid textarea {
  width:                    100%;
  height:                   150px;
  margin:                   0;  
  padding:                  5px;
  box-sizing:               border-box;
  font:                     10px monospace;
  line-height:              1.4;
  border:                   1px solid var(--border);
  background:               var(--accent5);
  color:                    var(--text);
  resize:                   none;
}

.code-grid textarea {
  display:                  block;
  width:                    100%;
  height:                   250px;
  margin:                   0;
  padding:                  8px;
  box-sizing:               border-box;
  font:                     10px/1.4 monospace;
  border:                   1px solid var(--border);
  background:               var(--header);
  color:                    #ffffff;
  resize:                   none;
  overflow:                 auto;
}