:root {
  --transition: 0.4s ease-in;
}

/* Smooth scroll effect */
html {
  scroll-behavior: smooth;
}

/*MAIN*/

body {background-color: #000000; margin: 0; padding: 0; }

a.guitar:hover {cursor:url("../guitar-orange.gif"), url("../guitarorange.cur"), pointer; }

a.mattias:link, a.mattias:visited {color: #ffffff; text-decoration: none; font-family: Courier, monospace; }
a.mattias:hover {text-decoration: underline; }

.icon-bar {
  position: fixed;
  display: inline-block;
  bottom: 0;
  left: 0;
  	z-index: 99;	
}

.icon-bar a {
  font-size: 28px; 
  display: inline-block;
  text-align: center;
  transition: all 0.3s ease;
}

.icon-bar a:hover {
    background: #182536;
}

.fa-brands  {
	padding: 0.5em; 
    	width: 30px;
    	text-align: center;
    	text-decoration: none;
}



.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #232323;
  color: white;
}


.youtube {
  background: #bb0000;
  color: white;
}

.instagram {
  background: #3f729b;
  color: white;
}

#space {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index:-1000;
}

#planet {
width: 100%;
height: 100%;
background: -webkit-radial-gradient(rgba (0,0,0,0) 30%, rgba(0, 0,0, 0.6) 80%), url("../img/fgl-cave-background-6000.jpg");
background: radial-gradient(rgba(0, 0, 0, 0) 30%, rgba(0,0,0, 0.6) 80%), url("../img/fgl-cave-background-6000.jpg");
background-size: cover;
background-repeat: no-repeat;  
background-position: 50% 50%;        
}



.badge {width: 60%; margin: 0 auto; text-align: center; }
h1 {padding:0; margin: 0; font-family:"Rubik Dirt", system-ui; font-size: 5em; font-weight: 400; text-transform: uppercase;
  background: -webkit-linear-gradient(354deg, rgba(242,179,66,1) 15%, rgba(255,255,255,1) 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}

.copyright {display: block; width: 80%; margin: 0 auto 10px auto;  text-align: center; padding-top: 10px; }
.roger {width: 260px; position: fixed; bottom: 20px; right: 40px; color: #ffffff; font-family: Arial; font-size: 0.9em; font-weight: 900; padding-bottom: 12px; }


#navi a {
	font-size: 2.1em;
	font-family: "Rubik Dirt", system-ui;
	color: #fff;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	text-decoration: none;
}

#navi a:hover, #navi .selected {text-decoration: none; color: #F2B342;
}

#navi ul {
list-style:none; 
margin: 0; 
padding: 0; 
}

@media only screen and (min-width: 1091px)  {
#navi { position: relative;  top: 4em;}

.lineright {	float: left; width: 19%; text-align: right; border-right: 3px solid #eee; padding-right: 1em; }
.lineleft {	float: right; width: 21%; text-align: left; border-right: 0; border-left: 3px solid #eee; padding-left: 1em; }

}

@media only screen and (min-width: 841px) and (max-width: 1090px) {
.copyright {display: inline-block; width: 23%; font-size: 0.9em; text-align: right; padding: 1.5em 0; margin-top: 0.5em;  }
.badge {display: inline-block; width: 65%; float: right; padding-right: 2em;  margin-top: 0.5em; }
h1 {font-size: 4em;  font-weight: 400; }
#navi { position: relative;  top: 4em;}
#navi a {font-size: 1.5em;}
.lineright {	float: left; width: 22%; text-align: right; border-right: 3px solid #eee; padding-right: 1em; }
.lineleft {	float: right; width: 22%; text-align: left; border-right: 0; border-left: 3px solid #eee; padding-left: 1em; }
}


@media only screen and (min-width: 300px) and (max-width: 840px)  {

#navi { position: relative;  top: 4em;}
.badge {width: 100%; }
h1 {font-size: 3em;  font-weight: 400; }
#navi a {font-size: 1.2em; }
#navi li {padding: 0.15em 0.7em 0.15em 0; }

.lineright, .lineleft {width: 40%; text-align: right; border-right: 3px solid #eee; }

.icon-bar {position: fixed; bottom: 10%; left: auto; right: 0; width: 50px; }
.icon-bar a { display: block;  font-size: 22px; padding: 6px; margin-bottom: 4px; }
.fa-brands  {padding: 6px; width: 18px; }
}


@media (min-width: 300px)
  and (max-width: 840px) 
  and (orientation: landscape)  { 
.copyright {display: inline-block; width: 27%; font-size: 0.8em; text-align: right; padding: 1.5em 0; margin-top: 0.5em;  }
.badge {display: inline-block; width: 65%; float: right; padding-right: 1.5em;  margin-top: 0.5em; }
h1 {font-size: 2.6em;  font-weight: 400; }

#navi {position: relative;  top: 1.5em;}

.lineright {	float: left; width: 25%; text-align: right; border-right: 3px solid #eee; padding-right: 0.5em; }
.lineleft {display: inline-block; 	float: right; width: 25%; text-align: left; border-right: 0; border-left: 3px solid #eee; padding-left: 0.5em; }

.icon-bar { position: fixed; top: 60px; left: 0; width: 40px; }
.icon-bar a { display: block;  font-size: 18px; padding: 4px; margin-bottom: 4px; }
.fa-brands  {padding: 6px; width: 18px; }
}