@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,700,300);
@import url(https://fonts.googleapis.com/css?family=Squada+One);
@import url(https://fonts.googleapis.com/css?family=Seaweed+Script);

* {
 font-family: Futura, "Trebuchet MS", Arial, sans-serif;
}

html{  
	background-color: black;
  background: url("img/milkyway/2017-05-29.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

h1 {
	color: black;
	text-align: center;
	font-size: 40px;
}

h4 {
	color: white;
	text-align: right;
	font-size: 10px;
	position: fixed;
	bottom: 0;
	right: 10px;
}

.star {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 2px;
 height: 2px;
 background: #F6F6F6;
 overflow: hidden;
 z-index: 2;
 animation: glitter 6s linear 0s infinite normal;
 -webkit-animation: glitter 6s linear 0s infinite normal;
 -moz-animation: glitter 6s linear 0s infinite normal;
 -ms-animation: glitter 6s linear 0s infinite normal;
 -o-animation: glitter 6s linear 0s infinite normal;
}
.star-top,.star-bottom{
 position: relative;
 display: block;
}
.star-top:before , 
.star-top:after ,
.star-bottom:before ,
.star-bottom:after{
 content: "";
 width: 6px;
 height: 6px;
 border-radius: 50%;
 position: absolute;
}
/*CSS3 pseudo class for positioning curves*/
.star-top:before {
 top: -3px;
 left: -3px;
}
.star-top:after {
 bottom: -3px;
 left: 3px;
}
.star-bottom:before {
 top: 3px;
 left: -3px;
}
.star-bottom:after {
 top: 3px;
 left: 3px;
}
/*CSS3 keyframes for glittering effect*/
@-webkit-keyframes glitter {
 0%   { -webkit-transform: scale(1.0); opacity: 1; }
 25%  { -webkit-transform: scale(0.5); opacity: 0; }
 50%  { -webkit-transform: scale(1.0); opacity: 1; }
 75%  { -webkit-transform: scale(0.5); opacity: 0; }
 100% { -webkit-transform: scale(1.0); opacity: 1; }
}
@-moz-keyframes glitter {
 0%   { -moz-transform: scale(1.0); opacity: 1; }
 25%  { -moz-transform: scale(0.5); opacity: 0; }
 50%  { -moz-transform: scale(1.0); opacity: 1; }
 75%  { -moz-transform: scale(0.5); opacity: 0; }
 100% { -moz-transform: scale(1.0); opacity: 1; }
}

.script {
  font-family: 'Seaweed Script', cursive;
  color: #fff;
  text-align: center;
  font-size: 40px;
  font-size: 2.5vw;
  position: relative;
  margin:0;
  top:5;
}

.script:before {
  content:"";
  display: block;
  position: absolute;
  z-index:-1;
  top: 50%;
  width: 50%;
  text-align: center;
}

/* START LOGO AND MENU */
#logo {
  font-family: 'Open Sans', sans-serif;
  color: #E1E1E1;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 110px;
  font-size: 6vw;
  font-weight: 800;
  letter-spacing: -3px;
  letter-spacing: -.1vw;
  line-height: 1;
  position: relative;
  text-shadow: #555 3px 2px 0;
  text-shadow: #555 .15vw .1vw 0;
}
#logo:after {
  content:"Astrophotography";
  position: absolute;
  left: 4px;
  left: .2vw;
  top: 24px;
  top: 1.3vw;  
}
#logo:after {
  /*background: url(img/css/crossed_stripes.png) repeat;
  background-image: -webkit-linear-gradient(left top, transparent 0%, transparent 25%, #555 25%, #555 50%, transparent 50%, transparent 75%, #555 75%);
  background-size: 4px 4px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  */
  z-index: -3;
  display: block;
  
}
#menu {
  width: 75%;
  width: 75vw;
  /*
  height: 42px;
  height: 5vh;
  */
  list-style: none;
  margin: 10px 0 0 0; padding: 25px 10px;
  margin: 10px 0 0 0; padding: 1.5vh .1vw;
  border-top: 4px double #AAA;
  border-bottom: 4px double #AAA;
  position: relative;
  text-align: center;
}
#menu li {
  display: inline-block;
  width: 17%;
  width: 12vw;
  max-width: 175px;
  margin: 5px 10px;
  margin: 5px .6vw;
  position: relative;
  -webkit-transform: skewy(-3deg);
  -webkit-backface-visibility: hidden;
  -webkit-transition: 200ms all;
}
#menu li a {
  white-space: nowrap;
  text-transform: uppercase;
  font-family: 'Squada One', cursive;
  font-weight: 800;
  display: block;
  background: #FFF;
  padding: 2px 10px;
  color: #333;
  font-size: 26px;
  font-size: calc(4px + 1vw);
  text-align: center;
  text-decoration: none;
  position: relative;
  z-index: 1;
  text-shadow: 
        1px 1px 0px #FFF, 
        2px 2px 0px #999,
        3px 3px 0px #FFF;
    background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.05) 100%);
    -webkit-transition: 1s all;
    background-image: -webkit-linear-gradient(left top, 
        transparent 0%, transparent 25%, 
        rgba(0,0,0,.15) 25%, rgba(0,0,0,.15) 50%, 
        transparent 50%, transparent 75%, 
        rgba(0,0,0,.15) 75%);
  background-size: 4px 4px;
    box-shadow: 
        0 0 0 1px rgba(0,0,0,.4) inset, 
        0 0 20px -5px rgba(0,0,0,.4),
        0 0 0px 3px #FFF inset;
}
#menu li:hover {
    width: 18%;
    width: 13vw;
    max-width: 190px;
    margin: 5px 10px;
    margin: 5px .1vw;
}
#menu a:hover {
  color: #0000ff;
}
#menu li:after,
#menu li:before {
  content: '';
  position: absolute;
  width: 4.25%;
  width: 4.00vw;
  max-width: 47.5px;
  height: 100%;
  background: #BBB;
  -webkit-transform: skewY(8deg);
  x-index: -3;
    border-radius: 4px;
}
#menu li:after {
    background-image: -webkit-linear-gradient(left, transparent 0%, rgba(0,0,0,.4) 100%);
  right: 0;
  top: -4px; 
}
#menu li:before {
  left: 0;
  bottom: -4px;
    background-image: -webkit-linear-gradient(right, transparent 0%, rgba(0,0,0,.4) 100%);
}
/* END LOGO AND MENU */

/* START PHOTO GALLERY */
.frame			{
  display: inline-block;
  text-align:center;
  width:75%;
  width:75vw;
  margin: 0 11%;
  margin: 0 11vw;
}
.frame a {
  padding:1px;
  margin:5px;
  color: #E1E1E1;
}
.frame a:hover {
  color: #CCC;
}
.dirlist {
  margin: 5px;
  padding: 1px;
  width: 200px;
  color: #E1E1E1;
  font-size: 20px;
  font-size: 2vw;
}
.dirlist:hover {
  color: #CCC;
}

.photo-link		{ 
  padding:1px;
  margin:5px;
  border:1px solid #AAA;
  width:200px;
  height:auto;
  background-color: #000;
}
.photo-link:hover	{ border-color:#CCC; }
/* END PHOTO GALLERY */