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

#logo{height:auto;
    width:100%;
    max-width:550px;}
#logo:hover {transform: rotate(-10deg);}

img{height:auto;
    width:100%;
    max-width:100px;}
img:hover {transform: rotateY(180deg);}


#a{background-color:#ffffff;
    text-align:center;
    padding:0.5%;}
    
#b{background-color:#99ffcc;
    height:50px;}

#c{font-family:"Lucida Console";
    background-color:#ffffff;
    float:left;
    text-align:center;
    padding:2%;
    margin:4;}
    
#d{font-family:"Lucida Console";
    background-color:#ffffff;
    float:right;
    text-align:center;
    padding:2%;
    margin:4;}
    
button{font-size:20px;
      color:black;
      background-color:#99ffcc;}

@media screen and (max-width: 1600px) {body #b {height:50px;}}
@media screen and (max-width: 1200px) {body #b {height:37.5px;}}
@media screen and (max-width: 900px) {body #b {height:25px;}}
@media screen and (max-width: 500px) {body #b {height:12.5px;}}

@media screen and (max-width: 1600px) {body #c {font-size: 20px; height:380px; width:400px;}}
@media screen and (max-width: 1200px) {body #c {font-size: 15px; height:285px; width:300px;}}
@media screen and (max-width: 900px) {body #c {font-size: 10px; height:190px; width:200px;}}
@media screen and (max-width: 500px) {body #c {font-size: 5px; height:95px; width:100px;}}

@media screen and (max-width: 1600px) {body #d {font-size: 20px; height:380px; width:400px;}}
@media screen and (max-width: 1200px) {body #d {font-size: 15px; height:285px; width:300px;}}
@media screen and (max-width: 900px) {body #d {font-size: 10px; height:190px; width:200px;}}
@media screen and (max-width: 500px) {body #d {font-size: 5px; height:95px; width:100px;}}