* {
        box-sizing: border-box;
        font-family:Arial, Helvetica, sans-serif;
      }
      
      body {
        margin: 0;
        background-color: black;
        font-family:Arial, Helvetica, sans-serif;
      }

        /* Style the top branding bar */
        .toplogo {
            overflow: hidden;
            background-color: #000000;
            height: auto;
            padding-top: 10px;
            padding-bottom: 10px;
            text-align: center;
            font-family:Arial, Helvetica, sans-serif;
          }
      
      /* Style the top navigation bar */
      .topnav {
        overflow: hidden;
        background-color: #333;
        
      }
      
      /* Style the topnav links */
      .topnav a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-family:Arial, Helvetica, sans-serif;
      }
      
      /* Change color on hover */
      .topnav a:hover {
        background-color: #ddd;
        color: black;
      }
      
      /* Style the content */
      .content {
        background-color: #000000;
        color: white;
        padding: 10px;
        font-family:Arial, Helvetica, sans-serif;
      }
      
      /* Style the footer */
      .footer {
        background-color: #333;
        color:whitesmoke;
        font-size: small;
        padding: 10px;
        font-family:Arial, Helvetica, sans-serif;
      }

      div.gallery {
        margin: 5px;
        border: 1px solid #ccc;
        float: left;
        width: auto;
        color:white;
        text-align: center;
        font-family:Arial, Helvetica, sans-serif;
      }
      
      div.gallery:hover {
        border: 1px solid #777;
      }
      
      div.gallery img {
        width: 100%;
        height: auto;
      }
      
      div.desc {
        padding: 15px;
        text-align: center;
        font-family:Arial, Helvetica, sans-serif;
      }

/* Container for flexboxes */
      .row {
          display: -webkit-flex;
          display: flex;
          font-family:Arial, Helvetica, sans-serif;
        }

/* Format hyperlinks */
    a {
      color: whitesmoke;
      font-family:Arial, Helvetica, sans-serif;
      font-size: larger;
    }

    h1 {
        text-align: center;
        font-family:Arial, Helvetica, sans-serif;
        font-size: larger;
        color: whitesmoke;
    }

    h2 {
        text-align: center;
        color: whitesmoke;
        font-family:Arial, Helvetica, sans-serif;
        font-size: larger;
    }
        

        
/* Create three equal columns that sits next to each other */
  .column {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 20px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: large;
  }

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .row {
      -webkit-flex-direction: column;
      flex-direction: column;
      font-family:Arial, Helvetica, sans-serif;
    }
  }