/*
  body {
    display: block;
    margin: 0 auto;
    max-width: 50rem;
    text-align: center;
  }
*/

@font-face {
  font-family: 'Comic Sans MS';
  src: url("./comici.ttf");
}

body {
  background-image: url("./Sky.jpg");
  background-size: cover;
}

body.center {
  background-image: url("./Sky-faded.jpg");
  background-size: cover;
  margin: 0px 75px 0px 75px;
  padding: 10px;
}

p.large {
  font-size: x-large;
  font-family: "Comic Sans MS", "Comic Sans", Arial, Helvetica, sans-serif;
  max-width: 800px;
}

span.large {
  font-size: large;
  font-family: "Comic Sans MS", "Comic Sans", Arial, Helvetica, sans-serif;
}

h1.comic h2.comic h3.comic {
  font-family: "Comic Sans MS", "Comic Sans", Arial, Helvetica, sans-serif;
}

button {
    -webkit-appearance: none;
    border: 1px solid #ccc;
    border-radius: 125px;
    box-shadow: inset 0 13px 25px rgba(255,255,255,0.5), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.1);
    cursor: pointer;
    /*font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;*/
    font-family: "Comic Sans MS", "Comic Sans", Arial, Helvetica, sans-serif;
    font-size: 2rem;
    margin: 1rem 1rem;
    padding: 1.2rem 4rem;
    position: relative;
    transition: all ease .3s;
}

button:hover {
    box-shadow: inset 0 13px 25px rgba(255,255,255,0.8), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.2);
    transform: scale(1.02);
}

button:before {
    background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    border-radius: 125px;
    content:'';
    height: 50px;
    left: 4%;
    position: absolute;
    top: 1px;
    transition: all ease .3s;
    width: 92%;
}

button.confirm {
    -webkit-appearance: none;
    border: 1px solid #ccc;
    border-radius: 125px;
    box-shadow: inset 0 13px 25px rgba(255,255,255,0.5), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.1);
    cursor: pointer;
    /*font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;*/
    font-family: "Comic Sans MS", "Comic Sans", Arial, Helvetica, sans-serif;
    font-size: 3rem;
    margin: 5rem 1rem;
    padding: 1.2rem 4rem;
    position: relative;
    transition: all ease .3s;
    background: #4A90E2;
    border-color: #3672B6;
    color: #fff;
}

button.action {
    -webkit-appearance: none;
    border: 1px solid #ccc;
    border-radius: 125px;
    box-shadow: inset 0 13px 25px rgba(255,255,255,0.5), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.1);
    cursor: pointer;
    /*font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;*/
    font-family: "Comic Sans MS", "Comic Sans", Arial, Helvetica, sans-serif;
    font-size: 3rem;
    margin: 5rem 1rem;
    padding: 1.2rem 4rem;
    position: relative;
    transition: all ease .3s;
    background: #32a838;
    border-color: #B8B8B8;
    color: #fff;
}