@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
* {
  font-family: 'Open Sans', sans-serif;
}

body {
	margin: 0;
	padding: 0;

  background: linear-gradient(0deg, rgba(133, 110, 78, 1) 0%, rgba(47, 66, 91, 1) 25%, rgba(18, 33, 47, 1) 75%),url(stars.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100%;
  background-blend-mode: screen;
}

.signupSection {
  background: #1f2e3e;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 99;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 1080px;
  height: 800px;
  text-align: left;
  display: flex;
  color: white;
  box-shadow: 3px 10px 20px 5px rgba(0, 0, 0, .5);
}

.loginSection {
  background: #1f2e3e;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 99;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 540px;
  height: 800px;
  text-align: center;
  justify-content: center; 
  display: flex;
  color: white;
  box-shadow: 3px 10px 20px 5px rgba(0, 0, 0, .5);
}

.infoSection {
  background: #1f2e3e;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 99;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 1080px;
  height: 800px;
  text-align: center;
  color: white;
  box-shadow: 3px 10px 20px 5px rgba(0, 0, 0, .5);
}

.title {
	background: url(astroCalendarTitle.jpg);
	width: 1060px;
	height: 75px;
	text-align: center;
    color: white;
	font-weight: 300;
	justify-content: center; 
	text-align: center; 
	margin: 0 auto;
}

#form {
	padding-left: 20px;
}
#instructions{
    position:absolute;
	top: 25%;
	left: 50%;
	width:640px;
	height:auto;
	color: white;
	padding: 20px;
	margin-top: -160px; /*set to a negative number 1/2 of your height*/
	margin-left: -320px; /*set to a negative number 1/2 of your width*/
	border: rgba(18, 33, 47, 1);
	background: rgba(47, 66, 91, .9);
	box-shadow: 3px 10px 20px 5px rgba(0, 0, 0, .5);
	z-index:100;
	display: none;	
}

#userLocations{
    position:absolute;
	top: 25%;
	left: 50%;
	width:640px;
	height:auto;
	color: white;
	padding: 20px;
	margin-top: -160px; /*set to a negative number 1/2 of your height*/
	margin-left: -320px; /*set to a negative number 1/2 of your width*/
	border: rgba(18, 33, 47, 1);
	background: rgba(47, 66, 91, .9);
	box-shadow: 3px 10px 20px 5px rgba(0, 0, 0, .5);
	z-index:100;
	display: none;	
}

#instruct_p{
	color: white;
	font-size: 18px;
	font-weight: 300;
}
.footer{

	width: 100%;
	padding: 5px;
	background: rgba(133, 110, 78, 0);
	text-align: center;
    color: white;
	font-weight: 300;
	justify-content: center; 
	text-align: center; 
	margin: 0 auto;
}

#mail_a{
	text-decoration:none !important;
	color: white;
	padding: 2px 10px;
	margin-top: 20px;
	background: rgba(18, 33, 47, .9);
	border: 1px solid rgba(127, 68, 61, .9);
	cursor: pointer;	
}
#mail_a:hover {
	border: 1px solid rgba(169, 182, 201, 1);
}

#signup_a{
	text-decoration:none !important;
	color: white;
	padding: 2px 10px;
	margin-top: 20px;
	background: rgba(18, 33, 47, .9);
	border: 1px solid rgba(127, 68, 61, .9);
	cursor: pointer;	
}
#mail_a:hover {
	border: 1px solid rgba(169, 182, 201, 1);
}

#close_a{
	text-decoration:none !important;
	color: white;
	padding: 2px 10px;
	margin-top: 20px;
	background: rgba(18, 33, 47, .9);
	border: 1px solid rgba(127, 68, 61, .9);
	cursor: pointer;	
}
#close_a:hover {
	border: 1px solid rgba(169, 182, 201, 1);
}

#close_loc{
	text-decoration:none !important;
	color: white;
	padding: 2px 10px;
	margin-top: 20px;
	background: rgba(18, 33, 47, .9);
	border: 1px solid rgba(127, 68, 61, .9);
	cursor: pointer;	
}
#close_loc:hover {
	border: 1px solid rgba(169, 182, 201, 1);
}

