@charset "utf-8";
/*
	Main Punctuation Games CSS Sheet
	Author: Natalie Roush
	Date:  03/27/2026
  filename: style.css
   Edited: 04/17/2026
   Edited:04/24/2026
*/

/*Set the base color of all text to white.*/
* {
	color: white;
}
/*Set the main background of the whole page to a simple linear background gradient
  that has been fixed to the viewport as users scroll.*/
body{
	max-height: 110vh;
	background-image: linear-gradient(to bottom,rgb(43, 83, 240) 40%, black);
	background-attachment: fixed;
}

header h1{
/*The company title, will likely be replaced with a png banner when it can be afforded.*/
	text-align: center;
	font: italic normal 400 110px/0.5 "Slackside One, Helvetica, Georgia";
	display: block;
	padding:10px 40px;
	background-color: rgb(181, 66, 131);
	margin: 0 auto;
	
/*Place a border around the background color so it can be rounded around the title.*/
	border: 10px solid rgb(181, 66, 131);
	border-radius: 80px;
}

/*Center the navigation links adding an empty column setting the first column to maintain 10% 
  away from the edge of the screen when resized.*/
#navigation {
	display: grid;
	grid-template-columns: 10% repeat(5, 1fr);
	list-style-type: none;
	padding: 0;
	
/*set text size and font.*/
	text-align: center;
	font: normal normal 30px/0.2 "Georgia, Helvetica, Calibri";
}

/*Set the background color around each of the navigation list elements with a rounded border.*/
#navigation li a {
	display: inline-block;
	background-color: rgb(136, 62, 227);
	text-decoration: none;
	border: 5px solid rgb(52, 10, 105);
	
/*Set the padding of the border to ensure it wraps around the word and rounds the corners.*/
	padding: 15px 10px;
	border-radius: 50px;
	line-height: 1;
}
/*Wrap both sections into one grid and make sure they start at the same height and split columns correctly.*/
.gridcentering {
	display: grid;
	grid-template-columns: 2fr 1fr; 
	gap: 30px;
	align-items: start;
	padding-top: 20px;
}
/*Turn the gallery showcase into a nested grid.*/
.gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 30px;
	padding: 50px;
	align-items: end;
	text-align: center;

/*Size the background box around the grid cells and give it an outline. */
	box-sizing: border-box;
	outline: 4px solid purple;
	border: 10px inset rgb(26, 143, 102);
	background-color: rgb(17, 105, 74);
}
/*Set each of the images within the game gallery grid to fill their cells and have a rounded border.*/
.gallery img {
	border-radius: 20px;
	height: auto;
	width: 100%;
	box-shadow: 10px 10px 10px rgb(48, 48, 48);
}
/*Set the background color and padding within the team biographies section.
*/
.teambios {
	background-color: rgb(37, 153, 163);
	border: 10px ridge rgb(229, 213, 255);
	padding: 10px;
	border-radius: 20px;
	box-shadow: 10px 10px 10px rgb(121, 105, 148);
}
.member-card{
	margin-left: 10px;
}
/*Enlarge the placeholder image on unfinished webpages under the navigaton panel.*/
.constructionplaceholder img {
	width: 100%;
    height: 100%;
}
/*Center and create a blue strip at the bottom of the page with legal copyright information.*/
footer{
	background-color:rgb(2, 8, 92);
	color: white;
	padding: 5px;
	text-align: center;
	bottom: 0;
	width: 100%
}


/* makes the ttrpg and game gallery pages into a grid that covers the whole page*/
.full-page-grid .gridcentering {
    grid-template-columns: 1fr;
}
.full-page-grid .gallery {
    grid-template-columns: repeat(4, 1fr);
}

.game-details {
	/*setting the product page to a two column grid that spans the page*/
	min-height: 100vh;
	display:grid;
	grid-template-columns: auto 1fr;
	overflow: auto;
	align-items: start;
	
	/* setting the background of the game product details page to match the game gallery background*/
	box-sizing: border-box;
	outline: 4px solid purple;
	border: 10px inset rgb(26, 143, 102);
	background-color: rgb(17, 105, 74);
}

/*setting the font size of the product title and centers it above the product's image*/
.game-title {
	font: normal normal 400 90px/0.5 "Slackside One, Helvetica, Georgia";
	grid-column: 1;
	grid-row: 1;
	text-align: center;
}

