/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your   HTML content. To learn how to do something, just try searching Google for questions like   "how to change link color." */

/* Assembled by Nero Villagallos O'Reilly as a part of the The Quick 'n' Dirty Guide to Making a Website (2022). See https://blog.itsnero.com/webguide for more info. */

/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */

html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline-width:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
img{vertical-align:middle}a{color:inherit}
/* End extract */

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on August 19, 2015 */



@font-face {
   font-family: 'terminal_grotesque';
   src: url('fonts/tg/terminal-grotesque-webfont.eot');
   src: url('fonts/tg/terminal-grotesque-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/tg/terminal-grotesque-webfont.woff2') format('woff2'),
        url('fonts/tg/terminal-grotesque-webfont.woff') format('woff'),
        url('fonts/tg/terminal-grotesque-webfont.ttf') format('truetype'),
        url('fonts/tg/terminal-grotesque-webfont.svg#terminal_grotesqueregular') format('svg');
   font-weight: normal;
   font-style: normal;

}

@font-face {
   font-family: 'steps_mono';
   src: url('fonts/stm/Steps-Mono.otf') format('opentype');
}

@font-face {
   font-family: 'steps_mono';
   src: url('fonts/stm/Steps-Mono-Thin.otf') format('opentype');
   font-weight: lighter;
}




/* TOP NAVIGATION BAR SETTINGS */



.navbar-txt {
	font-size: 20px;
	color: #131716;
	text-decoration: none;
	padding: 16px 16px 16px 16px;
	vertical-align:middle;
	overflow:hidden;
	line-height: 2;
	text-align:center;   
   transition:.25s;
	}
	
a.navbar-txt:hover, a.navbar-txt:active {
	background: #131716;
   color:#fff;
   cursor: url("cursor5.png") 8 8, url("cursor5.svg") 8 8, pointer;
	}
	

.navbar {
	position: fixed;
	top: 0;
	width: 100%;
	padding: 6px;
	background-color:#91d7ff;
   cursor: url("cursor4.png") 8 8, url("cursor4.svg") 8 8, auto;
   z-index: 2;
}

.guestbook {
  margin: auto;
  margin-top: 40px;
  margin-bottom: 60px;
  border: #91d7ff 5px;
  border-radius: 30px;
  border-style: solid;
  background-color:#131716cb;
  padding: 1em;
  min-width: 30%;   
  max-width: 900px;  
	width: 100%;

}


/* MAIN CONTENT TEXT SETTINGS */



button{
   margin-top: .5em;
   border: #91d7ff 2px;
   border-radius: 20px;
   border-style: solid;
   background-color:#131716cb;
   color: #91d7ff;
   text-align: center;
   font-family: steps_mono;
   line-height: 20px;
   overflow:hidden;
   max-width: 120px;
   text-decoration: none;
	padding: 15px 15px 15px 15px;
	vertical-align:middle;
}

button:hover{
	cursor: url("cursor5.png") 8 8, url("cursor5.svg") 8 8, pointer;

}

.intranavbar-b {
   width: 100%;
	font-size: 18px;
	color: #37ffed;
	vertical-align:middle;
	overflow:hidden;
   display: inline;
	}
	

.intranavbar {
	padding: 0px;
   max-width: 650px;
   text-align: center;
}


html,body {
	font-family:  "steps_mono";
	color: white;
   cursor: url("cursor7.png") 8 8, url("cursor7.svg") 8 8, auto;
	}

body {
   background-image: url("ruidos.gif");
   background-size: cover;
   background-attachment: fixed;
   background-position: bottom right;
   background-color: #131716;
   cursor: url("cursor7.png") 8 8, url("cursor7.svg") 8 8, auto;
}
a{
   color: rgb(91, 236, 255);
}
a:hover{
   cursor: url("cursor5.png") 8 8, url("cursor5.svg") 8 8, pointer;
}
.box {
   margin-top: 40px;
   border: #91d7ff 5px;
   border-radius: 30px;
   border-style: solid;
   background-color:#121615cb;
   text-align: right;
   font-family: "steps_mono";
   font-size: 110%;
   line-height: 30px;
   overflow-wrap: break-word;
   padding: 1em;
   max-width: 800px;
   min-height: 30vh;
   display: inline-block;
}

