/*-- CSS --*/

/*-- Core Elements --*/


body {
    background-color: black;
    background-image: url(../Images/img_bg.jpg);
    background-repeat: no-repeat;
    background-size: auto;
}

li {
	display: inline-block;
	padding: 10px;
}

h1 {
  	font-size: 26pt;
}

h5 {
	font-size: 8pt;
}

img {
	margin: 0 auto;
}


/*-- Class CSS --*/


.list {
	width: 250px;
	display: inline;
	padding: 0;
	position: relative;
	bottom: 30;
}

.container {
	margin: 20px;
	padding: 10px;
	text-align: center;
}


/*-- ID CSS --*/


#glyph {
	position: relative;
	top: 75;
}

#main {	
}

#name-txt, #footer-txt {
    color: white;
    display: center;
    font-family: thin;
}

#footer {
	position: relative;
	top: 5vw;
}


/*-- Asset Rules --*/


@font-face {
	font-family: 'thin';
    src: url('../Fonts/thin-webfont.woff2') format('woff2'),
         url('../Fonts/thin-webfont.woff') format('woff'),
         url('../Fonts/thin-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
}


/*-- Media Queries --*/


/* iPads (Landscape) ----------- */
@media screen 
and (min-width : 1366px) 
and (max-height : 1024px) 
and (orientation : landscape) {
/* Styles */

		h1 {
	font-size: 6vw;
	}
	
	h5 {
	font-size: 1vw;
	}
	
	img {
	height: 20%;
	}
	
	.container {
	margin: 5px;
	padding: 2px;
	}
	
	.list {
	width: 250px;
	display: inline;
	padding: 0;
	position: relative;
	bottom: 0;
	}
	
	#name {
	position: relative;
	top: 6vw;
	}
	
	#social {
	position: relative;
	top: 4vw;
	}
	
	#glyph {
	position: relative;
	top: 75px;
	}
	
	#footer {
	position: relative;
	top: 28vw;
	}
	
}


/* iPad Pro (Portrait) ----------- */
@media screen 
and (min-width : 1024px) 
and (max-height : 1366px) 
and (orientation : portrait) {
/* Styles */
	
	body {
    background-size: cover;
	}
	
	h1 {
	font-size: 6vw;
	}
	
	h5 {
	font-size: 1vw;
	}
	
	img {
	height: 20%;
	}
	
	.container {
	margin: 5px;
	padding: 2px;
	}
	
	.list {
	width: 250px;
	display: inline;
	padding: 0;
	position: relative;
	bottom: 0;
	}
	
	#name {
	position: relative;
	top: 10vw;
	}
	
	#social {
	position: relative;
	top: 10vw;
	}
	
	#glyph {
	position: relative;
	top: 75px;
	}
	
	#footer {
	position: relative;
	top: 70vw;
	}
	
}


/* iPads (Landscape) ----------- */
@media screen 
and (min-width : 1024px) 
and (max-height : 768px) 
and (orientation : landscape) {
/* Styles */

		h1 {
	font-size: 6vw;
	}
	
	h5 {
	font-size: 1vw;
	}
	
	img {
	height: 20%;
	}
	
	.container {
	margin: 5px;
	padding: 2px;
	}
	
	.list {
	width: 250px;
	display: inline;
	padding: 0;
	position: relative;
	bottom: 0;
	}
	
	#name {
	position: relative;
	top: 6vw;
	}
	
	#social {
	position: relative;
	top: 4vw;
	}
	
	#glyph {
	position: relative;
	top: 75px;
	}
	
	#footer {
	position: relative;
	top: 22vw;
	}
	
}


/* Pixel 2 XL (landscape) ----------- */
@media only screen 
and (max-width : 823px)
and (max-height : 411px)
and (orientation : landscape) {
/* Styles */

	h1 {
	font-size: 4vw;
	}
	
	h5 {
	font-size: 1.5vw;
	}
	
	img {
	height: 30%;
	}
	
	.container {
	margin: 5px;
	padding: 2px;
	}
	
	.list {
	width: 250px;
	display: inline;
	padding: 0;
	position: relative;
	bottom: 0;
	}
	
	#glyph {
	position: relative;
	top: 10px;
	}
	
	#footer {
	position: relative;
	top: 5vw;
	}
	
}


/* iPhone X (landscape) ----------- */
@media only screen 
and (max-width : 812px)
and (max-height : 375px)
and (orientation : landscape) {
/* Styles */

	h1 {
	font-size: 4vw;
	}
	
	h5 {
	font-size: 1.5vw;
	}
	
	img {
	height: 30%;
	}
	
	.container {
	margin: 5px;
	padding: 2px;
	}
	
	.list {
	width: 250px;
	display: inline;
	padding: 0;
	position: relative;
	bottom: 0;
	}
	
	#glyph {
	position: relative;
	top: 10px;
	}
	
	#footer {
	position: relative;
	top: 1vw;
	}
	
}


