@charset "utf-8";
/* CSS Document */

/*Mark O'Connell*/
/*Welcome to the css file for my Html Assignment*/

/* 
   CSS selectors used:
   1. Universal (*)
   2. Element / Tag
   3. Class
   4. ID
   5. Pseudo-class (:hover)
   6. not() pseudo-class
   */

/*This stylesheet covers the entire websites four pages. I used many classes to fully customise my site the way i wanted.
Having a single stylesheet is great to improve performance and make it easier to organise your CSS code!*/

* {margin: 0;
	padding: 0;
	box-sizing: border-box;}
/*This is a universal selector that refers to all elements*/

h1 {text-align: center;
	color: #FFF;
	font-size: 75px;
	font-family: "Segoe UI";
	font-weight:normal;
	padding: 20px;}
/*This is css styles for a size 1 header*/

h2 {text-align: center;
	color: #FFF;
	font-size: 50px;
	font-family: "Segoe UI";
	font-weight:normal;
	padding-bottom: 20px;
	padding-top: 50px}
/*This is css styles for a size 2 header*/

main {color: #ffffff;
	padding: 100px;
	font-size: 30px;}
/*This is css styles for the main tag*/

footer {background-color: #ffffff;
		padding: 25px;
		text-align: left;
		padding-left: 100px;}
/*This is css styles for the footer*/

li {margin-bottom: 20px;}
/*This is css styles for the list items of my unordered list*/

p {font-size: 30px;
	text-align: center;}
/*This is css styles for paragraph tags*/

iframe {display: block;
  margin: 40px auto;
  width: 800px;
  height: 450px;}
/*This is css styles for the youtube embed code*/

span {font-size: 35px;}
/*This span tag was used to emphasise certain words (I used this specifically for the game title within description pages)*/

summary{background-color:#626262; border-radius: 30px;}
/*This is to style the background of the "Awards" accordion on the homepage*/


/* Below are css styles for all CLASSES! */


.HomeBotP{padding-top: 30px;}
/*This was styling on the "note" at the bottom of the homepage to position it correctly*/

.TSPQuote{background-color:#FFFFFF;
border-radius: 20px;
padding: 30px;
color: #000000;}

.TBGQuote{background-color:#3AC5FF;
border-radius: 20px;
padding: 30px;}

.WSQuote{background-color:#13DB55;
border-radius: 20px;
padding: 30px;}

.AwardText{text-align: center;
	color: #FFF;
	font-size: 50px;
	font-family: "Segoe UI";
	font-weight:normal;}
/*This is to keep the styling of awards word on the homepage but to add the accordion i removed padding*/

.HOMEP {background-color: #B5B5B5;
	width: 100vw;
	margin: auto;}
/*This is css styles for the body tag on the homepage*/

.TSPP {background-image: linear-gradient(#000000, #ffffff);
	width: 100vw;
	margin: auto;}
/*Styling for TSP page to add gradient coloured background*/

.TBGP {background-image: linear-gradient(#d6cfc7, #074f90);
	width: 100vw;
	margin: auto;}
/*Styling for TBG page to add gradient coloured background*/

.WSP {background-image: linear-gradient(#ff007f, #f6d8a8,  #7aa17a,  #ffffff);
	width: 100vw;
	margin: auto;}
/*Styling for WS page to add gradient coloured background*/

.container{
	width: 100%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	column-gap: 10%;}
/*This is css styles for container class on page 1*/

.container-pg2{width: 100%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	column-gap: 5%;
	padding-left: 100px;
	padding-right: 100px;}
/*This is css styles for container class on page 2*/

.card{text-align: center;
	flex: 0 0 45%;
	margin-bottom: 5%;}
/*This is css styles for card class within containers*/

.cardpg2{text-align: center;
	flex: 0 0 30%;
	margin-bottom: 5%;}
/*This is css styles for card class within containers for page 2*/

.cardpg2 img{width: 100%}
/*This is css styles for card class within containers for page 2 referring specifically to the image*/

.DwImg {width: 100%;
		padding: 40px;
		border-radius: 75px;}
/*This is css styles for the Face picture on page 1*/

.text {font-size: 30px;
	background-color: #515459;
		border-radius: 50px;
		padding: 40px;}
/*This is css styles for the background of text on page 1*/

.text p {font-size: 20px;
		padding-bottom: 60px}
/*This is css styles for the text on page 1 itself*/

.NavBar
{width: 100vw;
display: flex;
background-color: #000;
position: sticky;
top: 0;
padding-top: 10px;
padding-bottom: 10px;}
/*This is css styles for the background of the navigation bar*/

.NavBar a
{font-size: 20px;
color: #FFF;	
text-align: center;
width: 25%;
padding-left: 100px;
padding-right: 100px;
padding-top: 30px;
padding-bottom: 30px;
}
/*This is css styles for the text (Which are links to other pages) of the navigation bar*/


/*.NavBar a:hover{}
This was originally intended to style the Nav bar hover feature,
but i tended towards multiple styles of the hover attributes below*/

.HomeA:hover {font-size: 30px;
 color: #A7FFF5;	
 text-align: center;
 width: 25%;
 transition: 0.75s;}
/*This is css styles for the text (home button) of the navigation bar (hover attributes)*/

a.TSP:hover
{background-image: url("TSPfNav.png");
 font-size: 20px;
 transition: 0.75s;
 color: transparent;
 width: 25%;
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;}
/*This is css styles for the text (TSP Page link) of the navigation bar (hover attributes)*/

.TBGa:hover
{background-image: url("TBGNav.jpg");
 font-size: 20px;
 transition: 0.75s;
 color: transparent;
 width: 25%;
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;}
/*This is css styles for the text (TBG Page link) of the navigation bar (hover attributes)*/

.WsA:hover
{background-image: url("WSNav.jpg");
 font-size: 20px;
 transition: 0.75s;
 color: transparent;
 width: 25%;
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;}
/*This is css styles for the text (WS Page link) of the navigation bar (hover attributes)*/

.hero {width: 100%;}
/*This is css styles for the hero banner on pg 1*/

.FootText {text-align: left; Font-size: 40px;}
/*This is css styles for the footer text*/

.TrailerFont {padding-top: 100px; text-align: center; font-size: 50px;}
/*This is css styles for the trailer headers*/

.container-pg2slide {
	display: flex;}
/*This is a container for main images on 3 game pages*/

.cardpg2slide 
{flex: 0 0 20%;
width: 100%;}
/*This is the card the image will be in*/

.cardpg2slide img
{width: 100%;
 display: block;}
/*This is to ensure images fit correctly*/