/* style reset */
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

@font-face{
  font-family: 'orco';
  src: url('/fonts/orco.eot');
  src: url('/fonts/orco.eot?#iefix') format('embedded-opentype'),
  url('/fonts/orco.woff') format('woff'),
  url('/fonts/orco.ttf') format('truetype'),
  url('/fonts/orco.svg#webfont') format('svg');
}

@font-face{
  font-family: 'leaves';
  src: url('/fonts/leaves.eot');
  src: url('/fonts/leaves.eot?#iefix') format('embedded-opentype'),
  url('/fonts/leaves.woff') format('woff'),
  url('/fonts/leaves.ttf') format('truetype'),
  url('/fonts/leaves.svg#webfont') format('svg');
}

@font-face{
  font-family: 'sandmanbold';
  src: url('/fonts/sandmanbold.eot');
  src: url('/fonts/sandmanbold.eot?#iefix') format('embedded-opentype'),
  url('/fonts/sandmanbold.woff') format('woff'),
  url('/fonts/sandmanbold.ttf') format('truetype'),
  url('/fonts/sandmanbold.svg#webfont') format('svg');
}

/* body and elements */

body {
  background-color: #9AAA9A;
}

h1,
h2,
h3 {
  font-family: 'leaves';
  text-align: center;
  font-weight: bold;
  margin: 0.5em 0;
  color: #11AA99;
}

h1 {
  font-size: 1.75em;
}

h2 {
  font-size: 1.55em;
}

h3 {
  font-size: 1.25em;
}

p {
  font-family: 'sandmanbold';
  text-align: center;
  padding: 0.5em;
  margin: 2%;
}

img {
  display: block;
  margin: 0 auto;
  max-width: 70%;
}

.boxleft {
  background-color: #000000;
  float: left;
  border-radius: 8px;
}

.stripe {
  background-color: #000000;
  text-align: center;
  margin: 0 auto;
  width: 95%;
  padding: 0.7em 0;
  border-radius: 8px;
}

.boxleft {
  width: 40%;
  padding: 2%;
  margin: 2%;
  text-align: center;
  overflow: scroll;
  background-color: #000000;
  color: #9AAA9A;
  border-radius: 8px;
  }

.center {
  width: 95%;
  padding: 2%;
  margin: 0 auto;
  text-align: center;
  background-color: #000000;
  color: #9AAA9A;
  border-radius: 8px;
  overflow: scroll;
  }

.lyrics {
  text-align: center;
  float: left;
  width: 45%;
  height: 650px;
  background-color: #000000;
  color: #9AAA9A;
  border-radius: 8px;
  padding: 0.7em 0 0.7em 0;
  overflow: scroll;
}

.normal {
  background-color: #9AAA9A;
  padding: 3px;
  width: 100%;
  border-radius: 8px;
  margin: 2%;
  padding: 0.7em;
}

.boxright {
  width: 40%;
  padding: 0.7em;
  margin: 2%;
  float: right;
  text-align: center;
  overflow: scroll;
  background-color: #000000;
  color: #9AAA9A;
  border-radius: 8px;
  overflow: scroll;
  }

/* menu */

/* horizontal list */
#menu {
  width: 100%;
  background-color: #9AAA9A;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 1%;
}

.menu ul {
  margin: 0;
  list-style-type: none;
}

#menu li {
  font-size: 1em;
  display: inline-block;
  position: relative;
  padding: 0.8% 5% 0.8% 5%;
  border-radius: 8px;
  background-color: #333333;
  font-family: 'orco';
  margin: 2%;
}

li a {
  display: block;
  color: #11AA99;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.1em;
  text-decoration: none;
}

a {
  color: #1199BB;
  font-weight: bold;
  text-decoration: none;
}

a:visited {
  color: #11AA99;
}

a:hover {
  color: #22FF55;
}

a:active {
  text-decoration: underline;
}

/* menu hover */
#menu li:hover {
  background-color: #000000;
}

/* gallery */
 /* The grid: Four equal columns that floats next to each other */
.imgleft {
  width: 35%;
  text-align: center;
  margin: 2%;
  float: left;
  overflow: scroll;
  background-color: #000000;
  color: #9AAA9A;
  border-radius: 8px;
  padding: 1%;
}

/* Style the images inside the grid */
.imgleft img {
  opacity: 0.7;
  cursor: pointer;
}

.imgleft img:hover {
  opacity: 1;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
.imgright {
  text-align: center;
  padding: 0.7em;
  margin: 2%;
  overflow: scroll;
  background-color: #000000;
  color: #9AAA9A;
  border-radius: 8px;
  width: 50%;
  display: none;
  float: right;
  position: relative;
}

/* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 1em;
  right: 2em;
  color: #119999;
  font-size: 2em;
  cursor: pointer;
}

/* start media query */
@media only screen and (max-width: 900px) {

ul li, ul li a {
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  float: none;
  display: block;
}

li a {
  display: block;
  font: bold 0.9em;
  padding: 12px 20px;
  width: 60px;
  color: #000000;
  text-transform: uppercase;
  text-decoration: none;
  border-right: 1px solid #333333;
}

#menu li {
  border: none;
  box-shadow: none;
  border-radius: 0;
  margin: 0%;
  position: static;
  font-size: 1.5em;
  padding: 0;
}

.left, .right, .center, .boxleft, .boxright, .lyrics, .normal, .imgleft, .imgright, .menu, .stripe {
  border-radius: 0px;
  margin: 0 auto;
  float: none;
  width: 100%;
  padding: 0;
}
}

/* animate font  */
/* Base */
h1 {
  color: hsl(0, 0%, 28%);
  font-size: 35px;
  font-weight: bold;
  font-family: monospace;
  letter-spacing: 3px;
  cursor: pointer;
  text-transform: uppercase;
}

h1 {
  padding: 35px;
  background: linear-gradient(to right, hsl(0, 0%, 30%) 0, hsl(0, 0%, 95%) 10%, hsl(0, 0%, 30%) 20%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s infinite linear;
}

@keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 600px;
  }
  95% {
    background-position: 600px;
  }
}