/* import for font families Rubik and Noto Sans */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Rubik:ital,wght@0,600;1,600&display=swap');

/* import for an icon library that includes a hamburger */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

html {
  background-image: url(/img/arcade-dark.png);
  background-repeat: repeat;
	color: beige;
	text-decoration: none;
	font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
}

h1, h2 {
	font-family: 'Rubik', Arial, Helvetica, sans-serif;
}

header {
	width: auto;
	height: 120px;
	background-image: url('/img/banner.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	text-align: center;
	
}
header img {
	vertical-align: middle;
}

@media screen and (max-width: 500px) {
	header {
		width: auto;
		height: 100px;
	}
	header img {
		width: auto;
		height: 95px;
	}
}

/* *** Navigation section *** */

nav {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background-color: #0751BE;
	background-color: rgba(7, 81, 190, 0.5);
	overflow: hidden;
}

nav ul {
  display: inline-block;
  text-align: center;
}

nav a {
	display: block;
	float: left;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 14px;
	text-decoration: none;
	font-size: 15px;
}

nav a:hover, .dropdown:hover .drop-button {
	background-color: #045FFB;
	color: #f5f5f5;
}

nav a.active {
	background-color: #0D3C6A;
	color: white;
}

nav .menu-icon {
	display: none;
}

.nav_logo {
  text-align: right;
  font-family: "Rubik", sans-serif;
  font-weight: 600;
}

@media screen and (max-width: 500px) {
	nav a {display: none;}
    nav a.menu-icon {
        float: right;
        display: block;
    }
	
	nav.responsive {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
	}
    nav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    nav.responsive a:not(.menu-icon) {
        float: none;
        display: block;
        text-align: left;
    }
}

/* Main grid layout */

.content {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto auto auto;
	background-color: #0D3C6A;
	background-color: rgba(13, 60, 106, 0.5);
	padding-bottom: 10px;
}
.content .item-one {
	grid-row: 2 / 3;
	grid-column: 1 / 2;
	padding: 1px 5px;
}
.content .item-two {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
	padding: 0px 5px;
}
.content .item-three {
	grid-row: 3 / 4;
	grid-column: 1 / 2;
	padding: 0px 5px;
}

/* Links in the body */

.content a {
  text-decoration: none;
}
.content a:link {
  color: #FF3F42; 
}
.content a:visited {
  color: #E0009D;
}

.man-hero {
	height: 150px;
	background-image: url('/img/winman/main-screen.png');
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Specific to big screens */

@media screen and (min-width: 501px) {
	.content {
		display: grid;
		grid-template-columns: 50% 50%;
		grid-template-rows: auto auto;
	}
	.content .item-one {
		grid-row: 1 / 2;
		grid-column: 1 / 2;
		padding: 0px 15px;
	}
	.content .item-two {
		grid-row: 1 / 2;
		grid-column: 2 / 3;
		padding: 1px 15px;
	}
	.content .item-three {
		grid-row: 2 / 3;
		grid-column: 1 / 3;
		padding: 2px 16px;
	}
}

/* *** Buttons *** */

button {
  width: 125px;
  height: 63px;
  font-size: 16pt;
  font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
  font-weight: 600;
  color: white;
  border-style: dashed;
}

.masto-button {
  background-color: #6A50D1;
  border-color: #2A1E58;
}
.masto-button:hover {
  background-color: #8B9FD5;
  border-color: #5478DA;
}
.masto-button:active {
  background-color: #08287F;
  border-color: #030D2A;
}

.reddit-button {
  background-color: #F61C1C;
  border-color: #A21E1E;
}
.reddit-button:hover {
  background-color: #FD0303;
  border-color: #D30202;
}
.reddit-button:active {
  background-color: #DC0505;
  border-color: #8E0303;
}

.yt-button {
  background-color: #F6293D;
  border-color: #B11E2C;
}
.yt-button:hover {
  background-color: #F93A4C;
  border-color: #C73341;
}
.yt-button:active {
  background-color: #F1041B;
  border-color: #A70312;
}

.peertube-button {
  background-color: #F37E10;
  border-color: #A25812;
}
.peertube-button:hover {
  background-color: #FE7C02;
  border-color: #C76305;
}
.peertube-button:active {
  background-color: #C25F03;
  border-color: #603105;
}

.steam-button {
  background-color: #9419F4;
  border-color: #761ABD;
}
.steam-button:hover {
  background-color: #A431FD;
  border-color: #7A2EB3;
}
.steam-button:active {
  background-color: #7504CC;
  border-color: #4B0384;
}

.gh-button {
  background-color: #AC30B3;
  border-color: #6C1C71;
}
.gh-button:hover {
  background-color: #D221DC;
  border-color: #A10DA9;
}
.gh-button:active {
  background-color: #7A0481;
  border-color: #4F0853;
}

/* Removes unnecessary content from print copies */

@media print {
  header *, nav * {
    display: none;
  }
}