html{
    height: 100%;
    border: 20px solid white;  
  }
 
  body {
    height:100%;
    font-family: 'Roboto Condensed', sans-serif;
    color: white;
  }
 
  .box-a {
    background: #323232;
    height:100%;
    border-bottom: 10px solid white;
  }
 
  .box-a:hover {
    background: #464646;
  }
 
  .box-b {
    background: #323232;
    height:100%;
    border-top: 10px solid white;
    border-bottom: 20px solid white;
  }
 
  .box-b:hover {
    background: #464646;
  }
 
  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
 
  .box-a.centered img {
    width: 60px;
    border-radius: 0%;
  }
  
  .box-b.centered img {
    width: 90px;
    border-radius: 0%;
  }
 
  h1 {
    font-weight: bold;
    font-size: 1.8em;
    letter-spacing: 0.5em;
  }
 
  a {
    color: white;
    text-decoration: none;
  }

  a:visited {
    color: white;
    text-decoration: none;
  }

  a:hover {
    color: white;
    text-decoration: none;
  }

  a:active {
    color: white;
    text-decoration: none;
  }
 
  @media only screen and (min-width:1200px) {
      .col-md-6.box-a {
          border-right: 10px solid white;
      }
      .col-md-6.box-b {
          border-left: 10px solid white;
      }
  }
 
  @media only screen and (min-width:992px) {
      .col-sm-6.box-a {
          border-right: 10px solid white;
      }
      .col-sm-6.box-b {
          border-left: 10px solid white;
      }
  }
 
  @media only screen and (min-width:768px) {
      .col-xs-12.box-a {
          border-bottom: 0px solid white;
          border-right: 10px solid white;
      }
      .col-xs-12.box-b {
            border-top: 0px solid white;
            border-bottom: 0px solid white;
            border-left: 10px solid white;
      }
  }