* {
          box-sizing: border-box;
        }
        
        body {
          font-family: sans-serif;
          padding: 10px;
          background: #1d1d1d;
        }
        
        .header {
          padding: 30px;
          text-align: center;
          background: rgb(255, 230, 87);
        }
        
        .header h1 {
          font-size: 50px;
        }
        
        .topnav {
          overflow: hidden;
          background-color: #333;
        }
        
        .topnav a {
          float: left;
          display: block;
          color: #f2f2f2;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
        }
        
        .topnav a:hover {
          background-color: #ddd;
          color: black;
        }
        
        .leftcolumn {   
          float: left;
          width: 75%;
        }
        
        .rightcolumn {
          float: left;
          width: 25%;
          background-color: #696969;
          padding-left: 20px;
        }
        
        .img {
          background-color: #aaa;
          width: 100%;
          padding: 20px;
        }
        
        .card {
          background-color: white;
          padding: 20px;
          margin-top: 20px;
        }
        
        .row::after {
          content: "";
          display: table;
          clear: both;
        }
        
        .footer {
          padding: 20px;
          text-align: center;
          background: #000000;
          margin-top: 20px;
        }
        
        @media screen and (max-width: 800px) {
          .leftcolumn, .rightcolumn {   
            width: 100%;
            padding: 0;
          }
        }
        
        @media screen and (max-width: 400px) {
          .topnav a {
            float: none;
            width: 100%;
          }
        }