/*Imports the font to the website*/
@font-face {
	font-family: "KarlaR";
	src: url("content/KarlaR.ttf");
}

/*The '*' affects all elements on the HTML page*/
* { 
  margin: 0; 
  padding: 0;
}

/*This affects every p tag on the HTML page*/
p {
	padding-left:5%;
	padding-right:5%;
}

html {
	scroll-behavior: smooth;
}

/*This affects most things regarding the body of the page(most of the content)*/
body {
	margin:0;
	font-family:KarlaR;
	background-image:url("content/gradient.jpg");
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment:fixed;
}


/* Navigation Bar */
#navbar {
	position:fixed;
	width: 100%;
	top:0;
	height:40px;
	white-space:nowrap;
	z-index:100;
	background-color:rgba(45,45,48, 0.75);
	transition: all 0.5s ease;
}

#navbar.transparent {
	background-color:rgba(45,45,48, 0.25);
	transition: all 0.5s ease;
}

/*Logo navigation code*/
#home img {
	height: 100%;
	width: auto;
}


/*Tells the home page how to look and organise itself*/
#homepg {
	position:relative;
	width:100%;
	height:100vh;
	font-size:0px;
	overflow-x:hidden;
	
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
}

/*This is the large text you see when you first open my website*/
#wp1 {
	z-index:1;
	text-align:center;
	color:white;
	font-size:calc(3vw + 3vh + 2vmin);
	display:flex;
	justify-content:center;
	align-items:center;
	user-select:none;
	text-shadow: 4px 4px #000000;
	text-transform: uppercase;
}


/*Tells the find us page how to look and organise itself*/
#Live {
	color:white;
	position:relative;
	width:100%;
	height:100vh;
	background-color:rgba(113, 68, 181, 1);
	text-align:center;
	font-size:0px;
	overflow-x:hidden;
	user-select:none;
}

.inner {
	display:flex;
	width:100vw;
	align-items:center;
	flex-wrap:wrap;
	flex-direction:column;
	justify-content:space-between;
}


#latest1 {
	text-align:center;
	justify-content:flex-start;
}

#latest2 {
	justify-content:flex-end;
	margin-left:auto;
	margin-right:auto;
	margin-top:2vh;;
	flex-grow:1;
}

#GamingPlatforms {
	color:white;
	position:relative;
	width:100%;
	height:100vh;
	background-color:rgba(65,105,225, 1);
	text-align:center;
	font-size:0px;
	overflow-x:hidden;
	user-select:none;
}


/*General class attributes, affects every header and plain text on the page*/
.header {
	font-size:48px;
	font-weight:bold;
	padding-top:60px;
	text-align:center;
	text-decoration:underline;
}

.content {
	font-size:calc(0.7vw + 0.7vh + 0.5vmin);
	font-weight:normal;
	padding-top:5px;
}

		/*Style of the dropdown button*/
	.dropbtn {
		background-color:Transparent;
		color:white;
		padding:20px;
		border:none;
		cursor:pointer;
		float:right;
		height:40px;
		background-image:url("content/dropdown.png");
		background-size:40px 40px;
		background-repeat:no-repeat;
		background-attachment:local;
		pointer-events:none
		
	}

	/*This is needed to position the dropdown content*/
	.dropdown {
		display:flex;
		float:right;
		flex-direction:column;
		text-align:center;
	}

	/*The content of the dropdown menu(hidden by default)*/
	.dropdown-content {
		display: none;
		background-color:rgba(220,220,220, 0.3);
		position: absolute;
		min-width:10vw;
		right: 0 !important;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
		flex-direction:column;
		transition: all 0.4s ease;
	}
	
	.dropdown-content.transparent {
		background-color:rgba(220,220,220, 0.3);
		transition: all 0.4s ease;
	}

	/*All links inside the dropdown menu*/
	.dropdown-content a {
		color: white;
		font-size:calc(0.5vw + 0.5vh + 0.4vmin);
		padding-top:2vh;
		padding-bottom:2vh;
		text-decoration: none;
		display: flex;
		justify-content:center;
	}

	/*Change the colour of of the dropdown links on hover*/
	.dropdown-content a:hover {background-color:rgba(33, 33, 33, 0.5)}
	
	/*Shows the dropdown menu when hovered upon*/
	.dropdown:hover .dropdown-content {
		display:flex;
		margin-top:40px;
	}

	.twitch .twitch-video {
		justify-content:flex-end;
		margin-left:auto;
		margin-right:auto;
		margin-top:2vh;;
		flex-grow:1;
	}

	.twitch .twitch-video iframe {
	  width: 50vw;
	  height: 50vh;
	}

/*How the website appears when in mobile mode aka less than 600 pixels wide*/
@media screen and (max-width: 575px) {
	
	
	/*Makes navigation bar smaller*/
	#navbar {
		height:40px;
	}
	
	/*Reduces the padding at the top of each page to correct the spacing between headers and content in mobile mode*/
	.header {
		font-size:36px;
		padding-top:45px;
	}
	
	.content {
		font-size:12px;
	}
	
	
	#latest2 {
		justify-content:flex-end;
		margin-left:auto;
		margin-right:auto;
		width:280px;
		height:156px;
		margin-top:10px;
		flex-grow:1;
	}

	.dropdown {
		display: none;
	}
	
	
	.twitch .twitch-video iframe {
	  width: 75;
	  height: 45vh;
	}
	
	
	#home img {
		height: 100%;
		width: auto;
		margin-left: auto;
  		margin-right: auto;
	}
}