@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");

html {
  background-image: url(https://sandbox.leighcotnoir.com/project-assets/mat125/pen2/landscape1.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: cover;
}
body {
  margin: 0;
  paddding: 5% 5% 5% 5%;
  min-height: 100vh;
  font-family: 'Open Sans', 'Helvetica', 'arial', 'sans-serif';
  font-size: 16px; /* = 1em, 100% */
  color: #fff3e0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7db9e8+0,1e5799+100&0.01+0,1+100 */
background: linear-gradient(to bottom,  rgba(125,185,232,0.01) 0%,rgba(30,87,153,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
h1, h2, 
#callout {
  font-family: 'Montserrat', 'Open Sans', 'Helvetica', 'arial', 'sans-serif';
}  
#callout{
  font-size: 5em;
  color: #FFB74D;
  text-shadow: 2px 2px 10px rgba(0,0,50,.9), 0 0 35px rgba(255,255,255,1);
width: 60%; 
margin: 0;
}

h1 {
  font-size:2em;
  color: #FFB74D;
  text-shadow: 2px 2px 10px 
  rgba(0,0,50,.9);
/*   text-transform: uppercase */
  margin-bottom: 0; 
}
h2 {
  text-shadow: 2px 2px 10px rgba(0,0,50,.9);
  margin: 0;
  font-size: 1.225em;
}
article p {
  text-shadow: 2px 2px 10px 
rgba(0,0,50,.9);
  line-height: 1.4em;
}
img {
  width: 50%;
  padding: 1.5em 1.5em 0 0;
}
a {
  color: white;
  text-decoration: none;
  background: #1A237E;
  padding: .75em;
  font-weight: bold;
  border-radius: 5px;
  border: 2px solid white;
  box-shadow: 2px 2px 10px 1px rgba(0,0,0,.5);
  display: inline-block;
}
a:hover {
  background:#FFAB00;
  color: #333;  
}