* {
     color: white;
     font-family: Roboto, Roboto Local, Roboto Condensed, Roboto Condensed Local, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif 
}
 html {
    -webkit-text-size-adjust: 100%;
     background: #2f2f2f;
}
 body, html {
     height: 100%;
     margin: 0;
     padding: 0
}
 body {
     text-align: center;
     background: -webkit-linear-gradient(       top, #394f57, #2f2f2f );
     background:    -moz-linear-gradient(       top, #394f57, #2f2f2f );
     background:      -o-linear-gradient(       top, #394f57, #2f2f2f );
     background:         linear-gradient( to bottom, #394f57, #2f2f2f );
     background-repeat: no-repeat;
     background-attachment: fixed;
}
 div.root {
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     position: absolute;
     display: table;
     border-spacing: 1.5em;
}
 div.container{
     display: table-cell;
     vertical-align: middle 
}
 div.par {
    max-width: 400px;
    margin: auto;
    text-align: left;
}
 div.buttons{
     padding:3em;
}
 h1 {
     font-style:italic;
}
 h1 span{
     color: #ffbc00;
}
 p {
     font-size: 1em;
}
 p.notice {
     font-size: 0.8em;
}
 a.button1{
     display:inline-block;
     padding:0.7em 1.4em;
     margin:0 0.3em 0.3em 0;
     border-radius:0.15em;
     box-sizing: border-box;
     text-decoration:none;
     font-family:'Roboto',sans-serif;
     font-size: 1.17em;
     font-weight:400;
     color:#FFFFFF;
     background-color:#3665f3;
     box-shadow:inset 0 -0.6em 0 -0.45em rgba(0,0,0,0.17);
     text-align:center;
     position:relative;
}
 a.button1:active{
     top:0.1em;
}
 @media all and (max-width:30em){
     a.button1{
         display:block;
         margin:0.4em auto;
    }
}