/* Fonts from Google Fonts - more at https://fonts.google.com */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

*{ box-sizing: border-box; }
body{ margin: 0; font-family: sans-serif; }

.gfx{
width: 100%;
margin: 0 auto;
max-width: 600px;
display:block;
padding-bottom: 5px;
}

.gfx1 {
width: 39%;
margin: 0 auto;
max-width: 600px;
display:block;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 10px;
}

.gfx2{
width: 100%;
margin: 0 auto;
max-width: 600px;
display:block;
padding-bottom: 15px;
}

p{
  margin-top: 0;     
  max-width: 1100px;
  margin: 0 auto;
  color: white;
  font-family: 'Muli', Helvetica, sans-serif;
  padding-left: 10px;
}
h1{ 
  max-width: 1100px; 
  margin: 0 auto; 
  text-align: center; 
  color: white;
  padding-bottom: 25px;
  font-family: 'Muli', Helvetica, sans-serif;
  font-size: 3em;
}

h2{
  max-width: 1100px; 
  margin: 0 auto; 
  text-align: center; 
  color: white;
  padding-bottom: 25px;
  font-family: 'Muli', Helvetica, sans-serif;
}

nav{ 
  position: fixed; 
  padding: vw;
  font-family: verdana,sans-serif;
  color: white;
  text-align: center;
  width: 100%;
  min-width: 150px;
  line-height: 2em;
  background-color: black;
  box-shadow: 0px 5px 5px rgba( 0, 0, 0, 0.3);
  font-size: 18px;
  display:block;
}

nav a.three { color: white; text-decoration: none;}

a.one:link, a:visited {
  background-color: white;
  color: black;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: block;
  width: 100%;
}

a.one:hover, a:active {
  background-color: red;
  }
  
  a.two:link, a:visited {
  background-color: white;
  color: black;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: block;
  width: 100%;
}

a.two:hover, a:active {
  background-color: blue;
  }
  

section{ 
  width: 100%;
  margin:0 auto;
  min-height: 140vh; 
  max-width: 1200px;
  padding: 5em 10px 10px 10px; 
}

.size{
  margin-left: auto;
  margin-right: auto;
  }

  .rockstar{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width:100%
}
.responsive {
    max-width: 100%;
    height: auto;
}

#intro{
  background-image:url(../images/Bonfire_Flames.JPG);
  background-size: cover;
}
#early{ background-color: black;}
#music{ background-color: blue; }
#youtube{background-color: red; }


@media screen (max-width: 550px){
   .container{
   width:100%;
   min-width:100%;}
   
   nav{ 

#intro{
  background-image:url(../images/Bonfire_Flames.JPG);
  background-size: cover;
  }
  .responsive {
    max-width: 100%;
    height: auto;
}
#intro img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:30%;
    }
    
#early img{

  
  .rockstar{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width:100%
}
#ninja{
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1em;
  padding-bottom: 1.5em;
  padding-right: 10px;
  padding-left: 10px;
  width:60%
}
.size{
  margin-left: auto;
  margin-right: auto;
  }
  
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:30%;
}

#early{ background-color: black;}
#music{ background-color: blue;}
#youtube{background-color: red; }
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: local('Lora Regular'), local('Lora-Regular'), url(https://fonts.gstatic.com/s/lora/v12/0QIvMX1D_JOuMwr7I_FMl_E.woff2) format('woff2');

  @font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 400;
  src: local('Muli Regular'), local('Muli-Regular'), url(https://fonts.gstatic.com/s/muli/v12/7Auwp_0qiz-afTLGLQjUwkQ.woff2) format('woff2');
  
  @font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v8/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');