Custom Landing Page CSS
Desktop Browsers display single responsive landing page
Mobile Browsers show responsive video background with customized css text effects.

DEMO: https://keys-daggers.org
(you will need to demo from Desktop and Mobile browser to see difference)

(please forgive the coding mess / lack of proper coding style; I am an amateur web development hobbyist and grab code snippets from various resource sites.)

To use:
Copy/Paste code snippets into respective fields on the Landing Page extension for Flarum.
Replace images and fonts with your own.

Requires Landing Page Extension:
https://packagist.org/packages/johnhearfield/flarum-ext-landing-page

composer require johnhearfield/flarum-ext-landing-page

Header HTML:

<style>
@media (min-width: 768px) {
body { 
			background-image: url(https://i.imgur.com/Od3fFcm.jpg) ;
overflow:hidden;
			background-position: center center;
			background-repeat:  no-repeat;
			background-attachment: relative;
			background-size:  cover;
			 rgba(0e,0e,0e,0.4);
 overflow-x: hidden;
  
}

.Search-input input {
display: none;
}

div, body{
  margin: 0;
  padding: 0;
  font-family: exo, sans-serif;
 overflow-x: hidden;

  
}
.wrapper {
  height: auto; 
  width: auto; 
possition: fixed;
 overflow: hidden;
}

.message {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: auto; 
  height: auto;
  bottom: 25%; 
  display: block;
  position: absolute;
  background-color: rgba(0e,0e,0e,0.4);
  color: #fff;
  padding: 0.5em;
overflow: hidden;

/**
 * Custom Web Fonts
 */
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:200,400,600);
/**
 * Variables
 */
/**
 * Base Styles
 */
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  background-color: #242424;
  color: #CCC;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.5;
}
@media (min-width: 64em) {
  body {
    font-size: 1.2em;
    line-height: 1.8;
  }
}
@media (min-width: 85.375em) {
  body {
    font-size: 1.3em;
  }
}
@media (min-width: 120em) {
  body {
    font-size: 1.4em;
  }
}
@media (min-width: 160em) {
  body {
    font-size: 1.6em;
  }
}

a {
  color: #FC4842;
  -webkit-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
  text-decoration: none;
}
a:hover, a:focus {
  color: #fb1710;
}

img {
  max-width: 100%;
}

ul {
  padding: 0;
  list-style: none;
}

.icon {
  display: inline-block;
  fill: currentColor;
}

.divider {
  position: relative;
  margin: 0 4% 3em;
  border-bottom: 1px solid #666;
}
@media (min-width: 64em) {
  .divider {
    margin: 0 8% 3em;
  }
}
@media (min-width: 85.375em) {
  .divider {
    margin: 0 12% 3em;
  }
}
@media (min-width: 120em) {
  .divider {
    margin: 0 18% 3em;
  }
}


/**
 * Global
 */
.container {
  margin: 0 4%;
}
@media (min-width: 64em) {
  .container {
    margin: 0 8%;
  }
}
@media (min-width: 85.375em) {
  .container {
    margin: 0 12%;
  }
}
@media (min-width: 120em) {
  .container {
    margin: 0 18%;
  }
}

/**
 * Typography
 */
p {
  margin: 0 0 1em;
}

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  line-height: 1.25;
}

/**
 * Sections
 */
.header {
  position: relative;
  padding: 6em 0;
  margin: 0 0 1em;
  text-align: center;
}
@media (min-width: 48em) {
  .header {
    padding: 8em 0;
  }
}
@media (min-width: 64em) {
  .header {
    padding: 10em 0;
  }
}
@media (min-width: 120em) {
  .header {
    padding: 12em 0;
  }
}
.header:after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 1em;
  right: 1em;
  bottom: 1em;
  left: 1em;
  border: 2px solid #CCC;
}
@media (min-width: 64em) {
  .header:after {
    top: 2em;
    right: 2em;
    bottom: 2em;
    left: 2em;
  }
}

.header__title {
  position: relative;
  z-index: 2;
  font-weight: 200;
  letter-spacing: 0.2em;
  font-size: 1.5em;
}
@media (min-width: 48em) {
  .header__title {
    font-size: 3em;
  }
}
@media (min-width: 64em) {
  .header__title {
    font-size: 4em;
  }
}
@media (min-width: 85.375em) {
  .header__title {
    font-size: 5em;
  }
}

