/*Color palette: https://coolors.co/2f4858-33658a-86bbd8-f6ae2d-f26419*/

body {
  background-color: #2F4858;
}
a:hover {
  background-color: #F26419;
}
.photo-story {
	width: 60%;
	margin-left: 15%;
	margin-right: 20%;
	margin-bottom: 100px;
	background-color: #86BBD8;
	border: 5px solid #F26419;
	height: 600px;
	padding-top: 100px;
	padding-left: 100px;
	padding-right: 50px;
	color: #2F4858;
}
img {
	width: 50%;
	height: auto;
	border: 3px solid #86BBD8;
}
.body-copy{
	width: 80%;
	margin-left: 5%;
	margin-right: 10%;
	margin-bottom: 100px;
	background-color: #F6AE2D;
	border: 5px solid #86BBD8;
	padding-left: 100px;
	padding-right: 50px;
	padding-bottom: 100px;
	color: #2F4858;
}
#subhed {
	font-size: 20px;
}
#end {
	background-color: #F6AE2D;
	line-height: 50px;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
	color: #2F4858;
	border: 5px solid #86BBD8;
}
a {
	color: #33658A;
}

/*FONTS*/
.ubuntu-bold {
  font-family: "Ubuntu", serif;
  font-weight: 700;
  font-style: normal;
  line-height: 100px;
}
.open-sans-copy {
  font-family: "Open Sans", serif;
  font-size: 18px;
  color: #2F4858;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  line-height: auto;
  font-variation-settings:
    "wdth" 100;
}
h4 {
	font-family: "Open Sans", serif;
  	color: #2F4858;
  	font-optical-sizing: auto;
  	font-weight: bolder;
  	font-style: italic;
  	line-height: auto;
  	font-variation-settings:
    	"wdth" 100;
	}


	.body-copy{
		width: auto;
		line-height: 40px;
	}
	.ubuntu-bold, #end {
  		line-height: 40px;
	}
	.open-sans-copy {
		font-size: 25px;
	}
	img {
		width: 80%;
	}
}

:root {
  font-size: 16px;
}

@media only screen and (max-width: 600px) {
  * {
    box-sizing: border-box;
  }
  .photo-story,
  .body-copy {
    width: 95%;
    padding: 5%;
    margin: 1rem auto;
    font-size: 1.1rem;
    line-height: 1.6;
    overflow-wrap: break-word;
    height: auto;
  }

  .open-sans-copy {
    font-size: 1rem;
    line-height: 1.6;
  }

  .ubuntu-bold,
  #end {
    line-height: 1.4;
    font-size: 1.4rem;
  }

  #subhed {
    font-size: 1rem;
  }

  img {
    width: 100%;
    height: auto;
  }
}

  .open-sans-copy {
    font-size: 1.1rem;
    line-height: 1.6;
  }

  .ubuntu-bold,
  #end {
    line-height: 1.5;
    font-size: 1.5rem;
  }

  img {
    width: 100%;
  }

  #subhed {
    font-size: 1.1rem;
  }
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
  .photo-story,
  .body-copy {
    width: 85%;
    padding: 2rem;
    margin: 2rem auto;
    font-size: 1.1rem;
    height: auto;
  }

  .open-sans-copy {
    font-size: 1rem;
    line-height: 1.6;
  }

  .ubuntu-bold {
    font-size: 2rem;
  }

  #end {
    font-size: 1.2rem;
  }

  img {
    width: 70%;
  }

  #subhed {
    font-size: 1.1rem;
  }
}

@media only screen and (min-width: 1025px) {
  .photo-story {
    width: 60%;
    padding: 4rem 3rem;
    margin: 3rem auto;
    font-size: 1rem;
  }

  .body-copy {
    width: 80%;
    padding: 4rem 3rem;
    margin: 3rem auto;
    font-size: 1rem;
  }

  .open-sans-copy {
    font-size: 1rem;
    line-height: 1.8;
  }

  .ubuntu-bold {
    font-size: 2.5rem;
  }

  #end {
    font-size: 1.2rem;
  }

  img {
    width: 55%;
  }

  #subhed {
    font-size: 1.25rem;
  }
}