* {
		  	/*into the matrix!*/
		  	margin: 0;
		  	padding: 0;
		  	list-style-type: none;
		  	color: white;
		  }

		  /*Animations*/
		  @keyframes fadeIn {
		  	50% {
		  		opacity:0;
		  	}
		  	100%{
		  		opacity: 1;
		  	}
		  }

		  @keyframes slideIn{
          	100% {
          		transform: translateY(0);
          	}
          }

		  .wrapper {
			transform: translateY(30px);
		  	opacity: 0;
		  }

		  .loaded .wrapper{
          	animation: fadeIn .5s ease-in .4s forwards, slideIn .5s ease-in .4s forwards;
          }

		  /*Defaults for mobile*/

		  body {
		  	  /*font-family:'Trebuchet MS', sans-serif;*/
		  	  font-family: 'Alegreya Sans SC';
		      position: relative;
			  background-color:  rgba(16,18,144,1);
		      /*background-color:#2b1622;*/
			  background-image: url("purpBG.PNG");
		      top:60px;

			  background-attachment: fixed;
			  background-position: center;
			  background-repeat: no-repeat;
			  background-size: 100%; 
		  }

		  #background_wrap {
			z-index: -1;
			position: fixed;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			background-size: 100%;
			background-image: url("purpBG.PNG");
			background-attachment: fixed;
		  }

		  html, body {
			  width: 100%;
			  height: 100%;
		  }

		  h3 {
		  	font-size: 40px;
		  	text-align: center;
		  	/*background-color: black;*/
			background-color: rgba(16,18,144,.6);
		  }

		  h4 {
		  	text-align: center;
		  	font-size: 25px;
		  }

		  header {
          	width: auto;
		  	margin: 10px;
		  	height: 15vh;
		  	text-align: center;
		  	padding-bottom: 3vh;
		  }

		  header img {
            height: 10vh;
            image-rendering: auto;
		  }

		  header h4, header h1 , header p{
		  	max-width: 400px;
		  	margin: 0 auto;
          }

          header p {
		  	border-radius: 20px;
		  	text-align: center;
          }

		  p {
          	margin: 5px;
          	font-size: 20px;
          }

    	  img {
  			image-rendering: pixelated;
    	  }

    	  a {
    	  	text-decoration: none;
    	  }

		  /*#region NavBar*/
		  nav {
		  	z-index: 5;
        	/*opacity: 0.9;*/
            top:0;
            width: 100%;
            font-size: 18px;
            position: fixed;
			background-color: rgba(16,16,144,.9);
            /*background-color: rgb(0,108,108);*/
    	  }

    	  nav ul {
            display: grid;
            grid-template-columns:auto auto auto auto auto;
            grid-template-rows: 50px;
            float: right;
            margin-right: 15px;
            align-items: center;
            /*background-color: rgb(0,108,108);*/
          }
          
          nav ul li {
            text-align: center;
            padding: 10px 10px;
            position: relative;
            /*background-color: rgb(0,108,108);*/
          }

          nav ul li:hover {
            cursor: pointer;
          }

          nav ul li:hover a{
            color: orange;
          }

          nav ul li a {
            color:  white;
            text-decoration: none;
            /*background-color: rgb(0,108,108);*/
          }

          .illus_header {
          	position: relative;
          }

		  .parallax { 
			/* Set a specific height */
			height: 30vh; 
			margin: 10px;
			border-radius: 25px;

			/* Create the parallax scrolling effect */
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			opacity: 80%;
		  }

		  .parallax_sp {
		  	/* Set a specific height */
			height: 30vh; 
			margin: 10px;
			border-radius: 25px;

			/* Create the parallax scrolling effect */
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			opacity: 40%;
		  }

		  	/*text on the image used as parallax*/
		  .onImage {
		  	position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 10px;
			background-color: transparent;
		}

		  .section_header {
          	width: auto;
		  	margin: 5vh .5%;
          }

		  .Collab_content {
			text-align: center;
			padding-bottom: 5vh;
		  }

		  .Collab_content p:hover a{
            color: orange;
          }

          .Games_container {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 3fr 1fr;
		  }

		  .info p{
		  	padding: 5%;
		  }

		  .image_container {
		  	max-width: 50vh;
			position: relative;
			padding: 1%;
			float: left;
		  }

		   .Games_container .image_container {
		  	max-width: 50vh;
			position: relative;
			padding: 1%;
			grid-column: 1/2;
		  }

		   .Games_container .info {
		  	grid-column: 2/4;
		  }

		  /*controls all images that can lead to gamesites*/
		  .game_image {
  			  opacity: 1;
			  display: block;
			  width: 100%;
			  height: auto;
			  transition: .5s ease;
			  backface-visibility: hidden;	  
			  border-radius: 10px;
		    }

		  .overlay {
			  transition: .5s ease;
			  opacity: 1;
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  transform: translate(-50%, -50%);
			  -ms-transform: translate(-50%, -50%);
			  text-align: center;
			}

		  .image_container:hover .game_image {
			  opacity: .5;
		  } 

		   .image_container:hover .overlay {
			  opacity: 1;
		  }

		  .image:active {
		  	color: #f5f0eb;
		  }

		  /*audio*/

		  .music li {
		  	text-align: center;
		  }

		  /*Digital illustration section*/

		  .digi_collection ul {
		  	display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			
		  }

		  .digi_collection img {
		  	width: 218px;
		  	height: 218px;
		  	object-fit: cover;
		  	transition: .5s ease;
		  }

		  .digi_collection img:hover {
		  	cursor: pointer;
		  }

		  /*Merch section*/
		  .merchInfo {
			text-align: center;
			width: auto;
		  }
		  .merchInfo img {
			width: 90vw;
		  	height: auto;
		  	object-fit: fill;
		  }

		  .merchInfo p:hover a{
            color: orange;
          }

		  .itemInfo p{
			  font-family: 'Lucida Console';
			  font-size: 16px;
		  }

		  .intro {
			width: 90vw;
			text-align: center;
			margin: 4vw;
			background-color: rgba(16,16,144,.4);
			box-shadow: 0px 10px 5px rgba(16,16,144,.2);
			padding: 1vw;
		  }

		  .intro img {
			max-width: 15vw;
		  }

		  .item {
			text-align: center;
		  }

		  .item ul {
			display: inline-flex;
			flex-wrap: wrap;
			margin: 3vw;

			justify-content: center;
		    align-content: center;
		    gap: 4px;
		    grid-auto-flow: column;
		  }

		  .item ul img {
			max-height: 30vh;
		  }

		  .item1 {
			text-align: center;
		  }

		  .item1 ul {
			margin: 3vw;
			justify-content: center;
		    align-content: center;
		    grid-auto-flow: column;
		  }

		  .item1 ul img {
			max-width: 90vw;
			max-height: 30vh;
		  }

		  .return_button {
			  margin: 5vh;
			  text-align: center;
		  }

		  .return_button p:hover a{
            color: orange;
          }

		  /*.digi_collection img:active/*.expanded*//*{
		  /*	width: 90vh;
		  	height: auto;
		  	object-fit: fill;
		  	-webkit-transform:scale(1);
    		transform:scale(1);
		  }
		  */

		  .clearfix {
          	clear: both;
          }

          /*Animation section*/

          .anim_header {
          	position: relative;
          }

          .anim_vid {
          	text-align: center;
			padding-top:30px;
          }

          .video_container {
          	position:relative;
			padding-bottom:56.25%;
			padding-top:30px;
			margin: 10vh;
			height:0;
          }

          .video_container iframe, .video-container object, .video-container embed {
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
		  }

          /*about section*/
          .about_section {
          	padding-top: 10vh;
			display: grid;
		    justify-content: center;
		    align-content: center;
		    gap: 4px;
		    grid-auto-flow: column;
			
          }

          .about_img {
			display: flex;
			align-self:center;
			object-fit: scale-down;
			height: auto;
			margin: 20px;
          }

		  .about_img img{
			max-height:25vh;
          }

          .about_text {
			font-family: 'Lucida Console';
			width: 40vw;
          }

          .about_text p {
			background-color: rgba(16,16,144,.4);
			box-shadow: 0px 10px 5px rgba(16,16,144,.2);
          	/*background-color: #109090;*/
          	padding: 10px;
			margin-top: 0px;
			font-size: 15px;
          }

          .contact {
          	text-align: center;
          	margin-top: 10vh;
          }

		  .contact ul{
          	margin-top: 5vh;
          }

		  .contact li {
			display: grid;
		    justify-content: center;
		    align-content: center;
		    grid-auto-flow: column;
		  }

		  .contact img {
			max-height: 40px;
		  }

          .contact a:hover {
            cursor: pointer;
            color: orange;
          }


          /*media query for phones*/
          @media only screen  and (max-width : 720px){

		   body {
		     background-size: 150%;
		   }

		   #background_wrap {
			  background-size: 150%;
		   }

		   /*#region NavBar*/

		  nav {
            font-size: 17px;
			width: 100vw;
			display: flex;
			justify-content: center;
    	  }

		  nav ul {
			grid-template-columns:auto;
		    grid-auto-flow: column;
            margin-right: 0px;
          }
          
          nav ul li {
            padding: 5px 5px;
          }

		  /*header*/
		  header {
          	display:block;
		  }

		  header img {
            height: 10vh;
			min-height: 50px;
            image-rendering: auto;
		  }

          /*games section*/

          .Games_container {
			display: inline-block;
			}

		  /*Anim reel*/

		  .video_container {
          	position:relative;
			padding-bottom:56.25%;
			padding-top:30px;
			margin: 1vh;
			height:0;
          }

		  /*merch section*/
		  .item li img {
			max-height: none;
			max-width: 40vw;
			min-width: 30vw;
		  }

		  /*about section*/

		  .about_section {
			display: inline-block;
			grid-auto-flow: rows;
			align-content: center;
			
          }

		  .about_img {
			height: 20vh;
			min-height: 50px;
			text-align: center;
			justify-content: center;
		  }

		  .about_text {
			width: 90vw;
			margin: 5vw;
			text-align: center;
		  }

		  .contact ul{
			padding-bottom: 10vh;
		  }

		  .contact li {
			display: inline-block;
			grid-auto-flow: rows;
			align-content: center;
		  }
		  }

		  /*media query for phones*/
		  @media only screen  and (max-width : 500px){

			nav {
              font-size: 15px;
			
    		}

			nav ul {
			  grid-template-rows: 35px;
			}

			nav ul li {
			  padding: 3px 3px;
			}

		  }