.header__img {
  position: absolute;
  width: 100%;
  z-index: 1;
  top: 50%;
  -webkit-transform: translateY(-45%);
          transform: translateY(-45%);
  opacity: 0.4;
}
.header__img:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: -webkit-linear-gradient(top, rgba(36, 36, 36, 0) 0%, #242424 100%);
  background: linear-gradient(to bottom, rgba(36, 36, 36, 0) 0%, #242424 100%);
}

/**
* Overview
*/
.overview {
  position: relative;
  z-index: 2;
  margin: 0 0 2em;
  font-size: 1.4em;
  font-weight: 200;
}
@media (min-width: 64em) {
  .overview {
    font-size: 1.6em;
  }
}
@media (min-width: 85.375em) {
  .overview {
    font-size: 1.8em;
  }
}

/**
* Main
*/
.main {
  margin: 0 0 2em;
}

/**
* Footer
*/
.footer {
  padding: 2em 0;
  text-align: center;
  color: #666;
  background-color: #151515;
}
.footer svg {
  width: 3em;
  height: 3em;
  fill: #666;
  margin: 0 0 0.5em;
}
.footer p {
  font-size: 0.83333em;
}

/*
 * Tabs
 */
.tabs li {
  display: inline-block;
}
.tabs li:not(:last-child):after {
  content: "/";
  display: inline-block;
  margin: 0 0.33333em;
  font-weight: 300;
  color: #666;
}
.tabs a {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.tabs a.is-active {
  color: white;
}

.js-tabby .tabs-pane {
  display: none;
  visibility: hidden;
}

.tabs-pane {
  margin: 0 0 4em;
}
.tabs-pane.is-active {
  display: block;
  visibility: visible;
}
</style>
<style>
.mobile-show {
    display: none;
}

@media (max-width: 640px) {
  .mobile-show {
    display: inline;
  }
  .desktop-show {
    display: none;
  }
}

</style>
<style>
/* Settings - feel free to play with these */
$overlay_opacity: 0.3; // 0-1
$overlay_pattern: 'https://d3k5xyayaartr5.cloudfront.net/_assets/pattern-overlays/patterns/black-medium-checks.png'; // Grab the url of a png from here - http://html5backgroundvideos.com/pattern-overlays/

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

/**
 * This part should be set separately for each video
 * if there are multiple videos in your site.
 * I.e. '.demo-video-wrapper' is the name of this particular video
 */


/* Video overlay and content */
.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
background-position: center center;
			background-repeat:  no-repeat;
			background-attachment: relative;
			background-size:  cover;
			 rgba(0e,0e,0e,0.4);
	pointer-events: none; /* Allows right click menu on the video */
	background: url($overlay_pattern) left top repeat;
  opacity: $overlay_opacity;
}
.video-hero--content {
	position: relative;
	text-align: center;
	color: #FFF;
  margin: 150px 0;
	text-shadow: 0 0 5px rgba(0,0,0,0.4);
}
.video-hero--content h2 {
	font-size: 34px;
	margin: 0 0 10px;
}
.video-hero--content p {
	font-size: 20px;
	margin: 0;
}

/* Other stuff */

}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.page-width {
	width: 92%;
	max-width: 960px;
	margin: 0 auto;
}

}
#header a {
	color: #FFF;
}
.title {
	display: block;
	font-weight: bold;
	font-size: 1em;
}
.subtitle {
	display: block;
	font-weight: normal;
	font-size: 15px;
	color: #959699;
}
a:hover .subtitle {
	color: #FFF;
}
#site-title {
	float: left;
	margin: 0;
}

}


/* CSS from jQuery Background Video plugin */
/**
 * Set default positioning as a fallback for if the plugin fails
 */
.jquery-background-video-wrapper {
	position: relative;
	overflow: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	    	background-size: cover;
 overflow-x: hidden;
}
.jquery-background-video {
	position: absolute;
overflow: hidden;
 overflow-x: hidden;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	-o-object-fit: contain;
	   object-fit: contain;
	-webkit-transform: translate(-50%,-50%);
	   -moz-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	     -o-transform: translate(-50%,-50%);
	    	transform: translate(-50%,-50%);
}
/**
 * Fade in videos
 * Note the .js class - so non js users still
 * see the video
 */
.js .jquery-background-video {
	opacity: 0;
	-webkit-transition: opacity 300ms linear;
			transition: opacity 300ms linear;
}
.js .jquery-background-video.is-visible {
	opacity: 1;
}

/**
 * Pause/play button
 */ 
.jquery-background-video-pauseplay {
	position: absolute;
	background: transparent;
	border: none;
	box-shadow: none;
	width: 20px;
	height: 20px;
	top: 15px;
	right: 15px;
	padding: 0;
	cursor: pointer;
	outline: none !important;
}
.jquery-background-video-pauseplay span {
	display: none;
}
.jquery-background-video-pauseplay:after,
.jquery-background-video-pauseplay:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	-webkit-transition: all .3s ease;
			transition: all .3s ease;
}
.jquery-background-video-pauseplay.play:before {
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid #FFF;
}
.jquery-background-video-pauseplay.pause:before,
.jquery-background-video-pauseplay.pause:after {
	border-top: 10px solid #FFF;
	border-bottom: 10px solid #FFF;
	border-left: 5px solid #FFF;
}
.jquery-background-video-pauseplay.pause:after {
	left: 10px;
}

