/* NOTES

how to make something stick to top of page while scrolling:
  position: sticky;
  top: 0;
  
how to include image that text wraps around: float: (left/right). also used to put div elements next to each other
if you have an image bigger than the text next to it, look up clearfix
look more into attribute selectors

CSS glitch effect on hover (too intense but could modify): https://freefrontend.com/css-glitch-effects/

FOR ART GALLERY: https://www.w3schools.com/css/css3_images_modal.asp
for background art elements: https://www.w3schools.com/css/css3_object-fit.asp

CREDIT: good amount of inspiration/learning taken from cyanobacteria.css by ribo.zone 
 */

/* define variables */
:root {
		--text: white;
		--border: red;
		--medborder: rgb(100,0,0);
		--bigtext: red;
		--darkaccent: rgb(51,0,0);
		--accent: cyan;
		--bg: black;
		--highlight: darkred;
		--link: cyan;
		--linkvis: paleturquoise;
		--linkhover: red;
	}
	
* { 
	box-sizing: border-box;
}

/* ULTRAKILL font */
@font-face { 
	font-family: "VCROSDMono"; 
	src: url("../Fonts/VCROSDMono.woff2") format("woff2"), 
		url("../Fonts/VCROSDMono.woff") format("woff"), 
		url("../Fonts/VCROSDMono.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}

@font-face { 
	font-family: "Pixgamer"; 
	src: url("../Fonts/Pixgamer.woff2") format("woff2"), 
		url("../Fonts/Pixgamer.woff") format("woff"), 
		url("../Fonts/Pixgamer.otf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}


/* grid layout */
.container {
  max-width: 70rem;
  margin: 1vw auto 12px auto;
  border: 6px ridge var(--border); 
  padding: 1em;
  
  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 1em;

  
  grid-template-areas: "header header header header header"
  "navigation content content content sidebar"
  "footer footer footer footer footer";
  background-color: var(--bg);
  
  
  -webkit-box-shadow:0px 0px 59px 3px rgba(255,0,0,0.9);
  -moz-box-shadow: 0px 0px 59px 3px rgba(255,0,0,0.9);
  box-shadow: 0px 0px 59px 3px rgba(255,0,0,0.9);
  
}


@media(max-width: 56em) {
  .container {
      min-width: 25rem;
      justify-content: center;
      margin: auto auto auto auto;
      
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 220px auto auto auto auto;
      


      grid-template-areas: "header header header"
      "navigation navigation navigation"
      "content content content"
      "sidebar sidebar sidebar"
      "footer footer footer";
  }
}


.item {
  padding: 20px;
  border: 6px double var(--medborder);

  background-color: var(--bg); 

}

.navig {
  background-image: url('../Images/sidebar2.png');
  background-size: 100% auto;
  background-repeat: repeat-y;
}
 
.side {
  background-image: url('../Images/sidebar2-flipped.png');
  background-size: 100% auto;
  background-repeat: repeat-y;
 }
 
.header {
  background-image: url('../Images/rosewindow.png');
  background-size: 100% auto;
 }
 
.main {
  background-image: url('../Images/telescope-wide.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
}

/* END OF GRID FORMATTING */


/* Custom cursor - update for buttons, anything hoverable */

cursor {
  url: "Cursors/file.jpg", auto;
}

/* Custom scrollbar - only in Firefox */
html {
  overflow-y: scroll;
  scrollbar-color: var(--highlight) var(--bg);
}



/*Highlighted text is red*/
::selection {
  background: var(--highlight);
  text-shadow: 2px 2px 5px black;
  color: var(--text);
}



header {
  background: url('***banner image***');
  height: 120px;
}

/* Body */
body {
  
  background-color: var(--bg);
  background-image:  repeating-linear-gradient(0deg, transparent, transparent 19px, #330000 19px, #330000 20px, transparent 20px, transparent 39px, #330000 39px, #330000 40px), repeating-linear-gradient(90deg, transparent, transparent 19px, #330000 19px, #330000 20px, transparent 20px, transparent 39px, #330000 39px, #330000 40px), radial-gradient(circle at 20px 20px, #330000 1.6px, transparent 2.1px), radial-gradient(circle at 0px 0px, #330000 1.2px, transparent 1.7px), radial-gradient(circle at 40px 0px, #330000 1.2px, transparent 1.7px), radial-gradient(circle at 0px 40px, #330000 1.2px, transparent 1.7px), radial-gradient(circle at 40px 40px, #330000 1.2px, transparent 1.7px);
  background-size: 40px 40px;
  /*background-image: url('../Images/tiling.png');
  background-size: 20% auto;*/
  padding: 30px;
  font-family: 'MS PGothic', sans-serif;
  font-size: 1em;
  
}


/* Navigation */
nav {
  padding: 5px;
}

@media(min-width: 56em) {
    nav {
      /*position: fixed;*/
    }
}


nav a {
	display: block;
	margin: 1px;
	/*background: linear-gradient(to right,var(--bg),var(--darkaccent));
	/*border: 1px solid var(--darkaccent);
	/*background-color: black;*/
	padding: 2px 7px;
	text-decoration: none;
	font-size: 1.5em;
	font-family: "Pixgamer", monospace;
}

nav a:hover{
  	/*background: linear-gradient(to right,var(--bg),var(--bigtext));*/
  	color: var(--text);
  	text-shadow:1px 1px rgba(255, 0, 0,0.8),
             -1px -1px rgba(0, 255, 255,0.8),
             -1px 0px rgba(255, 210, 0, 1);  

}



/* Dropdown Menu =CHANGE ONCE YOU GET THE HANG OF JAVASCRIPT TO SOMETHING COLLAPSABLE*/
.dropbtn {
	margin: 1px;
	/*background: linear-gradient(to right,var(--bg),var(--darkaccent));*/
	background: none;
	color: white;
	padding: 2px 7px;
	text-decoration: none;
	font-size: 1.5em;
	border: none;
	font-family: "Pixgamer", monospace;
	box-sizing: border-box;
	width: 100%;
	text-align: left;
}

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  /* position: absolute; */
  min-width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  margin: 1px;
	background: none;
	border: none;
	color: white;
	padding: 2px 7px;
	text-decoration: none;
	margin-left: 20px;
	font-size: 1.5em;
	font-family: "Pixgamer", monospace;

  display: block;
}

.dropdown-content a:hover {
  background-color: none;
}

/*.dropdown:hover .dropdown-content {*/
/*  display: block;*/
/*}*/


.dropdown:hover .dropbtn {
  background-color: none;
}




pre {
  color: var(--text);
}

.ultrakill {
  font-family: 'VCROSDMono';
}


h1 {
  font-weight: normal;
  display: block;
  margin: auto;
  text-align: center;
  color: var(--text);
  font-family: 'VCROSDMono', monospace;
  font-size: 4rem;
  box-sizing: border-box;
  
  
  text-shadow:1px 1px rgba(255, 0, 0,0.8),
             -1px -1px rgba(0, 255, 255,0.8),
             -1px 0px rgba(255, 210, 0, 1);
}

h1:hover {
    text-shadow:4px 4px rgba(255, 0, 0,0.8),
             -4px -4px rgba(0, 255, 255,0.8),
             -1px 0px rgba(255, 210, 0, 1);  
}


h2 {
  font-weight: normal;
  font-variant: small-caps;
  color: var(--text);
  text-align: center;
  font-family: "Pixgamer", monospace;
  margin: 5px 5px 10px 5px;
  font-size: 300%;
  border-bottom: 2px ridge var(--medborder);
}

h2:hover {
    text-shadow:2px 2px rgba(255, 0, 0,0.8),
             -2px -2px rgba(0, 255, 255,0.8),
             -1px 0px rgba(255, 210, 0, 1);
}


h3 {
  color: var(--bigtext);
  font-family: "Pixgamer", monospace;
  font-size: 200%;

}
h4 {
  color: var(--bigtext);
  font-family: "Pixgamer", monospace;
  font-size: 150%;
}
h5 {
  color: var(--bigtext);
  font-family: "Pixgamer", monospace;
}
h6 {
  color: var(--bigtext);
  font-family: "Pixgamer", monospace;
}



p {
  color: var(--text);
  text-indent: 20px;
  font-size: 1.1em;
  line-height: 1.4;
  word-wrap: break-word;
}
p::first-letter {
  font-size: 1.2em;
} 
p:hover {
  text-shadow: 1px 1px 1px rgba(255,255,255,0.6),
  -1px -1px 1px rgba(255,255,255,0.6);
}


.sidebar {
  color: var(--text);
  line-height: 1.4;
}


#message {
  font-style: italic;
  font-family: "Pixgamer", monospace;
  font-size: 1.1em;
  word-wrap: break-word;

}

#messageNumber{
  font-style: italic;
  font-family: "Pixgamer", monospace;
  font-size: .8em;
  display: inline;
}


ul {
  color: var(--text);
}


ol {
  color: var(--text);
  text-indent: 20px;
  font-size: 1.1em;
  line-height: 1.4;
  word-wrap: break-word;
}

li {
  margin: 20px 0; 
}

li:hover {
  text-shadow: 1px 1px 1px rgba(255,255,255,0.6),
  -1px -1px 1px rgba(255,255,255,0.6);
}


a:link {
  color: var(--link);
  background-color: transparent;
  text-decoration: none;
  text-shadow: none;
}

a:visited {
  color: var(--linkvis);
  background-color: transparent;
  text-decoration: none;
  text-shadow: none;
}

a:hover {
  color: var(--linkhover);
  background-color: transparent;
  font-style: italic;
  cursor: url("cursorimage.png"), pointer;
  text-shadow: none;

}

button {
  cursor: url("cursorimage.png"), pointer; 
}

hr {
  border: 1px dashed var(--medborder);
}


footer {
  text-align: center;
  font-family: 'MS PGothic', sans-serif;
  font-size: 1em;
  color: var(--text);

}