/*Website CSS Template*/

/*The @import CSS function, allows to import any web font of your choosing.
You can use the following Google fonts, 
*/
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jersey+20&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jersey+15&display=swap');

/*Non-Google fonts*/
@font-face
{
	font-family: VCR OSD;
	src: url("../Fonts/VCR_OSD_MONO.ttf") format("truetype");

}

@font-face
{
	font-family: Pixel Arial;
	src: url("../Fonts/PIXEARG.ttf") format("truetype");

}

@font-face
{
	font-family: Red Alert;
	src: url("../Fonts/C&C Red Alert [INET].ttf") format("truetype");

}


html
{
	height: 100%;
}

p, a
{
	font-family: "Red Alert", sans-serif;
	font-size: 18px;
	letter-spacing: 1px;

}

li, .inner ul, .inner ol
{
	font-family: "Red Alert", sans-serif;
	list-style-type: disclosure-closed;
	font-size: 18px;
}


h1, h2, h3, h4, h5
{
	font-family: "Jersey 20", sans-serif;
  text-transform: uppercase
}

/*Main Background*/

body
{
		background-image: url("../images/synthwave animated.gif");
  	background-attachment: fixed;
  	background-size: cover;
}


/*Backgrounds for the different pages*/

#blog-bg
{
	background-image: url("../images/Background 2.gif"); 
	background-attachment: fixed; 
	background-size: cover;

}

#review-bg
{
	background-image: url("../images/purple-flow.gif"); 
	background-attachment: fixed; 
	background-size: auto;

}

#project-bg
{
	background-image: url("../images/background.gif"); 
	background-attachment: fixed; 
	background-size: auto;

}

#archive-bg
{
	background-image: url("../images/synthwave.jpg"); 
	background-attachment: fixed; 
	background-size: cover;

}

#misc-bg
{
	background-image: url("../images/synthwave 2.jpg"); 
	background-attachment: fixed; 
	background-size: cover;

}

#stamps-box
{
	display: grid;
  grid-template-columns: repeat(2,1fr);
}

.center-image
{
	display: block;
	margin: auto;
}


/*Containers - text-buffer (for writing outside any boxes), and main container which houses the title of the page*/

.text-buffer
{
	margin: 20px;
  box-shadow: 0px 0px 10px 5px blue;
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(#f793ff, #c4bffe);
}

/*The review text sidebar*/
.nobuffer
{
	margin-bottom:0;
}

.main
{
	margin: 0 auto;
  	max-width: 80%;
  	background: linear-gradient(180deg,rgb(170, 255, 133) 40%, rgb(223, 137, 255) 100%);
    background-attachment: scroll;
  	background-attachment: scroll;
 		background-attachment: fixed;
  	border-radius: 8px;
  	border: 2px solid purple;
}

/*Containers for the webpages - three column format*/
.container
{
	display: flex;
	width: 100%;
	
}

.leftsidebar
{
	width: 25%;
}

.center
{
	width: 50%;
}

.rightsidebar
{
	width: 25%;
  margin: 0px 20px 0px 20px;
}

/*Small box for left sidebar boxes on homepage.html*/

#small-box
{
	width: 75%;
	position: relative;
	left: 45px;
}

/*Exclusive to the About.html sections*/

#aboutcenter
{
	width: 100% !important;
	margin-left: 20px;
}

/*For adjusting other elements*/

.left-adjust
{
	width: 75% !important;
	margin-left: 20px;
}

#center-left
{
	margin-left: 20px;
}


/*Cursor*/

*
{
	cursor: url("../images/Pixel Cursor Light.png"), auto;


}

a:hover
{
	cursor: url("../images/Pixel Cursor Dark.png"), auto;
}


/* The title of the page ---> Move to new CSS */ 

.title
{
	font-family: "Jersey 20", sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-size: 3.2em;
  color: purple;
 	-webkit-text-fill-color: transparent;
  background: purple;
  background-clip: border-box;
  -webkit-background-clip: text;


}

/*Main page header - Retro Haven*/

#logoheader
{
	display: block;
  margin: auto;
  width: 40%;
  padding: 20px;
}


/*Navigation bar - header, navbar, navlinks and hover*/

.header
{
	color: red;
	text-decoration: none;
	list-style: none;
	text-align: center;
	font-family: Orbitron, sans-serif;

}

.navbar
{
	display:inline-block;
	margin: 10px;
}


.navlink
{
	font-size: 1.2em;
	font-family: "Press Start 2P";
	text-decoration: none;
	border: 5px outset lightgreen;
 	margin: 5px;
  padding: 5px;
  border-radius: 10px;
  background: #45e67c;
 	font-weight: bold;
  text-transform: uppercase;

}

.navlink:hover
{
	border: 5px inset lightgreen;
	color: red;
	transition: color 0.5s ease-in;
}


/*Containers for items, the titleheader, box (contains elements), inner (for writing contain inside it)*/

.titleheader
{
	font-family: "Jersey 15", sans-serif;
	font-size: 25px;
	color:lightgreen;
	text-align: center;
	background: #b205b2;
	border: 5px double black;
	padding: 10px;
	text-transform: uppercase;
	border-top-left-radius: 10px;
  border-top-right-radius: 10px;


}

.box
{
	background: #7fe951;
  	border-radius: 10px;
  	box-shadow: 0px 0px 1px 1px black;
}

.inner
{
	font-family: "Red Alert", sans-serif !important;
	font-size: 20px !important;
  padding: 10px;
  margin-bottom: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-left: 5px double black;
  border-bottom: 5px double black;
  border-right: 5px double black;
}

/*For buttons - links to other pages (affilate links and my social links)*/

.button-hover:hover
{
	transform: scale(1.5);
}

/*Footer*/

#footer-top{
	background: #0000006b;
}

