@font-face {
  font-family: "Cera Pro";
  src: url(../fonts/Cera_Pro_Bold.otf);
  font-weight: bold;
}
@font-face {
  font-family: "Cera Pro";
  src: url(../fonts/Cera_Pro_Medium.otf);
  font-weight: normal;
}
@font-face {
  font-family: "Cera Pro";
  src: url(../fonts/Cera_Pro_Regular.otf);
  font-weight: lighter;
}

@font-face {
  font-family: "EngraversGothicBT";
  src: url(../fonts/EngraversGothicBT.ttf);
  font-weight: bold;
}

.info, .contact{
  height: 100vh;
}

.info__img{
  max-width: 28rem;
}

.info-name{
  font-size: 1.5rem;
}

.info-career{
  font-family: "EngraversGothicBT";
  color: #9fb1b9;
}

.info-content {
  font-family: "Cera Pro";
  max-width: 30rem;
  padding: 0 1.5rem;
}

.bg-darkblue{
  background-color: #131f2f;
}

.color-GreyGreen{
  color: #9fb1b9;
}

.contact__img {
  padding-bottom: 2.3rem;
}

.contact-info {
  padding-bottom: 2.3rem;
  font-family: "Cera Pro";
  font-size: 1.3rem;
}

.contact-info > a {
  text-decoration: none;
  color: black;
}

.contact-title {
  letter-spacing: 2px;
  font-size: 1rem;
}

.footer {
  padding-top: 4rem;
  font-family: "Cera Pro";
}

.capital-north{
  width: 8rem;
}

.footer-contact > a{
  color: black;
  text-decoration: none;
}

@media screen and (max-width: 768px){
  html {font-size: 14px;}
  .info, .contact{
  height: 90vh;
}
}

@media screen and (max-width: 576px){
  html {font-size: 12px;}
  .info, .contact{
  height: 80vh;
}
}