body {
  		text-align: center;
  		color: #ffffff;
  	}

  	h1 {
  		font-size: 60px;
  		font-weight: bold;
  		/* syntax: x-offset y-offset blur color */
  		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  	}

  	h2 {
  		font-size: 32px;
  		font-weight: bold;
  		/* syntax: x-offset y-offset blur color */
  		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  	}

  	.background-container {
  		background-color: #000000;
	    /*background-image: url('../../uploads/bg-main-wide.png');
	    background-size: cover;          Shows the whole image without cropping 
	    background-repeat: no-repeat;     Prevents the image from tiling 
	    background-position: top;       Centers the image on the screen 
	    height: 100vh;                    /* Makes the container fill the screen height */
	}

	.search {
		margin: 0 auto;
		border: 1px solid #000000;
		background-color: #000000;
		font-size: 30px;
		color: #ffffff;
		text-align: center;
	}

	input.search, input.search:focus {
		background-color: #000000;
		font-size: 30px;
		color: #ffffff;
		text-align: center;
	}

	.video {
		
	}

	.rp-container {
  		/*background-color: #000000;
	    background-image: url('../../uploads/bg-roleplay-landscape.png');
	    background-size: 100%;          Shows the whole image without cropping 
	    background-repeat: no-repeat;     /* Prevents the image from tiling 
	    background-position: top;      /* Centers the image on the screen 
	    height: 100vh;                    /* Makes the container fill the screen height */
	}

	/*@media (orientation: portrait) {
  		.background-container {
    		background-image: url('../../uploads/bg-main.png');
    		background-size: contain;
    		background-position: top;
  		}

  		.rp-container {
	  		background-color: #000000;
		    background-image: url('../../uploads/bg-roleplay-portrait.png');
		    background-size: 100%;         /* Shows the whole image without cropping 
		    background-repeat: no-repeat;     /* Prevents the image from tiling 
		    background-position: top;      /* Centers the image on the screen 
		    height: 100vh;                    /* Makes the container fill the screen height */
		}
	}

	@media (max-width: 1440px) {
		.search {
			margin: 0 auto;
			border: 1px solid #000000;
			background-color: #000000;
			font-size: 30px;
			color: #ffffff;
			text-align: center;
		}

		input.search, input.search:focus {
			background-color: #000000;
			font-size: 30px;
			color: #ffffff;
			text-align: center;
		}

		h1 {
	  		font-size: 48px !important;
	  		font-weight: bold;
	  		/* syntax: x-offset y-offset blur color */
	  		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	  	}

		h2 {
	  		font-size: 30px !important;
	  		font-weight: bold;
	  		/* syntax: x-offset y-offset blur color */
	  		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	  	}
	}

	@media (max-width: 1024px) {
		.search {
			margin: 0 auto;
			border: 1px solid #000000;
			background-color: #000000;
			font-size: 24px;
			color: #ffffff;
			text-align: center;
		}

		input.search, input.search:focus {
			background-color: #000000;
			font-size: 24px;
			color: #ffffff;
			text-align: center;
		}

		h1 {
	  		font-size: 80px !important;
	  		font-weight: bold;
	  		/* syntax: x-offset y-offset blur color */
	  		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	  	}

		h2 {
	  		font-size: 48px !important;
	  		font-weight: bold;
	  		/* syntax: x-offset y-offset blur color */
	  		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	  	}
	}

	@media screen and (min-width: 932px) and (max-width: 932px) {
		.search {
			margin: 0 auto;
			border: 1px solid #000000;
			background-color: #000000;
			font-size: 20px;
			color: #ffffff;
			text-align: center;
		}

		input.search, input.search:focus {
			background-color: #000000;
			font-size: 20px;
			color: #ffffff;
			text-align: center;
		}

		h1 {
			margin-top: 0 !important;
	  		font-size: 36px !important;
	  		font-weight: bold;
	  		/* syntax: x-offset y-offset blur color */
	  		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	  	}

		h2 {
	  		font-size: 16px !important;
	  		font-weight: bold;
	  		/* syntax: x-offset y-offset blur color */
	  		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	  	}
	}

	@media (max-width: 768px) {
		.search {
			margin: 0 auto;
			border: 1px solid #000000;
			background-color: #000000;
			font-size: 20px;
			color: #ffffff;
			text-align: center;
		}

		input.search, input.search:focus {
			background-color: #000000;
			font-size: 20px;
			color: #ffffff;
			text-align: center;
		}
		h1 {
			margin-top: 14px !important;
	  		font-size: 64px !important;
	  		font-weight: bold;
	  		/* syntax: x-offset y-offset blur color */
	  		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	  	}

		h2 {
	  		font-size: 36px !important;
	  		font-weight: bold;
	  		/* syntax: x-offset y-offset blur color */
	  		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	  	}
	}

	@media (max-width: 480px) {
		.background-container {
	  		/*background-color: #000000;
		    background-image: url('../../uploads/bg-main.png');
		    background-size: cover;         /* Shows the whole image without cropping 
		    background-repeat: no-repeat;     /* Prevents the image from tiling 
		    background-position: center;      /* Centers the image on the screen 
		    height: 100vh;                    /* Makes the container fill the screen height */
		}

		.search {
			margin: 0 auto;
			border: 1px solid #000000;
			background-color: #000000;
			font-size: 18px;
			color: #ffffff;
			text-align: center;
		}

		input.search, input.search:focus {
			background-color: #000000;
			font-size: 18px;
			color: #ffffff;
			text-align: center;
		}

		h1 {
			margin-top: 24px !important;
	  		font-size: 40px !important;
	  		font-weight: bold;
	  		/* syntax: x-offset y-offset blur color */
	  		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	  	}

		h2 {
	  		font-size: 24px !important;
	  		font-weight: bold;
	  		/* syntax: x-offset y-offset blur color */
	  		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	  	}
	}