html,body,div,p,h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dt,dd,
form,fieldset,caption,table,tr,td,th,
address,blockquote,img {
	margin:0;
	padding:0;
}

img, fieldset {
	border:none;
}

*, *:after, *:before {
	box-sizing:border-box;
	flex:1 0 auto;
}

hr {
	display:none;
}

html, body {
	height:100%;
}

body, button, input, table, textarea, select {
	font:normal 1em/1.5 "poppins",arial,helvetica,sans-serif;
}

body {
	display:flex;
	flex-direction:column;
}

h1, 
body > footer {
  flex-grow:0;
  background:#121315;
  color:#AAA;
 
}

h1 {
  text-align:center;
  padding:0.5rem;
}

.footerExtras {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  padding:clamp(1rem, 4vw, 3rem);
  gap:clamp(1.5rem, 4vw, 3rem);
   border: 1px double purple;
}

.footerExtras h2 {
  padding-bottom:0.5em;
  font-size:clamp(1.25em, 2.5vw, 1.5em);
  color:#FFF;
}

body > footer ul {
  list-style:none;
}

body > footer a {
  text-decoration:none;
  color:#ABC;
}

body > footer p {
  text-align:justify;
  padding-bottom:1.5rem;
}

body > footer .links {
  flex-grow:0;
}

.aboutAndSocial{

}

.aboutAndSocial,
.newsletterSignup {
  width:25%;
  min-width:18em;
  max-width:50em;

}

.newsletterSignup input {
  width:100%;
}

.footerMenu {
  display:flex;
  width:100%;
  text-align:right;
  padding:1rem clamp(1rem, 3vw, 2rem);
  background:#222;
}

.footerMenu ul {
  flex-grow:0;
}

.footerMenu li {
  display:inline;
  margin-right:0.5rem;
}

.footerSocial {
  text-align:center;
  white-space:nowrap;
}

.footerSocial li {
  display:inline;
  margin:0 min(1rem, 2vw);
}


.footerSocial a {
  position:relative;
  color:#BCD;
}

.footerSocial i {
  font-size:2rem;
}

.footerSocial span {
  position:absolute;
  left:-999em;
}


.newsletterSignup input,
.newsletterSignup button {
  display:block;
  width:100%;
  padding:0.25em 0.5em;
  border:0;
  border-radius:0.25em;
}

.newsletterSignup input {
  margin-top:0.5em;
  background:#606668;
  color:#FFF;
}

.newsletterSignup button {
   margin-top:-0.75em;
}

@media (max-width:40em) {
  body > footer,
  body > footer p {
    text-align:center;
  }
  .footerExtras section:first-child,
  .newsletterSignup {
    width:100%;
    padding:0 clamp(1rem, 4vw, 3rem);
  }
  .links {
    flex-grow:1;
    width:34%;
    min-width:10em;
  }
}

@media (max-width:30em) {
  .footerMenu {
    display:block;
    text-align:center;
  }
  .footerMenu ul {
    padding-bottom:0.5rem;
  }
  .footerMenu li:last-child {
    margin-right:0;
  }
}