@media screen and (max-width:600px) {
  .column.left, .column.right {
    width: 100%;}   

  .grid {
    max-width=100vw
  }

}

body {
  background-color: #bbbbbb;
  place-items: center;
}

.grid {
  display: grid; 
  max-width: 100%; 
  justify-content:center;
  gap:20px;
}

.gb {
  background-color: #dddddd;
  width: 6em;
  color: #0c2340;
  padding: 10px;
  border-radius: 3px;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  font-size: 30px;
  margin: 10;
}

.gb:hover {
  background-color: #767676
}

.gb1 {
  background-color: #0c2340;
  width: 6em;
  color: #ffd700;
  padding: 10px;
  border-radius: 3px;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  font-size: 30px;
  margin: 10;
}

.gb1:hover {
  background-color: #000000
}

.gb2 {
  background-color: #dddddd;
  width: fit-content;
  color: #0c2340;
  padding: 10px;
  border-radius: 3px;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  font-size: 30px;
  margin: 10;
}

.gb2:hover {
  background-color: #767676
}

* {
  box-sizing: border-box;
}

/* two unequal columns that float next to each other */
.column {
  float: left;
  padding: 0px 10px 0px 10px;
}

.left {
  width: 60%;
}

.right {
  width: 40%;
}

h2 {
  padding-left: 10px;
  margin-top: 40px;
  margin-bottom: 10px;
}

h3 {
  font-size: 25px;
  font-weight: bold;
  margin:0;
}

p {
font-size: 20px;
display: block;
margin: 0;
}

b1 {
font-size: 60px;
display: block;
margin: 10;
}

div.indent {
text-indent:50px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/*
TEMPLATE
<div class="row">
<div class="indent">
<h2>Title</h2>
<div class="column left">
<p>
</p>
</div>
</div>
<div class="column right">
<p>
</p>
</div>
</div>
*/