#footer {
	font-size: large;
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
	font-family: "Red Alert", sans-serif;
	margin-top: 25px;
	margin-bottom: 10px;
}

/*Footer images (buttons under the footer of the page)*/

#footer-img > img
{
	margin-right:5px;
}

/*Gallery types*/

/*The Gallery component for review pages*/
.gallery { /* this is the main div that wraps your gallery */
	display: grid;
  justify-items: center;
  grid-template-columns: repeat(4, 1fr);
}

.gallery img {
  width:200px; /* this sets the width for every image */
  height:150px; /* this sets the height for every image. Try setting it to 'auto' and see how it looks weird since every image has a slightly different height? */
  object-fit:fill; /* this crops the image so they are all the same size. This might be an issue if you have landscape AND portrait images. Feel free to take this property out temporarily to see exactly what it does! */
  
}

/* this is the div which CROPS every image */
.gallery > div {
  width:200px; /* this should match the image height */
  height:150px; /* this should match the image width */
  margin-right:10px; /* this controls the gaps between the images */
  margin-bottom:10px; /* this controls the gaps between the images */
}

.gallery img:hover {
  transform:scale(1.5); /* this scales up the image when you hover over it */
  object-fit:fill; /* this keeps the aspect ratio of the original images*/
  box-shadow: 0px 0px 10px 10px purple;

}

/*Mini-Gallery for non-review pages*/

.mini-gallery
{
	display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 10px;

}

.mini-gallery img
{
	height:175px;
}

.mini-gallery > div
{
	height: 200px;
	width: 150px;
	margin: 5px;
}

.mini-gallery img:hover {
  transform:scale(2.5); /* this scales up the image when you hover over it */
  object-fit:contain; /* this keeps the aspect ratio of the original images*/
  box-shadow: 0px 0px 10px 10px white;
  transition: transform 0.4s;
}


/*Video Gallery for archive pages only*/

.video-gallery { /* this is the main div that wraps your gallery */
	display: grid;
  grid-template-columns: repeat(3,1fr);
  justify-items: center;
  gap:20px;
}

/*Video Gallery container*/

.video-gallery > iframe, .video-gallery > video
{
	width: 100%;
  height: 100%;
}

/*Blog gallery - Only for the small group of images*/

.blog-gallery
{
	display: flex; 
	flex-wrap: wrap;
	justify-content: center; 
	gap:20px;
	margin: 20px;
}


/*Webrings*/


#webring a
{
	text-decoration: none;
}

#webring a:nth-of-type(2), a:nth-of-type(5)
{
	font-family: "Jersey 20", san-serif;
  font-size: 30px;
  color: black;
  text-decoration: none;

}

#webring a:nth-of-type(2):hover
{
	color:red;

}

#webring a:nth-of-type(5):hover
{
	color: yellow;
}

/*RSS Button*/

a:hover #rss-glow 
{
	border-radius: 8px;
  box-shadow: 0px 0px 10px 3px greenyellow;
  cursor: url("../images/Pixel Cursor Dark.png"), auto;
}

/*Grid Flex container, for Misc - temporary*/
.grid-flex-container
{
	display:grid; 
	gap: 10px;
	grid-template-columns: repeat(4,1fr);
}