@charset "utf-8";
/* CSS Document */

body {background:#f25864;}
#container {width:500px;margin:0 auto;padding:20px 20px 0 20px;background:white;}
/* #container * {color:#f25864;} */
form::after {content:"";display:block;clear:both;}
h1, h2 {font-size:30px;}
h1 {font-weight:100;}
h2 {font-weight:900;}
p {font-weight:300;}
option {font-weight:900;}

/*-- Style Inputs & Selectors --*/
.primarySelector {height:60px;width:100%;font-weight:900;text-indent:15px;padding-right:10px;margin:25px 0 30px 0;transition:.5s;background-color:#ddd;border-radius:5px;background-image:url(../img/downArrow.svg);background-size:20px;background-repeat:no-repeat;background-position: right 15px center;font-size:15px;}
.primaryInput {height:60px;width:100%;font-size:25px;font-weight:900;text-indent: 15px;padding-right:10px;transition:.5s;background-color:#ddd;border-radius:5px 5px 0 0;}
.secondarySelector {display:block;width:100%;background:grey;padding:10px;border-radius:0 0 5px 5px;text-align:center;color:white;font-weight:900;font-size:15px;}

/*-- Default all containers to display none --*/
#time, #dogYears, #weight, #length, #temperature, #babyAge {display:none;margin-bottom:20px;}

/*-- Styles for Dog Years Converter --*/
#dogYears h1 {float:left;margin-bottom:15px}
#dogYears h2 {float:right;margin-bottom:15px}
#dogYears h3 {text-align:center;font-weight:900;font-size:40px;margin:50px 0 15px 0;}
#dogAgeInput {-webkit-appearance:none;width:100%;height:10px;border-radius:10px;background:#ddd;outline:none;}
#dogAgeInput::-webkit-slider-thumb {-webkit-appearance:none;appearance:none;width:25px;height:25px;border-radius:50%;background:#696969;cursor:pointer;box-shadow:none;border:none;}
#dogAgeInput::-moz-range-thumb {width:25px;height:25px;border-radius:50%;background:#426465;cursor:pointer;}

/*-- Styles for Baby Age Converter --*/
#babyAge h1 {float:left;margin-bottom:15px}
#babyAge h2 {float:right;margin-bottom:15px}
#babyAgeOutput {text-align:center;font-weight:900;font-size:40px;margin-bottom:15px;}
#babyAge p {text-align:center;margin:50px 0 5px 0;}
#babyAgeInput {-webkit-appearance:none;width:100%;height:10px;border-radius:10px;background:#ddd;outline:none;}
#babyAgeInput::-webkit-slider-thumb {-webkit-appearance:none;appearance:none;width:25px;height:25px;border-radius:50%;background:#696969;cursor:pointer;box-shadow:none;border:none;}
#babyAgeInput::-moz-range-thumb {width:25px;height:25px;border-radius:50%;background:#426465;cursor:pointer;}


@media only screen and (max-width: 500px) {
	#container {width:100%;}
}