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%;
        
        }
        section::after {
          content: "";
          display: table;
          clear: both;
        }
        footer {
            position:fixed;
            bottom:0;
            right:0;
            width:100%;
          background-color:rgb(123, 160, 219);
          padding: 10px;
          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;
          padding: 30px;
          position:inherit;
           
                }
         /* columns width */
        .column.side{
          width:25%;
                }
        .column.middle{
          width: 50%;
                }
        
        @media screen and (max-width: 600px) {
          .column.side, .column.middle {
            width: 100%;
          }