body{

 font-family:Arial;
 text-align:center;
 color:white;

 background:linear-gradient(-45deg,#1e3c72,#2a5298,#6dd5ed,#2193b0);
 background-size:400% 400%;
 animation:bgmove 12s ease infinite;

}

@keyframes bgmove{

 0%{background-position:0% 50%}
 50%{background-position:100% 50%}
 100%{background-position:0% 50%}

}

button{

 padding:12px 20px;
 margin:6px;
 border:none;
 border-radius:8px;
 font-size:15px;
 cursor:pointer;
 color:white;

}

.start{background:#27ae60}

.pause{background:#f1c40f;color:black}

.resume{background:#3498db}

.stop{background:#e74c3c}

.progress{

 width:400px;
 height:20px;
 background:#ddd;
 margin:20px auto;
 border-radius:10px;
 overflow:hidden;

}

#bar{

 height:100%;
 width:0%;
 background:#2ecc71;

}

.loader{

 width:40px;
 height:40px;
 border:4px solid #ddd;
 border-top:4px solid #2ecc71;
 border-radius:50%;
 margin:20px auto;
 animation:spin 1s linear infinite;

}

.loader.paused{

 animation-play-state:paused;
 border-top:4px solid #f1c40f;

}

.hidden{
 display:none;
}

@keyframes spin{

 0%{transform:rotate(0deg)}
 100%{transform:rotate(360deg)}

}

table{

 width:90%;
 margin:30px auto;
 border-collapse:collapse;
 background:white;
 color:black;

}

th{

 background:#34495e;
 color:white;
 padding:10px;

}

td{

 padding:8px;
 border-bottom:1px solid #ddd;

}

.success{

 color:#27ae60;
 font-weight:bold;

}

.pending{

 color:#3498db;
 font-weight:bold;

}

.red{

 color:#e74c3c;
 font-weight:bold;

}

.yellow{

 color:#f39c12;
 font-weight:bold;

}

.stats{

 margin:10px;

}

.done{

 background:white;
 color:black;
 width:300px;
 margin:30px auto;
 padding:20px;
 border-radius:10px;

}

a{

 color:#2980b9;
 font-weight:bold;
 text-decoration:none;

}

a:hover{

 text-decoration:underline;

}