* {
    box-sizing: border-box;
  }

body {
  background-color: rgba(255,255,0,0.4);
}

  /* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: rgba(0,0,255,.7);
  width: 99%;
  margin: 0.5%;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1.25em;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

.banner {
  width: 99%;
  background-color: rgba(0,255,255,.5);
  border: solid 3px blue;
  margin: 0.5%;
}

h1 {
  text-align: center;
}

p {
  font-size: 1.25em;
}
  
a {
  font-size: 1.25em;
}

/* Create four equal columns that float next to each other */
  
.column {
  float: left;
  width: 24%;
  overflow: hidden;
  border: solid 3px blue;
  margin: 0.5%;
  background-color: #ccc;
}

.txt-col{
  padding: 10px;
}
  
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
  
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    width: 49%;
  }
}
  
/* On screens that are 600px wide or less, make the columns stack on top of each other */
@media screen and (max-width: 600px) {
  .column {
    width: 99%;
  }
}

.wide-box {
  border: solid 3px blue;
  margin: 0.5%;
  background-color: #ccc;
  text-align: center;
  padding: 100px 10px;
}
  
footer {
  width: 99%;
  margin: 0.5% auto;
  text-align: center;
  background-color: rgba(0,255,255,.5);
  border: solid 3px blue;
}