.post {
   margin-top: 40px;
   border: #91d7ff 5px;
   border-radius: 30px;
   border-style: solid;
   background-color:#131716cb;
   text-align: right;
   font-family: steps_mono;
   font-size: 110%;
   line-height: 30px;
   overflow-wrap: break-word;
   padding: 1em;
   min-width: 48%;   
   max-width: 800px;   
   display: inline-block;
}


  

.collapsible1 {
   position: relative;
   padding-bottom: 0.5em;
   z-index: 1;
 }

.collapsible1:not(.open) > * {
   display: none;
 }

.collapsible1:not(.open) > h2:first-child {
   display: block;
 }


.collapsible1 > .toggler {
   position: absolute;
   left: 0;
   bottom: 0;
   display: block;
   width: 100%;
   text-align: center;
   cursor: url("cursor5.png") 8 8, url("cursor5.svg") 8 8, pointer;
   z-index: 1;
 }

.collapsible1 > .toggler::after {
   content: "keep reading";
   color:#0fb7b7;
 }
 
.collapsible1.open > .toggler::after {
   content: "hide again";
   color:#0fb7b7;
 }
  
 .collapsible2 {
   position: relative;
   padding-bottom: 0.5em;
   z-index: 1;
 }

.collapsible2:not(.open) > * {
   display: none;
 }

.collapsible2:not(.open) > p:first-child {
   display: block;
 }


.collapsible2 > .toggler {
   position: absolute;
   left: 0;
   bottom: 0;
   display: block;
   width: 100%;
   text-align: center;
   cursor: url("cursor5.png") 8 8, url("cursor5.svg") 8 8, pointer;
   z-index: 1;
 }

.collapsible2 > .toggler::after {
   content: "keep reading";
   color:#0fb7b7;
 }
 
.collapsible2.open > .toggler::after {
   content: "hide again";
   color:#0fb7b7;
 } 


#art {
   display:block
}

#fot {
   display:block
}


#static {
   display:block
}

#liv {
   display:block
}

#vid {
   display:block
}

	
h1,h2,h3,h4,h5,h6 {
	font-family: "terminal_grotesque";
}

h1 {
	font-size: 60px;
	color: #fff;
	line-height: 80%;
	}
	

h2 {
	font-size: 43px;
	color: #37ffed;
	line-height: 60%;
	}


h3 {
	font-size: 35px;
	color: #0fb7b7;
	}
	

h4 {
	font-size: 27px;
	color: #7746F0;
	}
	

h5 {
	font-size: 22px;
	color: #fff;
	}
	

h6 {
	font-size: 17px;
	color: #fff;
	}


.content {
  margin-top:70px;
  margin-bottom: 50px;
  margin-right: 60px;
  margin-left: 60px;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
}
.straw {
  margin-top:38px;
  display: flex;
  flex-direction: column;
}

@media only screen and (max-width: 750px) {
  .straw {
  margin-top:80px;
  }
}

footer {
   display:none;
   margin-top: auto;
   margin-bottom: -10;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#buttoncomic1 {
   display: none;
}

/* IMAGES, ETC DISPLAY SETTINGS */

.imageprev {
	width: 90%;
	max-width: 100%;
	height: auto;
   border-radius: 5px;
}

/* COMICS DISPLAY */
.arts-txt{
   margin-top: 1em;
   border: #91d7ff 2px;
   border-radius: 10px;
   border-style: solid;
   background-color:#131716cb;
   text-align: center;
   font-family: steps_mono;
   font-size: 110%;
   line-height: 30px;
   overflow-wrap: break-word;
   padding: .8em;
   max-width: 360px;   
   display: inline-grid;
}

.arts {
   margin-top: 40px;
   text-align: center;
   font-family: steps_mono;
   font-size: 100%;
   line-height: 30px;
   padding: 1em;
   max-width: 400px;
   display: inline-grid;
}





li.onehundred {
  list-style-type: "💯";
}

li.eyes {
  list-style-type: "👀";
}

li.logo {
  list-style-image: url('images/logo.png');
}

.svg {
	width: 50px;
}