main{
    display:flex;
    flex-direction: column;
    /* This centers our sketch horizontally. */
  justify-content: center;

  /* This centers our sketch vertically. */
  align-items: center;
  width:500px;
  margin:auto;
  border:1px solid;
  padding-bottom:50px;
}

h1{
    border-bottom:1px solid;
    font-size: 3em;
    font-weight: normal;
    text-align: center;

}

h2{
    font-size: 2em;
    font-weight: normal;
    margin:10px;

}
canvas{
    border:1px solid;
    margin:auto;
    align-self: center;
    max-width:480px;
    width:100%;
    
}

button{
    /* width:180px; */
    padding:10px;
    border:1px solid;
    background-color: black;
    color:white;
}

button:hover{
    transform: scale(1.2);
}

p{
    margin:5px;
    font-size: 2em;
    text-align: center;
}

a{
    text-decoration: none;
    color:black;
}

button a{
    text-decoration: none;
    color:white;
}

#demo{
border:1px dashed;
/* padding:20px; */
width:90%;
text-align: center;
margin:5px;
}

img{
margin:auto;
}

hr{
    border:0.2px solid;
    width:100%;
}

@media only screen and (max-width: 600px) {

    main{
    width:100%;
}
}


#gallery img:hover{
    width:100%;
}