#instruct_a{
	text-decoration:none !important;
	color: white;
	padding: 2px 10px;
	margin-top: 20px;
	background: rgba(18, 33, 47, .9);
	border: 1px solid rgba(127, 68, 61, .9);
	cursor: pointer;	
}
#instruct_a:hover {
	border: 1px solid rgba(169, 182, 201, 1);
}

#locations_a{
	text-decoration:none !important;
	color: white;
	padding: 2px 10px;
	margin-top: 20px;
	background: rgba(18, 33, 47, .9);
	border: 1px solid rgba(127, 68, 61, .9);
	cursor: pointer;	
}

.loca{
	text-decoration:none !important;
	font-size: 14px;
	color: white;
	padding: 2px 10px;
	margin-top: 20px;
	background: rgba(18, 33, 47, .9);
	border: 1px solid rgba(127, 68, 61, .9);
	cursor: pointer;	
}

#locations_a:hover {
	border: 1px solid rgba(169, 182, 201, 1);
}

.loca:hover {
	border: 1px solid rgba(169, 182, 201, 1);
}

.info {
  width: 75%;
  background: rgba(47, 66, 91, .8);
  padding: 10px 0;
  border-right: 5px solid rgba(18, 33, 47, .8);
  h2 {
    font-weight: 300;
  }
  p {
    font-size: 18px;
  }
}

.dso {
	border: 1px solid rgba(169, 182, 201, 1);
	padding: 5px;
	margin: 5px;
	width: 90%;
}

.signupForm {
  width: 50%;
  padding: 5px;
  background: rgba(31, 46, 62, .8);
  transition: .2s;
  h2 {
    font-weight: 300;
  }
}

.inputFields {
  margin: 5px 0;
  font-size: 14px;
  padding: 5px;
  width: 170px;
  border: 1px solid rgba(169, 182, 201, 1);
  border-top: none;
  border-left: none;
  border-right: none;
  background: rgba(18, 33, 47, .2);
  color: white;
  outline: none;
}

#email {
	width: 90%;
}
#name {
	width: 90%;
}
#latitude {
	width: 45%;
}
#longitude {
	width: 45%;
}
#dso_name {
	width: 90%;
}
#ra_hour {
	width: 40px;
}
#ra_minute {
	width: 40px;
}
#ra_second {
	width: 40px;
}
#dec_hour {
	width: 40px;
}
#dec_minute {
	width: 40px;
}
#dec_second {
	width: 40px;
}

.dropbtn {
  border: 1px solid rgba(169, 182, 201, 1);
  background: rgba(18, 33, 47, .6);
  font-size: 16px;
  margin: 10px;
  color: white;
  border: none;
  cursor: pointer;
}

.noBullet {
  list-style-type: none;
  padding: 0;
}

#join-btn {
  border: 1px solid rgba(169, 182, 201, 1);
  background: rgba(27, 61, 32, .9);
  font-size: 18px;
  color: white;
  margin-top: 20px;
  margin-left: 100px;
  padding: 10px 50px;
  cursor: pointer;
  transition: .4s;
  &:hover {
    background: rgba(18, 33, 47, .8);
  }
}

#login-btn {
  border: 1px solid rgba(169, 182, 201, 1);
  background: rgba(27, 61, 32, .9);
  font-size: 18px;
  color: white;
  margin-top: 20px;
  padding: 10px 50px;
  cursor: pointer;
  transition: .4s;
  &:hover {
    background: rgba(18, 33, 47, .8);
  }
}

#map-btn {
  border: 1px solid rgba(169, 182, 201, 1);
  background: rgba(27, 61, 32, .9);
  font-size: 18px;
  color: white;
  margin-top: 20px;
  margin-left: 20px;
  padding: 10px 50px;
  cursor: pointer;
  transition: .4s;
  &:hover {
    background: rgba(18, 33, 47, .8);
  }
}

.leaflet-layer,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out,
.leaflet-control-geocoder,
.leaflet-control-attribution {
  filter: invert(100%) hue-rotate(200deg) brightness(95%) contrast(90%);
}

#osm-map { 
	padding: 10px;
	justify-content: center; 
	text-align: center; 
	margin: 0 auto;
}