@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:100,200,300,400,600,700');
@font-face {
    font-family: 'Lotuscoder';
    src: url('../font/Lotuscoder.woff2') format('woff2'),
        url('../font/Lotuscoder.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lotuscoder';
    src: url('../font/Lotuscoder-bold.woff2') format('woff2'),
        url('../font/Lotuscoder-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
	background-color: #FFF;
	margin: 0;
 }
        
h1 {
	font-family: 'Major Mono Display';
	font-size: 2.0rem;
    color: #FFF;
	font-weight: 400;
}
		
h2 { 
	width: auto;
	font-family: 'Major Mono Display', monospace;
	font-size: 1.5rem;
	font-weight: 600;
	text-align: center;
    padding: 1.0rem;
}

p {
	font-family: 'Lotuscoder', monospace;
	color: #161C1E;
	font-size: 0.9rem;
	font-weight: normal;
	letter-spacing: -0.1px;
    line-height: 1.4;
}
	
span {
    font-family: 'IBM Plex Mono';
    color: #2D393D;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    border-left: solid 4px #CEDADD;
    padding: 0.25rem 1.0rem;
}
a { 
	font-family: 'IBM Plex Mono', monospace;
    font-size: 0.9rem;
	color: #CC65C7;
	font-weight: 400;
	text-decoration: none; 
	text-transform: uppercase;
	letter-spacing: 1px;
}
a:hover {
	border: 0;
	border-bottom: solid 2px #CC65C7;
}
		
button {
    position: relative;
    min-width: 50%;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
	color: #2D393D;
    text-transform: uppercase;
    text-align: center;
	background-color: #FFF;
    padding: 1.0rem 2.0rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 0;
    border-radius: 4px;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.25);
    z-index: 0;
    outline: none;
    cursor: pointer;
    margin-bottom: 1.0rem;
}
button:before {
    content: '';
    background: linear-gradient(45deg, #D684D3, #26C9C9, #FFD300, #5ABE7B, #26C9C9, #D684D3);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(8px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 30s linear infinite;
    opacity: 0;
}
button:hover:before {
    opacity: 1;
    transition: 1s;
}
button:active {
    outline: none;
}
button:active:after {
    background: #F3F6F6;
}
button:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #FFF;
    left: 0;
    top: 0;
    border-radius: 4px;
}
@media (max-width: 1024px) {
    button {
        width: 100%;
    }
}


hr { 
    margin: 3.0rem 0;
	height: 1px;
	background-color: #CEDADD;
	border: 0;
	z-index: -100;
}


.overlay {
    position: relative;
    width: 30%;
	height: auto;
	background-color: #FFF;
    border: solid 1.0rem #FFF;
    padding: 8.0rem 5%;
}
.overlay h1 {
    font-weight: 600;
    color: #2D393D;
}
.overlay p {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.9rem;
    font-weight: 400;
    color: #2D393D;
    letter-spacing: 0.5px;
    padding-bottom: 0.5rem;
}   
.static {
    width: 60%;
    background-color: #F3F6F6;
	display: block;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.25);
}
@media (max-width: 1024px) {
    .overlay {
        width: 80%;
        padding: 1.0rem;
        margin: 0;
    }
    .static {
        width: 80%;
        margin: 0;
    }    
}


.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
			

#canvas {
	width: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: #FFF; 
}
        
.page-header {
	background: none;
	color: #FFF;
	height: 100vh;
}
       
.canvas-wrap { position:relative; }
	div.canvas-content{
		position:relative;
		z-index:2000;
		color:#fff;
		text-align:center;
	}


.hero {
	position: relative;
	padding: 1.0rem 1.0rem 1.5rem;
	top: 25%;
	margin-left: auto; margin-right: auto;
	opacity: 0.8;
}
.hero h1 {
    font-size: 3.0em;
}
.hero p {
    font-family: 'Lotuscoder', monospace;
    color: #FFF;
	font-size: 1.0rem;
    line-height: 1.5;
}
.hero img {
    width: 4.0rem;
}
	

