/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@font-face {
	font-family: "Atkinson Hyperlegible Next"; 
	src: url("fonts/AtkinsonHyperlegibleNext-Regular.woff2") format("woff2"),
	url("fonts/AtkinsonHyperlegibleNext-RegularItalic.woff2") format("woff2"),
	url("fonts/AtkinsonHyperlegibleNext-Bold.woff2") format("woff2");
	font-weight: normal;
}
@font-face {
	font-family: "Bricolage Grotesque"; 
	src: url("fonts/BricolageGrotesque-Regular.woff2") format("woff2"),
	url("fonts/BricolageGrotesque-Light.woff2") format("woff2"),
	url("fonts/BricolageGrotesque-Medium.woff2") format("woff2"),
	url("fonts/BricolageGrotesque-SemiBold.woff2") format("woff2"),
	url("fonts/BricolageGrotesque-Bold.woff2") format("woff2");
}

html,
body {
  background-color: #fafafa;
  color: #17262e;
  margin: 2%;
  font-family: "Atkinson Hyperlegible Next";
  box-sizing: border-box;
  height: 100%;
  padding: 0;
}

p {
  color: #17262e;
  margin: 1%;
  font-family: "Atkinson Hyperlegible Next";
  
}

h1, h2, h3, h4, h5, h6 { 
  font-family: "Atkinson Hyperlegible Next"; 
  font-weight: normal; 
  font-style: italic;
}

nav {
	display: flex;
	flex-wrap: wrap;
	text-align: right;
	justify-content: right;
	margin-left: auto;
}

nav a, .up a {
	color: #17262e;
	display: flex;
	margin: 10px;
	padding: 20px 5px 2px 20px;
	text-decoration: none;
	font-size: 20px;
	background-color: #fafafa;
}
header {
	font-size: 36px;
	margin: 10px;
	display: flex;
	justify-content: start;
	font-family: "Bricolage Grotesque", "Atkinson Hyperlegible Next", sans-serif;
	color: #17262e;
	font-weight: 600
}

  
a:link {
  color: #17262e;
  text-decoration: none;
}
a:visted {
  color: #17262e;
  text-decoration: none;
}

a:hover { 
	color:#94b0b5;
	text-decoration: none;
}

article {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10%;
  
}
  
footer { 
	font-size: 0.8em;
	padding: 5px 10px;
	margin: 2rem;
	display: flex;
	justify-content: center;
	bottom: 0;
	width: 100%
}

/* newsletter images */
.newsletter-images {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.newsletter-images div {
  width:40%;
  margin: 5px;
  position: relative;
  box-sizing: border-box;
}
.newsletter-images div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.newsletter-images div span {
  position: absolute;
  bottom: 15px;
  left: 0;
  text-align: center;
  width: 100%;
  background: #fafafa;
  color: #17262e;
  padding: 5px 10px;
  font-family: "Atkinson Hyperlegible Next";
  font-size: 15px;
  opacity: 0;
}
.newsletter-images div:hover span {
  opacity: 1;
  transform: none;
}

hr.style1 {
  border-top: 3px double #8c8b8b;
  width: 60%;
}