body {
font-family: sans-serif;
text-align: center;
background: #f2f2f2;
padding: 20px;
}

.main {
width: 600px;
margin: 20px auto;
background: white;
padding: 20px;
border-radius: 12px;
display: inline-block;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

canvas {
margin-top: 10px;
border: 1px solid #ccc;
max-width: 100%;
}

button {
margin-top: 10px;
display: inline-block;
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid #adadad;
background: #fff;
border-radius: 4px;
}

button:hover {
color: #333;
background-color: #e6e6e6;
}

label {
display: inline-block;
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid #adadad;
background: #fff;
border-radius: 4px;
}

label:hover {
color: #333;
background-color: #e6e6e6;
}

input[type="file"] {
display: none;
}

.bg {
animation: bg_animate 10s ease-in-out alternate infinite;
-webkit-animation: bg_animate 10s ease-in-out alternate infinite;
-moz-animation: bg_animate 10s ease-in-out alternate infinite;
-o-animation: bg_animate 10s ease-in-out alternate infinite;
}

@keyframes bg_animate {
0% {
background: #fff;
}
20% {
background: #b0ffc3;
} 40% {
background: #fffcb0;
}
60% {
background: #ffa3a3;
}
80% {
background: #a3ddff;
}
100% {
background: #4b4b4b;
}
}
@-webkit-keyframes bg_animate {
0% {
background: #fff;
} 20% {
background: #b0ffc3;
} 40% {
background: #fffcb0;
}
60% { 
background: #ffa3a3;
}
80% {
background: #a3ddff;
}
100% {
background: #4b4b4b;
}
}
@-moz-keyframes bg_animate{
0% {
background: #fff;
}
20% {
background: #b0ffc3;
}
40% {
background: #fffcb0;
}
60% {
background: #ffa3a3;
}
80% {
background: #a3ddff;
}
100% {
background: #4b4b4b;
}
}
@-o-keyframes bg_animate{
0% {
background: #fff;
}
20% {
background: #b0ffc3;
}
40% {
background: #fffcb0;
}
60% {
background: #ffa3a3;
}
80% {
background: #a3ddff;
}
100% {
background: #4b4b4b;
}
}

@media (max-width: 700px) {
.main {
margin: 0 auto;
width: auto;
}
}