*
{
    font-family: sans-serif;
}

.area
{
    display: flex;
    align-items: center;         
    justify-content: flex-start;
    border: solid 2px black;
    margin: 0 auto;  
    color: black;
    font-size: 24;
    padding: 1%;
    border-bottom: none;
}

.heading
{
    border: solid 2px  black;
    margin: 0 auto;  
    color: black;
    font-size: 24;
    padding: 1%;
}


.header-button
{
  background-color: red; 
  color: white; 
  padding: 10% 20%; 
  text-decoration: none; 
  display: inline-block; 
  border-radius: 5px; 
  font-weight: bold; 
  margin: 5px;
}

.header-button:hover 
{
  background-color: red; 
}


.navigation
{
    display: flex;
    justify-content: space-evenly;
    border: solid 2px  black;
    margin: 0 auto;  
    color: red;
    font-size: 24;
    padding: 1%;
}

.my-button
{
  background-color: red; 
  color: white; 
  padding: 10% 20%; 
  text-decoration: none; 
  display: inline-block; 
  border-radius: 5px; 
  font-weight: bold; 
  margin: 5px; 
  cursor: pointer
}

.my-button:hover 
{
  background-color: red; 
}

.main-body
{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.column-1
{
  height: 500;
  width: 600;
  border: solid 2px black;
  border-top: none;
}

.column-2
{
  height: 500;
  width: 650;
  border: solid 2px black;
  border-top: none;
  border-left: none;
}

.column-3
{
  height: 500;
  width: 650;
  border: solid 2px black;
  border-top: none;
  border-left: none;
}

.footer
{
  display:flex;
  border: solid 2px black;
  padding: 1%;
  height: 150;
  width:300;
  justify-content: center;
  align-items: center;
}