#hollow {
  margin: 0;
color: red;
fill: black;
   text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
  font-family: Roboto;
}
#hollow2 {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  border: none;
   font-family: Origicide;
   text-shadow: 0 0 10px rgba(0,0,0,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #000000 , 0 0 70px #000000 , 0 0 80px #000000 , 0 0 100px #000000 ;

}


}
</style>
<style type="text/css">
svg{
 font-family: Roboto;

	 width: auto;.
  height: auto;
	
	

}

text{
  fill: none;
font-size: 2em;

  stroke: red;
  stroke-width: 1px;
  // stroke-dasharray: 2,2;
  stroke-linejoin: round;
}
</style>
<style>
@font-face {
    font-family: Origicide;
    src: url(/assets/fonts/origicide.woff2);
}
p.customfont { 
    font-family:  Roboto;
}
</style>
<style>
.text-justify-xs {
    text-align: justify;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .text-justify-sm {
        text-align: justify;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .text-justify-md {
        text-align: justify;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .text-justify-lg {
        text-align: justify;
    }
}
</style>

<style>

#wargames{
position:relative;
    

text-align:center;
}

#wargames:after{
content:"";
width:auto;
height:20%;
position:absolute;
bottom:-15px;
left:0;

}



#wargames pre{


overflow:hidden;
position:relative;
color:#7cb4fc;



}

#wargames pre:before{
content:"";
width: auto;
height:auto;
position:absolute;
top:0;
left:0;

-webkit-animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
-moz-animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
-ms-animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
 -o-animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
    animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
}


#wargames pre:after{
content:"";
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:0;
-webkit-filter:drop-shadow(15.32px 2.18px 7.35px rgba(20, 184, 189, 1));
}

#wargames code{
background:#fff;
border:1px solid #DDD;

}

#wargames pre code{
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
background-color:transparent;
background-position: center center;
border-style:none;
font-size: 1.3em;
font-family: 'Titillium Web';
}

#wargames pre code:last-child:after{
content:"\220E";
-webkit-animation:cursor .95s ease-in-out infinite;
-moz-animation:cursor .95s ease-in-out infinite;
-ms-animation:cursor .95s ease-in-out infinite;
 -o-animation:cursor .95s ease-in-out infinite;
    animation:cursor .95s ease-in-out infinite;
font-size:120%;
}

/*Animations*/

/* Cant' get "Scan" to work in Firefox*/
@-webkit-keyframes scan{
from { top: -50%;
left: 0;
}

to {
top: 150%;
left: 0;
}
}


@keyframes scan{
from { top: -50%;
left: 0;
}

to {
top: 150%;
left: 0;
}
}


@-webkit-keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}


@-moz-keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}


@-ms-keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}


@-o-keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}


@keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}

.lightbox {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  opacity: 0;
}
.lightbox .lightbox-overlay {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.lightbox .lightbox-content {
  position: absolute;
  bottom: -100%;
  left: 50%;
  width: 16cm;
  height: auto;
  margin-left: -8cm;
  transition: bottom 0.5s ease;
  z-index: 1;
  background: #171717;
  box-shadow: 0 0 .1em #EEE;
  padding: .4em;
}
.lightbox .lightbox-content .lightbox-title {
  border-bottom: .3cm #CCC solid;
  padding-bottom: .3em;
  margin-bottom: .5em;
}
.lightbox .lightbox-content .lightbox-close-btn {
  width: .2em;
  height: .2em;
  background: #171717;
  position: absolute;
  right: -.5em;
  top: -.5em;
  border-radius: .2em;
  border: .3em #EEE solid;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), inset 0 0 5px rgba(0, 0, 0, 0.5);
  text-align: center;
  line-height: 1em;
  text-indent: -200%;
  overflow: hidden;
}
.lightbox .lightbox-content .lightbox-close-btn:before {
  content: "";
  position: absolute;
  transform: rotate(45deg);
  border-left: 1px solid #EEE;
  height: 50%;
  width: 50%;
  left: 8px;
  top: 8px;
}
.lightbox .lightbox-content .lightbox-close-btn:after {
  content: "";
  position: absolute;
  transform: rotate(-45deg);
  border-right: 1px solid #EEE;
  height: 50%;
  width: 50%;
  right: 8px;
  top: 8px;
}
.lightbox:target {
  opacity: .95;
  z-index: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 
  
overflow: hidden;
}
.lightbox:target .lightbox-overlay {
  opacity: .4;
}
.lightbox:target .lightbox-content {
  bottom: 2%;
}
.lightbox:target ~ #wrapper {
  transform: scale(0.9);
}
</style>
<style>

