body {
  background-color: #fff; }
#heading{
  width: 100%;
  display:flex;
  p{
    width: 80%;
  }
}
h1{
  width: 20%;
}
.paragraph {
  line-height: 1.5em;
  letter-spacing: 0.12em; }

#header {
  border-bottom: solid 0.1em #000;
  a { color: #000; } 
}

h2 {
  font-size: 1.3em;
  font-weight: normal; }

.image img {
  border: solid 0.1em #fff;
  &:hover{ border: solid 0.1em #000; } 
}

#footer{
  border-top: solid 0.1em #000;
  a{
    color:#000;
    &:hover{ text-decoration: underline; }
  }
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
    FOOTER
   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
@media (max-width: 40em) {
  #f-2, #f-3, #f-4 { border-top: dashed 0.1em #000; } }
@media (min-width: 40em) and (max-width: 60em) {
  #f-1, #f-3 { border-right: dashed 0.1em #000; }
  #f-3, #f-4{ border-top: solid 0.1em #000; } }
@media (min-width: 60em) and (max-width: 80em) {
  #f-1, #f-2 { border-right: dashed 0.1em #000; }
  #f-4 { border-top: solid 0.1em #000; } }
@media (min-width: 80em) {
  #f-1, #f-2, #f-3 { border-right: dashed 0.1em #000; } }

#contact-background, #contact-box { background-color: #fff; }
#contact-box { border: solid 0.1em #000; }
#contact header{ border-bottom: solid 0.1em #000; }
#contact-x:after, #contact-x:before { border-left: solid 0.1em #000; }

#contact{ 
  button {
    background-color: #fff;
    border-color: #000;
    &:hover{
      color: #fff;
      background-color: #000; 
    } 
  }
}