@font-face {
    font-family: minecraft;
    src: url(../fonts/Minecraft.ttf)
}
@font-face {
    font-family: upheaval;
    src: url(../fonts/upheavtt.ttf)
}

/* Variables */
:root {
    --DarkGrey: #15151b;
    --OffWhite: #EFF6EE;
    --SQBlue: #0267C1;
    --SQGold: #FEC601;
    --Zomp: #2CA58D;
}

/* Default Values */
body {
    overflow: hidden;
    height: 100vh;
    margin: 0;
    padding: 0px;
    /* Background */
    min-height: 100%;
    background: linear-gradient(192deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 100%), url(../images/background\ image.png);
    background-repeat: no-repeat;
    /* Text */
    color: var(--OffWhite);
    font-family: minecraft;
}

.IP {
    width: 100%;
    text-align: center;
}
.IP h1 {
    font-family: upheaval;
    font-size: 3em;
}

a:link {
    color: var(--SQBlue);
}
a:visited {
    color: var(--SQGold);
}
mark {
    background-color: var(--SQGold);
}
button {
    font-family: minecraft;
    display: inline-block;
    text-align: center;
    margin: .5em;
    margin-bottom: .5em;
    padding: .5em;
    padding-top: .6em;
    width: 5em;
    font-size: 2em;
    border-radius: 30px;
    background: linear-gradient(145deg, #16161d, #131318);
    box-shadow:  15px 15px 30px #111116,
                -15px -15px 30px #191920;

}
#blog {
    color: var(--Zomp);
}
#shop {
    color: var(--OffWhite);
}
#discord {
    color: #7289da
}
#twitter {
    color: #1DA1F2;
}
button:hover, #blog:hover, #shop:hover, #discord:hover, #twitter:hover {
    background-color: var(--SQGold);
}
button:active {
    background-color: var(--SQGold);
}

button a:link, button a:visited {
    color: var(--DarkGrey);
    text-decoration: none;
}

.topbar {
    height: 5em;
    background-image: url(../images/Border.png);
    background-position: bottom;
    background-size: 5em;
}
.page-bg {
    height: 100vh;
    background-image: url("../images/page_background.png");
}

.logo {
    width: 30em;
    height: auto;
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px var(--DarkGrey));
}

.logo-position{
    text-align: center;
    margin-top: 2%;
    width: 100%;
}

.nav {
    text-align: center;
    position: fixed;
    background-color: var(--DarkGrey);
    padding: 1em;
    margin-left: 0;
    margin-right: 0;
    bottom: 0;
    width: 100%;
}

/* Allow background to be seen through nav bar */

.nav {
	background-color: rgba(0,0,0,0.5);
}

/* Make background cover screen and focus on bottom of tree */

body {
	background-size: cover;
	background-position: bottom;
}

/* Use media queries to select portrat (default) or landscape
   image based on width and oriantation. Optimizes network
   bandwidth usage and improves Lighthouse performance metrics.

/* Select portrait bacground image */

/* Mobile portait */
body {
	
	background-image: 
		linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.5)), 
		url("../images/tree-portrait-small.webp");
}

@media (min-width: 450px) {
	
	/* Tablet portrait */
	body {
		background-image: 
			linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.5)), 
			url("../images/tree-portrait-medium.webp");
	}
}

/* Select landscape bacground image */

@media (orientation: landscape) {
	
	/* Mobile landscape */
	body {
		background-image: 
			linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.5)), 
			url("../images/tree-landscape-small.webp");
	}
	
	@media (min-width: 800px) {
		
		/* Tablet landscape */
		body {
			background-image: 
				linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.5)), 
				url("../images/tree-landscape-medium.webp");
		}

		@media (min-width: 1248px) {
			
			/* Desktop landscape */
			body {
				background-image: 
					linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.5)), 
					url("../images/tree-landscape-large.webp");
			}
		}
	}
}