/*setting product image margins and size and sets a box shadow underneath it in the left hand column*/
.detail-img{
	margin-right: 40px;
	margin-left: 40px;
	max-width: 100%;
	grid-column: 1;
	grid-row: 2/4;
	box-shadow: 15px 15px 10px rgb(43, 43, 43);
}
/*places the product's detail text in the right hand column wrapped around the left image*/
.detail-text{
	grid-column: 2;
	grid-row: 2;
	font: normal normal 400 40px/0.5 "Slackside One, Helvetica, Georgia";
	line-height: 1;
	margin-right: 20px;
	
	/*setting background color and border*/
	background-color: rgb(63, 41, 120);
	border: 10px ridge rgb(229, 213, 255);
	padding: 10px;
	border-radius: 20px;
}

/* sets the add to cart button under the text details in the right hand column of game details page */
.cart-button {
	grid-column: 2;
	grid-row: 3;
	background-color: rgb(181, 66, 131);
	text-decoration: none;
	border: 5px solid rgb(52, 10, 105);
	
/*Set the padding of the border to ensure it wraps around the word and rounds the corners.*/
	padding: 15px 10px;
	border-radius: 50px;
	line-height: 1;
}

/*setting the title of the contact page to match the website title*/
.contact-title{
	font: normal normal 400 60px/0.5 "Slackside One, Helvetica, Georgia";
	display: block;
	padding:10px 40px;
	background-color: rgb(181, 66, 131);
	margin: 0 auto;
	text-align: center;
		border: 10px solid rgb(181, 66, 131);
	border-radius: 80px;
}
/*setting the background and text rules of the contact page*/
.contact-text{
	font: normal normal 400 40px/0.5 "Slackside One, Helvetica, Georgia";
	line-height: 1;
	margin-right: 20px;
	background-color: rgb(63, 41, 120);
	border: 10px ridge rgb(229, 213, 255);
	padding: 10px;
	border-radius: 20px;
}
/*setting the title of the support page page to match the website title*/
.support-title{
	font: normal normal 400 60px/0.5 "Slackside One, Helvetica, Georgia";
	display: block;
	padding:10px 40px;
	background-color: rgb(181, 66, 131);
	margin: 0 auto;
	text-align: center;
	border: 10px solid rgb(181, 66, 131);
	border-radius: 80px;
}
/*setting the background and text rules of the support page to match the contact temp announcement text*/
.support-text{
	font: normal normal 400 40px/0.5 "Slackside One, Helvetica, Georgia";
	line-height: 1;
	margin-right: 20px;
	background-color: rgb(63, 41, 120);
	border: 10px ridge rgb(229, 213, 255);
	padding: 10px;
	border-radius: 20px;
}
/* setting up the questions and answers of faq page into two columns and giving them the same background as the game gallery */
.FAQ-grid-container{
	display: grid;
	box-sizing: border-box;
	outline: 4px solid purple;
	border: 10px inset rgb(26, 143, 102);
	background-color: rgb(17, 105, 74);
	margin-bottom: 40px;

	display:grid;
	grid-template-columns: auto 1fr;
	overflow: auto;
	font: normal normal 400 30px/0.5 "Slackside One, Helvetica, Georgia";
	line-height: 1.4;
}
/*setting all questions in the left column of faq page*/
.q{
	grid-column: 1;
	margin-right: 30px;
	margin-left: 30px
}
/*setting all answers in the right column of faq page*/
.a {
	grid-column: 2;
	margin-left: 30px;
}
/*setting the title of the news page to match the website title*/
.news-title{
	font: normal normal 400 60px/0.5 "Slackside One, Helvetica, Georgia";
	display: block;
	padding:10px 40px;
	background-color: rgb(181, 66, 131);
	margin: 0 auto;
	text-align: center;
	border: 10px solid rgb(181, 66, 131);
	border-radius: 80px;
}

/*setting background and border around all the announcement text on the news page*/
.news-container {
	background-color: rgb(63, 41, 120);
	border: 10px ridge rgb(229, 213, 255);
	padding: 10px;
	border-radius: 20px;
}

/*placing all news and announcement titles sizes and centering them on the page*/
.news-entry-name{
		font: normal normal 400 30px/0.5 "Slackside One, Helvetica, Georgia";
		text-align: center;
}

/*setting the size of announcement authors and dates*/
.author-date {
		font: normal normal 400 20px/0.5 "Slackside One, Helvetica, Georgia";
}