body{
            font-family: times;
        }
        header{
             padding: 10px;
            text-align:center;
            font-size: 15px;
            color:white; 
            position:fixed;
        }
        ul{
            list-style-type: none;
            position:fixed;
            margin:0px;
            padding:0px;
            overflow:hidden;
            background-color:rgb(123, 160, 219);
        }
        li{
            float:left;
            
        }
        li a{
            display: block;
            color:white;
            text-align:center;
            padding: 10px; 10px;
            text-decoration:none;
            border-right:1px solid #ffffff;
        }
        li a:hover:not(.active) {
          background-color: #111;
        }
        .active{
            background-color:rgb(194, 217, 255);
        }
        * {
          box-sizing: border-box;
        }
        article {
          float: left;
          padding: 20px;
          margin:50px;
          width: 100%;
        
        }
        
        /* Clear floats after the columns */
        section::after {
          content: "";
          display: table;
          clear: both;
        }
        /* Style the footer */
        footer {
          position:fixed;
          bottom:0;
          right:0;
          width:100%;
          background-color:rgb(123, 160, 219);
          padding: 5px;
          text-align: right;
          color: white;
        }
         a{
            display: block;
            color:white;
            text-align:center;
            padding: 10px; 10px;
            text-decoration:none;
            border-right:1px solid #ffffff;
        }
        .column {
          float: left;
          width: 33.33%;
          padding: 30px;
          height: 300px; 
          position:inherit;
       
            }
        .column.side{
          width:25%;
            }
        .column.middle{
          width: 50%;
            }
    
        /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
        @media screen and (max-width: 600px) {
          .column.side, .column.middle {
            width: 100%;
      }}