* 
{
    box-sizing: border-box;
}
  
body
{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 22px;
    color: azure;
    background-color: #505050;
}

.card
{
    background-color: #505050; 
    padding: 10px;
}

.photo
{
    background-color: azure;
    margin-left: 15px;
    margin-right: 15px;
    padding: 10px;
}

.header
{
    padding: 20px;
    text-align: center;
    background-image: url(./background.png);
}
.header h1 
{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 72px;
    font-weight: bolder;
}

ul
{
    font-size: 28px;
    color: azure;
}

.rightcolumn
{
    float: left;
    width: 25%;
    padding: 20px;
}


  /* Style the top navigation bar */
  .topnav {
    overflow: hidden;
    background-color:azure;
  }
  
  /* Style the topnav links */
  .topnav a {
    float: left;
    display: block;
    color: #505050;
    text-align: center;
    padding: 4px 16px;
    text-decoration: none;
    font-size: 28px;
  }
  
  /* Change color on hover */
  .topnav a:hover {
    background-color: #505050;
    color: azure;
  }
  
.leftTop
{   
    float: left;
    width: 75%;
}

.leftBottom
{   
    float: left;
    width: 100%;
    font-size: 18px;
}
 

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px)
{
    .leftTop, .leftBottom, .rightcolumn 
    {   
        width: 100%;
        padding: 0;
    }
}