html body {
    margin: 60px auto;
    width: 70%;
    font-family: 'IBM-Light';
    color: white;
    background-color: black;
}

h1{
  font-family: 'IBM-Bold';
    font-size: 2.7em;
}

h2{
  font-family: 'IBM-Bold';
    font-size: 1.8em;
}

h3{
  font-family: 'IBM-Bold';
    font-size: 1.5em;
    margin-bottom: 0.35em;
}

li{
  font-family: 'IBM-Light';
  font-size: 1.0em;
  line-height: 1.25em;
}



main a {
    text-decoration: none;
    padding: 1px 0px 2px 0px;
    background-image: linear-gradient( transparent 0%, transparent calc(50% - 3px), rgb(0, 0, 0) calc(50% - 3px), rgba(255, 255, 255, 0.15) 100% );
    transition: background-position 320ms ease-in-out, padding 220ms ease-in-out;
    background-size: 100% 200%;
    background-position: 0 0;
    line-height: 1.95em;
  }
  
  main a:hover {
    padding: 2px 0px 2px 0px;
    background-image: linear-gradient( transparent 0%, transparent calc(25% - 3px), rgb(0, 0, 0) calc(25% - 3px), rgb(255, 255, 255) 100% );
    background-position: 0 100%;
    color: aliceblue;
  }

  main a:visited{
    color: black;
  }



  footer {
    font-family: 'Betty-Bold';
    position: relative;
    bottom: 0;
    width: 100%;
    margin-top: 5%;
    margin-bottom: 4%;
}

footer a{
    color: black;
    font-size: 1.15em;
}

footer a:hover{
    color: gold;
}

/**
 * Grid Formats
 */

#canvasGrid_01 {
    display: grid;
    grid-template-columns: 2fr 2fr;
    grid-template-rows: auto;
    grid-gap: 2%;
    margin: 0;
    margin-top: 1%;
}

 article {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr;
  grid-template-rows: auto;
  grid-gap: 2%;
  margin: 0;
  margin-top: 1%;
}
img{
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

@font-face {
  font-family: 'IBM-Light';
  src: url('../font/IBMPlexSans-Light.otf') format('opentype');
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: 'IBM-Bold';
  src: url('../font/IBMPlexSans-Bold.otf') format('opentype');
  text-rendering: optimizeLegibility;
}