.boilerplate {position: relative; color: white; text-align: center;}
.boilerplate p {margin: 0;}
.boilerplate a {color: white;}
.boilerplate-logo img {width: 85px;}
.boilerplate-links dl {margin: 0;}
.boilerplate-links dt {margin: 0 0 0.5rem 0; color: var(--boilerplate_heading_fg,var(--secondary));}
.boilerplate-links dd {margin: 0 0 2rem 0;}
.boilerplate-links ul {list-style-type: none; padding: 0; margin: 0;}
.boilerplate-social-icons {margin-bottom: 2rem;}
.boilerplate-social-icons a {display: inline-block; background-color: rgba(255,255,255,0.3); font-size: 2rem; padding: 1.5rem; line-height: 1; border-radius: 50%; text-decoration: none; transition: 0.1s;}
.boilerplate-social-icons a+a {margin-left: 0.8rem;}
.boilerplate-nova a {display: inline-block;}
.boilerplate-nova img {width: 10.8rem;}
.boilerplate-icons {text-align: center; margin-top: 2rem;}
.boilerplate-icons a {display: inline-block;}
.boilerplate-icons img {height: 4rem; width: auto; margin: 0.5rem 0.4rem 0.5rem 0.4rem;}
.boilerplate-icons img.smaller {height: 3rem;}

#boilerplate_1 {background: var(--boilerplate_bg,var(--primary)); padding: 40px 0; box-shadow: 0 -2px 8px rgba(0,0,0,0.7);}
#boilerplate_2 {background: color-mix(in srgb, var(--boilerplate_bg,var(--primary)), #fff 20%); padding: 20px 0;}

@media (min-width: 768px) {
  #boilerplate_1 {text-align: left;}
  .boilerplate-links dd {margin: 0;}
  .boilerplate-social-icons {text-align: right;}
  .boilerplate-social-icons a:hover {transform: scale(1.2);}
  .boilerplate-nova {float: right;}
  .boilerplate-nova p {text-align: right;}
}
@media (min-width: 1200px) {
  #boilerplate_2 {text-align: left;}
  .boilerplate-terms p {text-align: right;}
  /*#boilerplate_2.has-icons .boilerplate-copyright p,#boilerplate_2.has-icons .boilerplate-terms p {}*/
  .boilerplate-icons {margin-top: 0;}
  .boilerplate-icons img {height: 5rem;}
  .boilerplate-icons img.smaller {height: 4rem;}
  .boilerplate-row {display: flex; align-items: center;}
  .boilerplate-copyright,.boilerplate-terms,.boilerplate-icons {width: 33%;}
  .wider .boilerplate-copyright,.wider .boilerplate-terms {width: 20%;}
  .wider .boilerplate-icons {width: 60%;}
  .boilerplate-copyright {order: 1;}
  .boilerplate-icons {order: 2;}
  .boilerplate-terms {order: 3;}
}