style.css

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* from https://type-scale.com/ */

html {font-size: 100%;} /*16px*/

body {
  background: white;
  font-family: 'Krona One', sans-serif;
  font-weight: 400;
  line-height: 1.75;
  color: #000000;
  background: linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%);
}

p {margin-bottom: 1rem;}

h1, h2, h3, h4, h5 {
  margin: 3rem 0 1.38rem;
  font-family: 'Krona One', sans-serif;
  font-weight: 400;
  line-height: 1.3;
}

h1 {
  margin-top: 0;
  font-size: 2.488rem;
}

h2 {font-size: 2.074rem;}

h3 {font-size: 1.728rem;}

h4 {font-size: 1.44rem;}

h5 {font-size: 1.2rem;}

small, .text_small {font-size: 0.833rem;}


body {
    /* min-height: 100vh; */
    max-width: 960px;
    margin: 0 auto;
}

main {
    margin-top: 1.2rem;
    text-align: center;
}

.how {
    text-align: center;
}

footer {
    text-align: center;
    margin-bottom: 1.2rem;
}

/* Buttons */
/* 
adapted from 
https://cssbuttons.io/detail/ke1221/ancient-walrus-24
*/
#upload {
    display: none;
}

#button-area-top, #button-area-bottom {
    display: flex;
}

button, .upload-label, canvas {
    font-family: 'Krona One', sans-serif;
    margin: 1.5rem;
    border: 1px solid #e8e8e8;
    color: #090909;
    padding: 0.7em 1.7em;
    font-size: 18px;
    border-radius: 0.5em;
    background: #e8e8e8;
    transition: all .3s;
    box-shadow: 6px 6px 12px #c5c5c5,
                -6px -6px 12px #ffffff;
}

button:active {
    color: #666;
    box-shadow: inset 4px 4px 12px #c5c5c5,
                inset -4px -4px 12px #ffffff;
}