/* iPads (portrait) ----------- */
@media screen 
and (min-width : 768px) 
and (max-height : 1024px) 
and (orientation : portrait) {
/* Styles */

		h1 {
	font-size: 6vw;
	}
	
	h5 {
	font-size: 2vw;
	}
	
	img {
	height: 30%;
	}
	
	.container {
	margin: 5px;
	padding: 2px;
	}
	
	.list {
	width: 250px;
	display: inline;
	padding: 0;
	position: relative;
	bottom: 0;
	}
	
	#name {
	position: relative;
	top: 2vw;
	}
	
	#social {
	position: relative;
	top: 2vw;
	}
	
	#glyph {
	position: relative;
	top: 30px;
	}
	
	#footer {
	position: relative;
	top: 50vw;
	}
	
}


/* iPhone 6/7/8 Plus (Landscape) ----------- */
@media only screen
and (max-width : 736px)
and (max-height : 414px)
and (orientation : landscape) {
/* Styles */
	
	h1 {
	font-size: 4vw;
	}
	
	h5 {
	font-size: 1.5vw;
	}
	
	img {
	height: 30%;
	}
	
	.container {
	margin: 5px;
	padding: 2px;
	}
	
	.list {
	width: 250px;
	display: inline;
	padding: 0;
	position: relative;
	bottom: 10;
	}
	
	#glyph {
	position: relative;
	top: 15px;
	}
	
	#footer {
	position: relative;
	top: 5vw;
	}
	
}


/* Pixel 2 (landscape) ----------- */
@media only screen 
and (max-width : 731px)
and (max-height : 411px)
and (orientation : landscape) {
/* Styles */

	h1 {
	font-size: 4vw;
	}
	
	h5 {
	font-size: 1.5vw;
	}
	
	img {
	height: 30%;
	}
	
	.container {
	margin: 5px;
	padding: 2px;
	}
	
	.list {
	width: 250px;
	display: inline;
	padding: 0;
	position: relative;
	bottom: 0;
	}
	
	#glyph {
	position: relative;
	top: 10px;
	}
	
	#footer {
	position: relative;
	top: 5vw;
	}
	
}


/* iPhone 6/7/8 (landscape) ----------- */
@media only screen 
and (max-width : 667px)
and (max-height : 375px)
and (orientation : landscape) {
/* Styles */

	h1 {
	font-size: 4vw;
	}
	
	h5 {
	font-size: 1.5vw;
	}
	
	img {
	height: 25%;
	}
	
	.container {
	margin: 5px;
	padding: 2px;
	}
	
	.list {
	width: 250px;
	display: inline;
	padding: 0;
	position: relative;
	bottom: 0;
	}
	
	#glyph {
	position: relative;
	top: 10px;
	}
	
	#footer {
	position: relative;
	top: 40;
	}
	
}


/* Galaxy S5 (landscape) ----------- */
@media only screen 
and (max-width : 640px)
and (max-height : 360px)
and (orientation : landscape) {
/* Styles */

	h1 {
	font-size: 4vw;
	}
	
	h5 {
	font-size: 1.5vw;
	}
	
	img {
	height: 25%;
	}
	
	.container {
	margin: 5px;
	padding: 2px;
	}
	
	.list {
	width: 250px;
	display: inline;
	padding: 0;
	position: relative;
	bottom: 0;
	}
	
	#glyph {
	position: relative;
	top: 10px;
	}
	
	#footer {
	position: relative;
	top: 40;
	}
	
}


/* iPhone 5/SE (landscape) ----------- */
@media only screen 
and (max-width : 568px)
and (max-height : 320px)
and (orientation : landscape) {
/* Styles */

	h1 {
	font-size: 4vw;
	}
	
	h5 {
	font-size: 1.5vw;
	}
	
	img {
	height: 25%;
	}
	
	.container {
	margin: 5px;
	padding: 2px;
	}
	
	.list {
	width: 250px;
	display: inline;
	padding: 0;
	position: relative;
	bottom: 0;
	}
	
	#glyph {
	position: relative;
	top: 10px;
	}
	
	#footer {
	position: relative;
	top: 40;
	}
	
}


