billionSeconds.css

body {
	background-color: #393939;
	font-family: 'Raleway', sans-serif;
}

#countdown {
	margin-top: 200px;
	margin-right: 50px;
	margin-left: 50px;
}

.highlight {
	color: white;
}

#monthSelect, #daySelect, #yearSelect {
	padding-top: 30px;
	height: 30px;
	width: 100%;
}

#yearSelect {
	height: 100px;
}

text.unselected  {
	fill: gray;
}

text.selected {
	fill: white;
	font-weight: bold;
}

text.unselected:hover {
	fill: white;
}

#yourBirthday {
	padding-top:50px;
	margin-bottom:700px;
}

p {
    font-size: 20px;
   /* font-family: Futura, "Trebuchet MS", Arial, sans-serif; */
    font-family: 'Raleway', sans-serif;
    text-align: center;
    color: #a4c7ed;
   /* line-height: 120% */
}

rect {
	fill: gray;	
}

svg {
	display: block;
	margin: auto;
}

.icon {
  margin-top: 50px;
  margin-bottom: 300px;
  width: 50px;
  height: 75px;
}

#arrow {
	fill: gray;
}

#arrow:hover {
	fill: white;
}

@media(min-width:400px) {
	p {
		font-size: 30px;
	}
}

@media(min-width:700px) {
	p {
		font-size: 50px;
	}
}


.axis {
  fill: gray;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.axis .halo {
  stroke: gray;
  stroke-width: 4px;
  stroke-linecap: round;
}

.slider .handle path {
  stroke-width: 3px;
  stroke-linecap: round;
  pointer-events: none;
}

.slider .handle text {
  text-align: center;
  font-size: 18px;
}

.info p {
	margin-top: 60px;
	margin-left: 30px;
	margin-right: 30px;
	font-size: 28pt;
}