/* HEADS */

canvas {
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position:fixed;
}

div{
	z-index: 1;
}

*,
*::before,
*::after{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html{
	font-family: 'Pixelify Sans', sans-serif;
	font-size: 15px;
}

body{
	background-image: url("../Images/bkgd-cnr.png"),url("../Images/pjf-pixel-mark.png"),url("../Images/bkgd-tile.png");
	background-repeat: no-repeat, no-repeat, no-repeat;
    background-size:auto,contain,cover;
    background-position: bottom right,center left, center top;
	display:flex;
    min-height: 100vh;
    margin: 0;
	padding: 0;
}

header{
	margin: 0 auto;
	widows: 100%;
	text-align: center;
	padding-bottom: 3rem;
}

body a{
	color: #FFFFFF;
	text-decoration-style: dotted;
	
}

body a:hover{
	color: #5010b0;
	text-decoration-style: dotted;
	
}

body a:visited:hover{
	color: #FFFFFF;
	text-decoration-style: dotted;
	
}

body a:visited{
	color: #FFFFFF;
	text-decoration-style: dotted;
	
}

.notice{
	text-align: center;
}

.title {
   width: 100%;
   height: auto;
}

img.logos {
    filter: brightness(0) invert(1);
	width: auto;
   	height:  7rem;
	padding-top:3rem;
	padding-left:1rem;
	padding-right:1rem;
}

img.logos2 {
	width: auto;
   	height:  6rem;
	padding-top:1rem;
	padding-left:1rem;
	padding-right:1rem;
}

img.logos3 {
	width: auto;
   	height:  3rem;
	padding-top:1rem;
	padding-left:1rem;
	padding-right:1rem;
}

img.logos4 {
	width: auto;
   	height: 10rem;
}

.logo-container1{
  display:flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;
}

.logo-container2{
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;
  padding-bottom: 1rem;
}

/*TEXT FORMATTING*/

p {
	margin-bottom: 2em;
}

.button_steam {
  background-color: #0096FF;
  border: none;
  border-radius: 25px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}

.button_list {
  background-color: #e61e78;
  border: none;
  border-radius: 25px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}

.button_insta {
  background-color: #FF6000;
  border: none;
  border-radius: 25px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}

.button_fb {
  background-color: #1877F2;
  border: none;
  border-radius: 25px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}

.button_x {
  background-color: #000000;
  border: none;
  border-radius: 25px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}

.button_tiktok {
  background-color: #fe2b54;
  border: none;
  border-radius: 25px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}

.button_discord {
  background-color: #5865f2;
  border: none;
  border-radius: 25px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}

h1 {
	font-size:24px;
	/*background-color: #fb4d8e; */;
	color: #FFFFFF;
	font-family: "Pixelify Sans","sans-serif";
}

h2 {
	font-size:16px;
	/*background-color: #fb4d8e; */
	color: #FFFFFF;
	font-family: "Pixelify Sans","sans-serif";
}

h3 {
	font-size:30px;
	/*background-color: #fb4d8e; */
	color: #FFFFFF;
	font-family: "Pixelify Sans","sans-serif";
}

.title{
	color: #FFFFFF;
	font-style: italic;
}

/* CSS Blink Animation */
.blink {
    animation: blink-animation 1s steps(1, start) infinite;
}

@keyframes blink-animation {
    50% {
        visibility: hidden;
    }
}

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
  z-index: 30;
}
 
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

/*TABLET*/
@media screen and (max-width: 900px) {

/*Footer Reformat*/
h2{
	color: black;
}
	
h2 a{
	color: #000;
}
	
h2 a:hover{
	color: #000;	
}

h2 a:visited:hover{
	color: #000;
}

h2 a:visited{
	color: #000;	
}

/*Console Logo Resize*/
img.logos {
	width: auto;
   	height:  4rem;
	padding-top:1rem;
	padding-left:0.5rem;
	padding-right:0.5rem;
}
	
img.logos4 {
   	height: 7em;
}
	
body{
    display:inherit;
    min-height: 100vh;
    margin:auto;
	background-image: url("../Images/gradient.png"),url("../Images/bkgd-cnr.png"), url("../Images/bkgd-tile.png");
	background-repeat: no-repeat, no-repeat, no-repeat;
    background-size:cover,auto,cover;
    background-position: bottom right, bottom right, center top;
	}
	
}

/*MOBILE*/
@media screen and (max-width: 600px) {
	
header{
	text-align: center;
	float: inherit;
	padding-bottom:30px;
}
	
img {
  width: 80%;
  height: auto;
}

/*Console Logo Resize*/
img.logos {
	width: auto;
   	height:  2.7rem;
	padding-top:1rem;
	padding-left:0.5rem;
	padding-right:0.5rem;
}
	
body{
    display:inherit;
    min-height: 100vh;
    margin:auto;
	background-image: url("../Images/gradient.png"),url("../Images/bkgd-cnr.png"), url("../Images/bkgd-tile.png");
	background-repeat: no-repeat, no-repeat, no-repeat;
    background-size:cover,auto,cover;
    background-position: bottom right, bottom right, center top;
	}

.notice{
	padding-top: 0.5rem;
	padding-left: 0.5rem;
	padding-right:0.5rem;
}
	
h3{
	font-size:25px;	
}
/*Footer Reformat*/
h2{
	color: black;
}
	
h2 a{
	color: #000;
}
	
h2 a:hover{
	color: #000;	
}

h2 a:visited:hover{
	color: #000;
}

h2 a:visited{
	color: #000;	
}

/*Social Link Resize*/
.button_steam {
  padding: 15px 42px;
  font-size: 30px;
}
	
.button_discord {
  padding: 15px 15px;
  font-size: 30px;
}
	
.button_list {
  padding: 15px 42px;
  font-size: 30px;
}
	
.button_insta {
  padding: 15px 52px;
  font-size: 30px;
}
	
.button_x {
  padding: 15px 52px;
  font-size: 30px;
}
	
.button_tiktok {
  padding: 15px 86px;
  font-size: 30px;
}
	
.button_fb {
  padding: 15px 62px;
  font-size: 30px;
}

/*Company Logo Resize*/
img.logos2 {
	width: auto;
   	height:  5rem;
	padding-top:0.5rem;
	padding-right:0.5rem;
}

img.logos3 {
	width: auto;
   	height:  4rem;
	padding-top:2rem;
	padding-left:0.5rem;
}	
	
img.logos4 {
   	height: 4em;
}

.logo-container1{
  display: flex;
}
	
.logo-container2{
  display: block;
}
	
/*General Images */
.responsive {
 	width: 100%;
}

.responsive-header {
 	width: 100%;
}	
	
}