body{background:url("backdrop_base.jpg") repeat;
    background-size: cover;
      padding:1%;}

#img_logo{height:auto;
    width:100%;
    max-width:100px;
    float:right}
#img_logo:hover {transform: rotate(30deg);}

#img_text{height:auto;
          width:400px;
          float:left;
          margin-left:12%;}

#header{background-color:#99ffcc;
      height:100px;}
  
#nav_bar{background-color:#ffffff;
    font-size:25px;
    font-family:"Lucida Console";
    text-align:center;
    width:auto;
    height:100%;
    float:left;}
nav ul {list-style:none;
  padding:5px;}
nav ul li a {text-align:center;
  color:black;
  padding:8px;
  display: block;
  transition: 0.5s;
  list-style:none;}
nav ul li a:hover {background-color:#99ffcc;
                    color:black;}
    
#display{background-color:#ffffff;
      font-size:30px;
      font-family:"Lucida Console";
      text-align:center;
      width:800px;
      padding:0.5em;
      margin-left:10%;
      float:left;}
    
p{font-size:20px;
  font-family:"Lucida Console";
  float:right;}
ul{float:left;}
  
#time{background-color:#ffffff;
    font-size:30px;
    font-family:"Lucida Console";
    text-align:center;
    width:200px;
    padding:0.5em;
    margin-right:10%;
    float:right;}
    
@media screen and (max-width: 1600px) {body #header {font-size: 25px; height:100px;}}
@media screen and (max-width: 1200px) {body #header {font-size: 18.75px; height:75px;}}
@media screen and (max-width: 900px) {body #header {font-size: 12.5px; height:50px;}}
@media screen and (max-width: 500px) {body #header {font-size: 6.25px; height:25px;}} 

@media screen and (max-width: 1600px) {body #nav {font-size: 25px; width:10px;}}
@media screen and (max-width: 1200px) {body #nav {font-size: 18.75px; width:7.5px;}}
@media screen and (max-width: 900px) {body #nav {font-size: 12.5px; width:5px;}}
@media screen and (max-width: 500px) {body #nav {font-size: 6.25px; width:2.5px;}}    

@media screen and (max-width: 1600px) {body #display {font-size: 30px; width:800px;}}
@media screen and (max-width: 1200px) {body #display {font-size: 22.5px; width:600px;}}
@media screen and (max-width: 900px) {body #display {font-size: 15px; width:400px;}}
@media screen and (max-width: 500px) {body #display {font-size: 7.5px; width:200px;}}

@media screen and (max-width: 1600px) {body #time {font-size: 30px; width:200px;}}
@media screen and (max-width: 1200px) {body #time {font-size: 22.5px; width:150px;}}
@media screen and (max-width: 900px) {body #time {font-size: 15px; width:100px;}}
@media screen and (max-width: 500px) {body #time {font-size: 7.5px; width:50px;}}