img{
    max-width:180px;
}
input[type=file]{
    padding:10px;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    color: white;
    font-family:sans-serif;
    font-weight: 600;
}
html{
    background-color: #4100b0;
}
h1{
    text-align: center;
    color: white;
    font-family:sans-serif;
    font-size: 50px;
    margin:0;
    font-weight: 900;
}
canvas{
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width:30vh;
}
h2{
    text-align: center;
    color:white;
    font-family:sans-serif;
}
button{
    padding:10px;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background-color:white;
    width:200px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.unselectable { 
      -webkit-user-select: none; 
      -webkit-touch-callout: none; 
      -moz-user-select: none; 
      -ms-user-select: none; 
      user-select: none;    
      color: #cc0000;
      }
button:hover{
    animation : greyer .5s;
    background-color:grey;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
@keyframes greyer {
  from {
background-color:white;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }
  to {
background-color:grey;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    }
    
}