section {  
background-image: url(book.jpg); 
background-attachment: scroll;
background-size: : cover;
background-repeat: no-repeat;
color:white;
padding: 1%;
overflow: hidden;
}


body{
  margin: 0px;
}

div {
    width: 1000px;
    height: 700px;

  }

#Title{
font-family: 'Creepster', cursive;
color:red;
width: 1415px;
height: 700px;

text-align: left 10px;
text-align: top;
font-size: 35px;
padding: 10%

text-transform: uppercase;
font-weight: bold;
line-height: 0.75;

background-image: url(band.jpg),url(book.jpg);
background-size: auto 50%,cover;
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: scroll,fixed;
background-blend-mode: multiply;

}

/*title display/*/
#Title  h1 {
  display: block;
}

#Title h1:not(.light) {
  opacity: 0;
  -webkit-animation: flashText 1.25s ease-out alternate infinite;
          animation: flashText 1.25s ease-out alternate infinite;
}

#Title h1.light {
  position: relative;
  display: inline-block;
}

@-webkit-keyframes flash {
  to {
    opacity: 0;
  }
}

@keyframes flash {
  to {
    opacity: 0;
  }
}
@-webkit-keyframes flashText {
  to {
    opacity: 0.5;
  }
}
@keyframes flashText {
  to {
    opacity: 0.5;
  }
}

h3{
font-family: 'Cabin Sketch', cursive;
font-size: 150px;


}

#Intro{
font-family: 'Cabin Sketch', cursive;
font-size: 20px;
color:black;
font-weight: bold;
text-align: left;
background-image: url(goon.jpg),url(book.jpg);
background-size: auto 50%,cover;
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: scroll,fixed;
background-blend-mode: multiply;
}

#Intro h2{
font-family: 'Cabin Sketch', cursive;
  font-size: 100px;
  color: red;

}

#pick{
/*  background-image: url(p1.jpg),url(fire.jpg),linear-gradient(darkred,red);
  background-blend-mode: normal;
  background-size: 10%,cover,40px;
  background-position: center;
  background-attachment:scroll, scroll; 
  background-position: center;
  background-repeat: no-repeat;*/
  position: relative;
  font-family: 'Cabin Sketch', cursive;
  font-size: 25px;
  text-align: left;
  background-image: url(fire.jpg) ,linear-gradient(darkred,red);
  background-size: cover;
  background-blend-mode: multiply;

}


#pick h1{
  font-size: 70px;
}
.container {
    width: auto;
    height: 700px;
}
.container img {
    width: 150px;
    height:200px;
}

.fig1:hover img {
 transition: 0.5s ease-out;
 transform: scale( 1.10) rotate( 15deg );
}

.fig1 img {
 transition: .5s ease-in;
  border-radius: 120px;

}
#pick h2 {
  font-size: 22px;
  text-align: right;
      font-family: 'Cabin Sketch', cursive;

}


#ring{
  color: black; 
  width: auto;
  height: 800px;
  background-image:  url(metal.jpg);
  background-size:  cover;
  background-size: 100%;
  font-size: 25px;
font-family: 'UnifrakturCook', cursive;

}


.fig2:hover img {
transform: scale(1.5);
}

.fig2 img {
 transition: transform .5s; /* Animation */
  border-radius: 8px;
  size: 100%;
  display: block;  
  margin-left: 80%; 
  margin-bottom:90px
}

#shoe{
  background-image: url(dirt.jpg);
  background-size: cover;
      font-family: 'Cabin Sketch', cursive;
}

#shoe h1{
  font-size: 70px;
}
#shoe h2{
  font-size: 32px;
}



.fig3:hover img {
  filter: none;
  -webkit-filter: grayscale(0%);}

.fig3 img {
 filter: grayscale(100%);
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */

}



#glasses{
    font-family: 'Cabin Sketch', cursive;
  background-image: url(g1.jpg), url(floorboards.jpg);
  height: 900px;
  background-attachment: scroll;
  background-position: top right, center;
  background-blend-mode: multiply;
}

#glasses h1{
  color: #ff2d00;
  font-size: 50px;
  font-family: 'Nosifer', cursive;

}

#glasses p{
  color: #ffffff;
  font-size: 20px;
  font-family: 'Nosifer', cursive;

}

#strap{
      font-family: 'Cabin Sketch', cursive;

  background-image: url(blackground.png);
  background-size: cover;
  background-attachment: scroll;
  font-size: 40px;

}

.fig4:hover img {
  filter: invert(100%);
  -webkit-filter: invert(100%);}

.fig4 img {
 filter: none;

}


.fig5:hover img {
  filter: saturate(210%);
  -webkit-filter: saturate(210%)}

.fig5 img {
 filter: none;

}


#phone{
    font-family: 'Cabin Sketch', cursive;
    font-size: 40px;
    font-family: 'Roboto Mono', monospace;

    background-image: url(metal.jpg) ,linear-gradient(to right, blue, lightblue);
    background-size:  cover;
    background-blend-mode: multiply;

}


.fig6:hover img {
    -webkit-filter: blur(4px);
    filter: blur(4px);

}


#award{
      color: #ffd800;
      font-family: 'Cabin Sketch', cursive;
      background-image: radial-gradient( white,purple);
      background-blend-mode: multiply;
      font-size: 40px;

}

#award h1{
  color: #ffd800;
  font-size: 60px;
}

.fig7:hover img {
 -webkit-filter: brightness(1.5);
  filter: brightness(1.5);

}