/*
Theme Name: Moore Games
Theme URI:
Author: Alex Moore
Author URI:
Description: Moore Games static site
Version: 0.25
Tags: one-column, fixed-width, flexible-width, 
Text Domain: mooregames.co.uk
*/

:root   {
	
/* define colours */
  --textMain: #dff;
  --Accent: #55a5e6;
  --Blue: #011627;
  --Orange: #CC8343;
  --Green: #446839;
}

/* define main div styles */

body {
		font-family: sans-serif;
		font-weight: 200;
		min-width: 320px;
		max-width: 1024px;
		overflow-x: hidden;
		text-align: left;
		margin: 0px;
		padding: 0px;
	}
	
.wrapper {
		display: block; 
		border: none;
		padding-left: 16px;
		padding-right: 22px;
		width: 100%;
		overflow-x: hidden;
	}

.header {
		display: flex;
		top: 0;
		z-index: 10;
		position: sticky;
		}
		
.mainlogo {
		width: 65%;
		margin-left: 3%;
	}
		
.socials {
		width: 28%;
		margin: auto 0;
	}
	
.article {
	padding-left: 3%;
	padding-top: 1em;
	padding-bottom: 1em;
	padding-right: 4%;
}

.videoContainer {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
	margin-bottom: 1em;
}

.videoFrame {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 90%;
	height: 90%;
}

.blue {
	background: var(--Blue);
}

.orange {
		background: var(--Orange);
	}

.green {
		background: var(--Green);
	}

/* text styling */	
p, ul {
		color: var(--textMain);
		line-height: 1.25em;
	}

p.headerlinks {
		line-height: 2.5em;
		margin-top: 0em;
		text-align: right;
	}
	
p.extra {
		opacity: 70%;
		font-style: italic;
		font-size: small;
}

p.footerText {
		font-size: 0.7em;
}
		
h1 {
		color:var(--Accent);
		font-weight: 350;
		font-size: 1.2em;
		margin-bottom: -0.4lh;
	}
	
img.imgLogo {
		width: 100%;
		max-width: 250px;
}

img.otherLogos {
	max-height: 70px;
	height: auto;
	width: auto;
	flex: row;
	padding: 0px 15px;
}

img.otherSites {
	max-height: 16px;
	height: auto;
	width: auto;
	flex: row;
	padding: 0px;
	opacity: 0.4;
}

img.otherSites:hover {
	opacity: 0.9;
}

/* links */
	
a {
		color: var(--Accent);
		font-weight: 300;
		text-decoration-line: underline;
		text-decoration-thickness: 0.5px;
	}
	
a:hover {
		color: var(--Orange);
	}