*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  background-color: #D3D3D3;
}
.rain__drop {
  -webkit-animation-delay: calc(var(--d) * 1s);
          animation-delay: calc(var(--d) * 1s);
  -webkit-animation-duration: calc(var(--a) * 1s);
          animation-duration: calc(var(--a) * 1s);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: drop;
          animation-name: drop;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  height: 30px;
  left: calc(var(--x) * 1%);
  position: absolute;
  top: calc((var(--y) + 50) * -1px);
}
.rain__drop path {
  fill: #a1c6cc;
  opacity: var(--o);
  transform: scaleY(calc(var(--s) * 1.5));
}
@-webkit-keyframes drop {
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(100vh);
  }
}
@keyframes drop {
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(100vh);
  }
}

html {
	overflow-x: hidden;
}

body {
	cursor : default;
	height: 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #D3D3D3;
    background-image: linear-gradient(#D3D3D3, #87CEEB 75%);
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
    font-size: 1.4vw;
	line-height: 1.5vw;
	width: 60%;
	margin-left: 1vw;
	color:#000;
}

h1 {
        height : 100%;
		font-family: 'Source Sans Pro', sans-serif;
		font-weight: 300;
 		font-size: 2.6vw;
		line-height: 2.8vw;
		width: 100%;
		color:#000;
      }

h2 {
        height : 100%;
		font-family: 'Source Sans Pro', sans-serif;
		font-weight: 300;
 		font-size: 1.0vw;
		line-height: 1.2vw;
		width: 100%;
		color:#000;
      }

body, html {
    cursor: url("images/nat1022.cur"), pointer;
}

a {text-decoration:none}
	a:link {color:#000}
	a:visited {color:#000; text-decoration:line-through}
	a.class1:hover {color:#000}
	a.class2:hover {color:#000}
	a:active {color:#000}
	a:hover{cursor:url("images/nat1018.cur"), pointer; text-decoration:underline}

#nav, #what, #when {
	display: inline;
}

#nav {
	max-width: 900px;
	border:0px;
	z-index:2;
}

#what {
	max-width: 900px;
	border:0px;
	z-index:2;
}

#when {
	max-width: 900px;
	border:0px;
	z-index:2;
}

@media screen and (max-width: 800px) {
  html {
  	overflow-x: hidden;
  }

  body {
    max-width: 100%;
    width: 90vw;
    font-size: 6.0vw;
    line-height: 6.3vw;
    margin-right: 1vw;
    color: #000;
    overflow-x: hidden;
    }
	
	h1 {
    max-width: 100%;
    width: 90vw;
    font-size: 8.2vw;
    line-height: 8.4vw;
    margin-right: 1vw;
    color: #000;
    }
	
	h2 {
    max-width: 100%;
    width: 90vw;
    font-size: .5vw;
    margin-right: 1vw;
    color: #000;
    }
	
}