/*
 *  style.css
 *  
 */

body 
{
	background-color: black;
}

* 
{
	margin:0px;
	padding:0px;
	box-sizing: border-box;
}

html, body 
{
    overflow-x: hidden;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* 	
 * background
 */

/* 	
 * container to put our background images behind everything 
 */
#bg
{
	position: fixed;
    inset: 0;
    z-index: -1;  
}
  
.bg01
{
	position:absolute;
	width:100vw;
	height:100vh;
	image-rendering:pixelated;
	background-image:url(../img/bg01.png);
	animation: bg_move_y 120s infinite linear, bg_move_x 60s infinite ease-in-out;
}

.bg02 
{
	position:absolute;
	width:100vw;
	height:100vh;
	image-rendering:pixelated;
	background-image:url(../img/bg02.png);
	animation: bg_move_y 60s infinite linear, bg_move_x 30s infinite ease-in-out;
}
  
.bg03 
{
	position:absolute;
	width:100vw;
	height:100vh;
	image-rendering:pixelated;
	background-image:url(../img/bg03.png);
	animation: bg_move_y 30s infinite linear, bg_move_x 15s infinite ease-in-out;
}
  
.vignette 
{
	background: radial-gradient(circle, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 100%);
	position:absolute;
	width:100vw;
	height:100vh;
}

/*
 * animation to move the background up and down
 */
@keyframes bg_move_x 
{
	0% 	 { background-position-x:00px; }
	50%  { background-position-x:50px; }
	100% { background-position-x:00px; }
}

/*
 * animation to move the background side to side
 */
@keyframes bg_move_y 
{
	0% 	 { background-position-y: 1024px; }
	100% { background-position-y:-1024px; }
}

/*
 *	page content
 */

/*
 * hide the scrollbar
 */
::-webkit-scrollbar 
{
    width: 0px;
    background: transparent;
}

body 
{
	background-color:black;
	color:#a0a0a0;
	letter-spacing:8px;
	font-smooth: never;
	-webkit-font-smoothing : none;
	text-align:center;
}

img 
{
	user-drag: none;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	width:160px;
}

b 
{
	color:#d2738a;
	letter-spacing:8px;
}

hr 
{
	border-color:#a0a0a0;
	display:inline-block;
	width:170px;
	border-style:solid;
	box-shadow:none;
	border-bottom:0px;
}

a
{
	margin-bottom:10px;
	font-size:13px;
	text-decoration:none;
	transition: color 0.5s ease-out;
	display:inline-block;
}

a:link 
{
	color:#d2738a;
}

a:visited 
{
	color:#d2738a;
}

a:hover 
{
	color:#a0a0a0;
}

a:active 
{
	color:#d2738a;
}

/*
 * non html tag csss
 */

.descp 
{
	margin-top:0px;
	display:inline-block;
	width:450px;
	font-size:10px;
	margin-bottom:10px;
	text-align:left;
	clear:both;
	text-indent:-77px;
	letter-spacing:4px;
}

#sentence 
{
	position:absolute;
	z-index:99;
	color:gray;
	font-style:italic;
	letter-spacing:2px;
	font-size:8px;
	line-height:8px;
	width:120px;
	height:auto;
	bottom:10px;
	right:10px;
	text-align:right;
	-webkit-user-select: none; 	/* Safari */
	-ms-user-select: none; 		/* IE 10 and IE 11 */
	user-select: none; 			/* Standard syntax */
}


/*
 * my code
 */

/* centres all children inside the body */
#centered
{
    /* make body fill the full screen */
    min-height: 100vh;

    /* enable flex layout */
    display: flex;

    /* centre horizontally */
    justify-content: center;

    /* centre vertically */
    align-items: center;

	flex-direction: column;
}

.header
{
	margin: 20px;
}