body {
  background-color: #2d5a7e;
}

header img {
  border-radius: 2%;
  height: 2%; 
  width: 13%; 
  float: left;
  margin-left: 1.2%; 
  margin-right: 2%;
  min-height: 64px;
  min-width: 256px;
}

header{
  color: #cfd067;
  margin-left: 9%
}

header nav ul li {
  margin-left: 0%;
  margin-right: 2%;
  margin-top: 2%;
  margin-bottom: 0%;
 }

 @media screen and (max-width: 875px) {
  header nav ul, header nav ul li {
    clear:left;
    margin-top: 2%
  }  
}

header a{
  color: #63b3f4;
  font-weight: bold
}

header a:hover{
  color: #F26661;
}

h1 {
    color: #F26661;
    text-shadow: 0 0 6px #A84744, 0 0 6px #A84744, 0 0 6px #A84744, 0 0 6px #A84744;
    clear: left;
    margin-top: 2%;
  }

header ul li {
  list-style: none;
  display: inline-block;
}

main, section {
  color: #cfd067;
  margin: auto;
  width: 80%;
} 

main a{
  color: #c577e4;
}

main a:visited {
  color: #662182;
}

.image {
  border: 4px solid darkslategrey;
  position:relative;
}

figcaption {
  color: grey;
  text-align: left;
}

.columns {
  display: grid;
  grid-template-columns: 40% 60%;	
}

main ul li {
  color: #cfd067;
  list-style: none;
}

section a{
  color: #c577e4;
}

section a:visited {
  color: #662182;
}

footer {
  color: #63b3f4;
  margin: auto;
  width: 80%;
}

/* Address with copy tooltip. */
.dm:before{ content: 'stephen.montague.viktory' }
.dm:after{ content: '@gmail.com' }
.dm:hover{ color: #F26661 }
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: darkslategrey;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0; 
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
  font-size: 80%;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}