.logo {
    background: left / cover url('images/wpt\ logo.png');
    background-size: 170px;background-repeat: no-repeat;
    display: flex;
    height: 75px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 60px ;
    font-style:italic;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color:whitesmoke;    
    text-shadow:5px 5px 5px red, 1px 0 15px white, 2px 2px 5px blue;
    -webkit-text-stroke-width:1px; 
    -webkit-text-stroke-color:blue;
       
  }
  header{  
    border: 1px solid black; 
    background-color:rgb(35, 35, 75);  
    padding:10px;  
    border-radius:10px;  
    }  
 body{
    background-color:rgba(249, 248, 248, 0.69);
 }
  img{
    /*border: 1px solid black;*/
    width: 100px;
    height: 100px;
    image-rendering: auto;
    }

  ul {

    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    margin-left: 3em;
    margin-top: 2em;
    /*box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;*/
    
  }

  li{
    float: left;
    padding-left: 2em;
    margin-top: 20px;
    margin-bottom: 20px;
    
    
  }
 li a:hover{
    transition: transform 0.5s;
    transform: scale(1.1);
    z-index: -100;
    background: rgba(158, 210, 208, 0.657);
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 10px;
 }
  
  li a {
    font-size: 15px;
    color:black;
    font-family:sans-serif;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    padding: 10px;
    text-align: center;
    /*border: 2px solid black;
    border-radius: 10px;*/
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;

  }

  @media screen and (max-width: 800px) {
    .left, .main, .right {
      width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
    }
}