@font-face {
  font-family: 'Libre-Regular';
  src: local('LibreBaskerville-Regular'),
    url(fonts/LibreBaskerville-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto-Medium';
  src: local('Roboto-Medium'),
    url(fonts/Roboto-Medium.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto-Regular';
  src: local('Roboto-Regular'),
    url(fonts/Roboto-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto-Light';
  src: local('Roboto-Light'),
    url(fonts/Roboto-Light.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto-Thin';
  src: local('Roboto-Thin'),
    url(fonts/Roboto-Thin.ttf) format('truetype');
}

body {
  font-family: 'Roboto-Light', Arial, Helvetica, sans-serif;
  font-size: 1.3rem;
}

.h1 {
  font-size: 3rem;
}
.h2 {
  font-size: 3rem;
}
.h3 {
  font-size: 2rem;
  color: '#196CB4';
  font-family: 'Roboto-Thin', Arial, Helvetica, sans-serif
}
p {
  padding: 8px 0;
}


.hero-top {
  height: 65vh;
}
.hero-bottom {
  height: 35vh;
}

.my-grid {
  grid-template-columns: 50% 50%;
  grid-template-rows: 1;
  grid-template-areas: "grid-one grid-two";
}
.grid-one {
  grid-area: grid-one;
}
.grid-two {
  grid-area: grid-two;
}

.footer-grid {
  grid-template-columns: 50% 50%;
  grid-template-rows: 1;
  grid-template-areas: "footer-grid-one footer-grid-two";
}
.footer-grid-one {
  grid-area: footer-grid-one;
}
.footer-grid-two {
  grid-area: footer-grid-two;
}