@import url('https://fonts.googleapis.com/css?family=Oswald|Work+Sans:100,200,300,400,500,600,700,800,900');

htm, body {
  margin: 0;
  padding: 0; }

  #topnav {
      left: 0px;
      top: 0px;
      position: absolute;
      height: 22px;
      width:250px;
      background: #696969;
      color: #dedede;
      text-decoration:none;
      padding-left:30px;
      letter-spacing: 2px;
      word-spacing: 10px;
      font-size:10px;
  }

  #topnav a:link {color:#ffffff;text-decoration:none;}
  #topnav a:visited {color:#ffffff;text-decoration:none;}
  #topnav a:active {color:#cccccc;}
  #topnav a:hover {color:#cccccc;text-decoration:none;}


  .grid-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    margin: 100px 0;
    font-family: 'Oswald', sans-serif;
    color: #000;
    font-size: 36px;
    text-align: left;
    line-height: 1.15em;
    font-weight: bold;
    padding: 50px;
    grid-gap: 0px; }


.item1 {
  margin: 0;
  background-color: #FFCC33;
  background: repeating-linear-gradient(
    -45deg,
    #696969,
    #696969 1px,
    #ffffff 1px,
    #ffffff 70px
  );
  background-size:auto auto;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  padding: 50px; }

.item2 {
  margin: 0;
  background-color:#db7093;
  background: repeating-linear-gradient(
    45deg,
    #696969,
    #696969 1px,
    #ffffff 1px,
    #ffffff 70px
  );
  background-size:auto auto;
  border-bottom: 1px dashed black;
  padding: 50px; }

.item3 {
  margin: 0;
  background-color:#008b8b;
  background: repeating-linear-gradient(
    45deg,
    #696969,
    #696969 1px,
    #ffffff 1px,
    #ffffff 70px
  );
  background-size:auto auto;
  border-right: 1px dashed black;
  padding: 50px; }

.item4 {
  margin: 0;
  background-color:#ffffff;
  background-size:auto auto;
  border-bottom: 1px dashed black;
  border-right: 1px dashed black;
  padding: 50px; }

  hr {
     color: #f00;
     background: #f00;
     width: 75%;
     height: 1px;
}

main {
  width: 80%;
  margin: 0.5em auto; }

footer {
  color: #696969;
  font-family: 'Oswald', sans-serif;
  text-align: center;
  margin: 3em 0 3em 0;
  clear: both; }