/* iPhone 6/7/8 Plus (portrait) ----------- */
@media only screen
and (max-width : 414px)
and (max-height : 736px)
and (orientation : portrait) {
/* Styles */
	
	h1 {
	font-size: 11vw;
	}
	
	h5 {
	font-size: 2vw;
	}
	
	img {
	height: 25%;
	}
	
	.container {
	margin: 5px;
	padding: 2px;
	}
	
	.list {
	width: 250px;
	display: inline;
	padding: 0;
	position: relative;
	bottom: 10;
	}
	
	#glyph {
	position: relative;
	top: 10px;
	}
	
	#footer {
	position: relative;
	top: 30vw;
	}
	
}


/* Pixel 2 XL (portrait) ----------- */
@media only screen
and (max-width : 411px)
and (max-height : 823px) 
and (orientation : portrait) {
/* Styles */
	
	h1 {
	font-size: 11vw;
	}
	
	h5 {
	font-size: 2vw;
	}
	
	img {
	height: 25%;
	}
	
	.container {
	margin: 5px;
	padding: 2px;
	}
	
	.list {
	width: 250px;
	display: inline;
	padding: 0;
	position: relative;
	bottom: 10;
	}
	
	#glyph {
	position: relative;
	top: 10px;
	}
	
	#footer {
	position: relative;
	top: 51vw;
	}
	
}


/* Pixel 2 (portrait) ----------- */
@media only screen
and (max-width : 411px)
and (max-height : 731px) 
and (orientation : portrait) {
/* Styles */
	
	h1 {
	font-size: 11vw;
	}
	
	h5 {
	font-size: 2vw;
	}
	
	img {
	height: 25%;
	}
	
	.container {
	margin: 5px;
	padding: 2px;
	}
	
	.list {
	width: 250px;
	display: inline;
	padding: 0;
	position: relative;
	bottom: 10;
	}
	
	#glyph {
	position: relative;
	top: 10px;
	}
	
	#footer {
	position: relative;
	top: 35vw;
	}
	
}


/* iPhone X (Portrait) ----------- */
@media only screen 
and (max-width : 375px)
and (max-height : 812px) 
and (orientation : portrait) {
/* Styles */

	h1 {
	font-size: 11vw;
	}
	
	h5 {
	font-size: 2vw;
	}
	
	img {
	height: 30%;
	}
	
	.container {
	margin: 5px;
	padding: 2px;
	}
	
	.list {
	width: 250px;
	display: inline;
	padding: 0;
	position: relative;
	bottom: 0;
	}
	
	#name {
	position: relative;
	top: 2vw;
	}
	
	#social {
	position: relative;
	top: 2vw;
	}
	
	#glyph {
	position: relative;
	top: 10px;
	}
	
	#footer {
	position: relative;
	top: 50vw;
	}
	
}


/* iPhone 6/7/8 (portrait) ----------- */
@media only screen
and (max-width : 375px)
and (max-height : 667px) 
and (orientation : portrait) {
/* Styles */
	
	h1 {
	font-size: 11vw;
	}
	
	h5 {
	font-size: 2vw;
	}
	
	img {
	height: 25%;
	}
	
	.container {
	margin: 5px;
	padding: 2px;
	}
	
	.list {
	width: 250px;
	display: inline;
	padding: 0;
	position: relative;
	bottom: 10;
	}
	
	#glyph {
	position: relative;
	top: 10px;
	}
	
	#footer {
	position: relative;
	top: 30vw;
	}
	
}


/* Galaxy S5 (portrait) ----------- */
@media only screen
and (max-width : 360px)
and (max-height : 640px) 
and (orientation : portrait) {
/* Styles */
	
	h1 {
	font-size: 11vw;
	}
	
	h5 {
	font-size: 2vw;
	}
	
	img {
	height: 25%;
	}
	
	.container {
	margin: 5px;
	padding: 2px;
	}
	
	.list {
	width: 250px;
	display: inline;
	padding: 0;
	position: relative;
	bottom: 10;
	}
	
	#glyph {
	position: relative;
	top: 10px;
	}
	
	#footer {
	position: relative;
	top: 30vw;
	}
	
}


/* iPhone 5/SE (portrait) ----------- */
@media only screen
and (max-width : 320px)
and (max-height : 568px) 
and (orientation : portrait) {
/* Styles */
	
	h1 {
	font-size: 11vw;
	}
	
	h5 {
	font-size: 2vw;
	}
	
	img {
	height: 25%;
	}
	
	.container {
	margin: 5px;
	padding: 2px;
	}
	
	.list {
	width: 250px;
	display: inline;
	padding: 0;
	position: relative;
	bottom: 10;
	}
	
	#glyph {
	position: relative;
	top: 10px;
	}
	
	#footer {
	position: relative;
	top: 30vw;
	}
	
}