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

#display{font-size:20px;
    font-family:"Lucida Console";
    background-color:#99ffcc;
    width:400px;
    height:600px;
    float:left;
    margin:40;
    padding:5%;}

#next{font-size:20px;
    color:black;
    background-color:#99ffcc;}
    
#time_screen{font-size:18px;
    font-family:"Lucida Console";
    text-align: center;
    background-color:#ffffff;
    height:100px;
    width:300px;
    float:left;
    margin:40;
    padding:5%;}
    
#list{font-size:20px;
    font-family:"Lucida Console";
    background-color:#99ffcc;
    width:300px;
    float:left;}

#task_img{height:auto;
    width:100%;
    max-width:300px;}
#title_a{font-size:20px;
    font-family:"Lucida Console";
    background-color:#ffffff;
    height:50px;
    width:70px;
    float:left;
    margin-top:10;
    margin-right:200;
    padding:5%;}
    
#task_inpt{font-size:20px;
    font-family:"Lucida Console";
    background-color:#99ffcc;
    height:auto;
    width:100%;
    float:left;
    margin:10;
    padding:5%;}

#time_img{height:auto;
    width:100%;
    max-width:500px;}    
#title_b{font-size:20px;
    font-family:"Lucida Console";
    background-color:#ffffff;
    height:50px;
    width:70px;
    float:left;
    margin-top:50;
    margin-right:200;
    padding:5%;}
    
#time_inpt{font-size:20px;
    font-family:"Lucida Console";
    background-color:#99ffcc;
    height:auto;
    width:100%;
    float:right;
    margin:10;
    padding:5%;}
        
#logo_img{height:auto;
    width:100%;
    max-width:100px;
    margin-left:85%;
    margin-top:15%;}
#logo_img:hover {transform: rotate(10deg);}


@media screen and (max-width: 1600px) {body #display {height:600px; width:400px;}}
@media screen and (max-width: 1200px) {body #display {height:450px; width:300px;}}
@media screen and (max-width: 900px) {body #display {height:300px; width:200px;}}
@media screen and (max-width: 500px) {body #display {height:150px; width:100px;}}

@media screen and (max-width: 1600px) {body #time_screen {height:100px; width:300px; font-size:18px}}
@media screen and (max-width: 1200px) {body #time_screen {height:75px; width:225px; font-size:13.5px}}
@media screen and (max-width: 900px) {body #time_screen {height:50px; width:150px; font-size:9px}}
@media screen and (max-width: 500px) {body #time_screen {height:25px; width:75px; font-size:4.5px}}


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

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