.d1 {
	width: 100%;
	height: auto;
	padding: 12.0rem 25% 0;
	background-color: #FFF;
	color: #2D393D;
	margin-left: auto; margin-right: auto;
	text-align: center;
}
.d1 p {
    padding: 1rem 4rem 0;
}
@media (max-width: 1024px) {
    .d1 {
        max-width: 800px;
        padding: 12.0rem 5% 0;
    }
}
	

.d2 {
    height: auto;
    padding-top: 12.0rem;
}
#overlay-1 {
    margin-top: -5%;
    margin-left: 10%;
    box-shadow: 
        0px 0px 24px rgba(0,0,0,0.25),
        inset 0px 0px 0px 1px #00C8C4;
	float: left;
}
#static-1 {
    margin-left: 30%;
	height: auto;
    padding: 4.0rem 4.0rem 2.0rem 15%;
}
 
.excerpt {
    position: relative;
    box-shadow: 0px 0px 16px rgba(0,0,0,0.1);
    margin-bottom: 2.0rem;
    z-index: 0;
    border-radius: 4px;
}
.excerpt-header {
    background: #161C1E;
    font-family: 'IBM Plex Mono';
    font-size: 0.9rem;
    font-weight: 400;
    color: #FFF;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 4px 4px 0 0;
    padding: 1.0rem 2.0rem;
}
.excerpt-body {
    padding: 0.5rem 2.0rem;
}
.excerpt-body p {
    font-family: 'Lotuscoder';
	font-size: 0.9rem;
    font-weight: normal;
    text-transform: none;
}
.excerpt:before {
    content: '';
    background: linear-gradient(45deg, #AC71AD, #28A5A6, #E9C30D, #5ABE7B, #AC71AD, #28A5A6);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(8px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
}
.excerpt:hover:before {
    opacity: 1;
}
.excerpt:active {
    color: #000;
    background: transparent;
}
.excerpt:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #FFF;
    left: 0;
    top: 0;
    border-radius: 4px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

 @media (max-width: 1024px) {
     .d2 {
        width: 80%;
        margin-left: auto; margin-right: auto;         
     }     
    #overlay-1 {
        width: 80%;
        float: left;
        z-index: 1;
        margin-left: 10%;
    }
    #static-1 {       
        width: 100%;
        padding: 0rem;
        float: right;
    }  
    .excerpt {
        margin: 1.0rem;
    }
    .excerpt-header {
        padding: 1.0rem;
    }
    .excerpt-body {
        padding: 0.25rem 1.0rem;
    }
}


.d3 {
    height: auto;
    padding-top: 12.0rem;
}
.d3 img {
    margin-left: 4.0rem;
    width: 50%;
}
#overlay-2 {
    margin-top: 10%;
    margin-right: 10%;
    box-shadow: 
        0px 0px 24px rgba(0,0,0,0.25),
        inset 0px 0px 0px 1px #FFD300;
    float: right;
}
@media (max-width: 1024px) {
    .d3 img {
        margin: 0;
        width: 100%;
    }
    #overlay-2 {
        margin-top: -50%;
    }
}


.d4 {   
    height: auto;
    padding-top: 12.0rem;
}
#overlay-3 {
    margin-top: 10%;
    margin-left: 10%;
    box-shadow: 
        0px 0px 24px rgba(0,0,0,0.25),
        inset 0px 0px 0px 1px #CC65C7;
	float: left;
}
#static-3 {
    margin-left: 30%;
	height: auto;
    padding: 2.0rem 4.0rem 2.0rem 15%;
}

.icons {
    position: absolute;
    left: 1.0rem;
    height: 1rem;
}

@media (max-width: 1024px) {
    .d4 {
        width: 80%;
        margin-left: auto; margin-right: auto;
    }
    #overlay-3 {
        width: 80%;
        z-index: 1;
        margin-left: 10%;
    }
    #static-3 {
        width: 100%;
        margin: 0;
        padding: 2.0rem;
        float: left;
    }
}

.footer {
	margin-top: 12.0rem;
	padding: 8.0rem 0 2.0rem;
	background-color: #FFF;
	background-image: url('../img/footer.svg'); 
	background-size: contain;
	color: #000;
	margin-left: auto; margin-right: auto;
	text-align: center;
	clear: left;
}