body {
  background : url('https://www.nationalparks.org/sites/default/files/yosemite-merced.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment: fixed;
  text-align: center;
  font-family: 'Cabin Sketch', cursive;
  display: middle;
}

.topmostWrapper{
    width:100%;
    max-width:1200px;
    margin: 2em auto;
    padding:1em;
    background:rgba(0,0,0,0.4);
    border-radius:1em;
}

#city-search {
  width: 225px;
  height: 30px;
  border-radius: 5px;
  border: none;
  padding-left: 10px;
}

.close-icon {
	border:1px solid transparent;
	background-color: transparent;
	display: inline-block;
	vertical-align: middle;
  outline: 0;
  cursor: pointer;
}

.close-icon:after {
	content: "X";
	display: block;
	width: 15px;
	height: 15px;
	position: absolute;
	background-color: grey;
	z-index:1;
	right: 35px;
	top: 0;
	bottom: 0;
	margin: auto;
	padding: 2px;
	border-radius: 50%;
	text-align: center;
	color: white;
	font-weight: normal;
	font-size: 12px;
	cursor: pointer;
}

.close-icon,.search-wrapper {
	position: relative;
	padding: 10px;
	
}

#icon1 {
  color: white;
}

.instructions{
  color: white;
  text-shadow:
        0.05em 0 black,
        0 0.05em black,
        -0.05em 0 black,
        0 -0.05em black,
        -0.05em -0.05em black,
        -0.05em 0.05em black,
        0.05em -0.05em black,
        0.05em 0.05em black;
}

p {

  /*this breaks 320px screen    */
  /*width: 350px;*/
  
  
  margin-left: auto;
  margin-right: auto;
}


.parkInfo {
  display: none;
}

.park-preview-image{
    max-width:150px;
}

.quote {
  font-family: 'Tangerine', cursive;
  color: white;
  font-size: 25px;
  margin-top: 150px;
  text-shadow: 2px 2px 4px #000000;
}

.resultTitles {
  color: white;
  height: 50px;
  padding-top: 20px;
  padding-bottom: 45px;
  font-size: 30px;
  text-shadow:
        0.05em 0 black,
        0 0.05em black,
        -0.05em 0 black,
        0 -0.05em black,
        -0.05em -0.05em black,
        -0.05em 0.05em black,
        0.05em -0.05em black,
        0.05em 0.05em black;
}

#results, #weatherStats {
  color: white;
  text-shadow:
        0.05em 0 black,
        0 0.05em black,
        -0.05em 0 black,
        0 -0.05em black,
        -0.05em -0.05em black,
        -0.05em 0.05em black,
        0.05em -0.05em black,
        0.05em 0.05em black;
}

.title {
  color: white;
  padding-bottom: 10px;
  font-size: 25px;
  text-shadow:
        0.05em 0 black,
        0 0.05em black,
        -0.05em 0 black,
        0 -0.05em black,
        -0.05em -0.05em black,
        -0.05em 0.05em black,
        0.05em -0.05em black,
        0.05em 0.05em black;
  
}

.weatherInnerBox {
  color: white;
  border:1px solid white;
  font-family: 'Roboto', sans-serif;
  padding-left: 10px;
  padding-right: 10px;
}

.search-box:not(:valid) ~ .close-icon {
	display: none;
}

#search-button {
  border-radius: 5px;
  border: none;
  height: 30px;
  width: 75px;
  color: black;
}

.search-wrapper {
    /*this breaks 320px screen    */
	/*width: 500px;*/
	margin: auto;
	margin-top: 50px;
}

.weatherIcon{
    float:left;
    
    /*pull it up so it vertically  aligns with the h3*/
    margin-top:-42px;
    
}

.weatherInnerBox h3{
    padding-left:42px;
}