#wargames2{
position:relative;
    

text-align:center;
}

#wargames2:after{
content:"";
width:auto;
height:10%;
position:absolute;
bottom:-15px;
left:0;

}



#wargames2 pre{


overflow:hidden;
position:relative;
color:#1ec503;



}

#wargames2 pre:before{
content:"";


-webkit-animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
-moz-animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
-ms-animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
 -o-animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
    animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
}


#wargames2 pre:after{
content:"";
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:0;
-webkit-filter:drop-shadow(15.32px 2.18px 7.35px rgba(30, 197, 3, 1));
}

#wargames2 code{
background:#fff;
border:1px solid #DDD;

}

#wargames2 pre code{
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
background-color:transparent;
background-position: center center;
border-style:none;
font-size: 1.3em;
font: VT323, monospace;
}

#wargames2 pre code:last-child:after{
content:"\220E";
-webkit-animation:cursor .95s ease-in-out infinite;
-moz-animation:cursor .95s ease-in-out infinite;
-ms-animation:cursor .95s ease-in-out infinite;
 -o-animation:cursor .95s ease-in-out infinite;
    animation:cursor .95s ease-in-out infinite;
font-size:120%;
}

/*Animations*/

/* Cant' get "Scan" to work in Firefox*/
@-webkit-keyframes scan{
from { top: -50%;
left: 0;
}

to {
top: 150%;
left: 0;
}
}


@keyframes scan{
from { top: -50%;
left: 0;
}

to {
top: 150%;
left: 0;
}
}


@-webkit-keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}


@-moz-keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}


@-ms-keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}


@-o-keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}


@keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}

</style>
<style>
.style_prevu_kit
{
    display:inline-block;
    border:0;
    width: auto;
    height: auto;
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);   
text-decoration: none;

}
.style_prevu_kit:hover
{
    
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.03);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.03);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.03);
    transition: all 200ms ease-in;
    transform: scale(1.03);
text-decoration: none;
}
</style>
<style>
.cool-link {
    display: inline-block;
    color: #1ec503;
    text-decoration: none;

}

.cool-link::after {
    content: '';
    display: flex;
    width: 0;
    height: .1em;
    background: #1ec503;
    transition: width .3s;

}

.cool-link:hover::after {
    width: 100%;
    transition: width .3s;
}

</style>
<style type="text/css">

   .mobileShow { display: none;}

   /* Smartphone Portrait and Landscape */

   @media only screen

   and (min-device-width : 320px)

   and (max-device-width : 480px){ .mobileShow { display: inline;}}

</style>

Body HTML:

 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Exo:400,900' rel='stylesheet' type='text/css'>

 <div class="wrapper message desktop-show">
    <h1 id="wargames2">  <a href='#demo2'  class="cool-link" style="text-decoration: none"><pre><code>"One mind, any weapon."</pre></code></a></h1>
<br><p></p>    
 <p>- Hunter B. Armstrong</p>


<div class='lightbox' id='demo2'>
  <article class='lightbox-content'>
    <h3 id="hollow2" class='lightbox-title'>Three Axioms of Hoplology</h3>
    <p>
  
1. The foundation of human combative behavior is rooted in our evolution. To gain a realistic understanding of human combative behavior, it is necessary to have a basic grasp of its evolutionary background.
<p></p>
2. The two basic forms of human combative behavior are predatory and affective. Predatory combative behavior is that combative/aggressive behavior rooted in our evolution as a hunting mammal. Affective combative behavior is that aggressive/combative behavior rooted in our evolution as a group-social animal.
<p></p>
3. The evolution of human combative behavior and performance is integral with the use of weapons. That is, behavior and performance is intrinsically linked to and reflects the use of weapons.
    </p>
    <a class='lightbox-close-btn' href='#'>x</a>
  </article>
  <a class='lightbox-overlay' href='#'></a>
</div>
</div>

<div class="mobileShow">
 <!-- Start video hero -->
<div class="video-hero jquery-background-video-wrapper demo-video-wrapper">
 <video class="jquery-background-video" autoplay muted loop poster="/assets/pirate.jpg">
    <source src="/assets/Binary_lo.mp4" type="video/mp4">
    <source src="/assets/Binary_lo.webm" type="video/webm">
    <source src="/assets/Binary_lo.ogv" type="video/ogg">
  </video>
	  <div class="video-overlay"></div>
  	<div class="page-width">
		    <div class="video-hero--content">    <h2 id="hollow2">Keys & Daggers</h2>&nbsp;   <p id="hollow"></p>
			               <div id="wargames">
	<pre><code>
Access by any means neccesary</pre></code>

</div>  

</div>
  	</div>
</div>
<!-- End video hero -->
 		
	  </div>
  		
	  </div>

Demo:
https://keys-daggers.org