html{
    /*Gradient takes up the full lenngth of the screen*/
    height: 100%;
}

label,h1,h2,p,#legend{
    color: #FFF;
}

canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 550px;
}

td {
    padding-top: 1%;
    padding-bottom: 1%;
}

h1 {
    position: relative;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    background-image: radial-gradient(circle at 0% 0%, #1f1f1f,#1f1f1f 51%,#1f1f1f);
  }
/*gradient animation */
@keyframes gradient { 
    0%{background-position:0 0}
    100%{background-position:100% 0}
}
/*style of the actual input field*/
.search-bar {
    position: relative;
    display: inherit;
    border-radius: inherit;
    margin: 0;
    border: none;
    outline: none;
    padding: 0 .325em;
    z-index: 1; /*needs to be above the :focus span*/
    width:100%;
    transition: transform .5s, opacity .25s;
    transform: scale(.993,.94);
}
.input {
    
    /*needs to be relative so the :focus span is positioned correctly*/
    position:relative;
    
    /*bigger font size for demo purposes*/
    font-size: 1.5em;
    
    /*the border gradient*/
    background: linear-gradient(21deg, #10abff, #1beabd);
    
    /*the width of the input border*/
    padding: 3px;
    
    /*we want inline fields by default*/
    display: inline-block;
    
    /*we want rounded corners no matter the size of the field*/
    border-radius: 9999em;
    /*center the search box*/
    display: table;
    margin: 0 auto;
    width:80%;
    border: 10px;
}