trackScorerStylehtml.html

<style>
body{
  overflow: hidden;
  margin:0px;
  padding:0px;
}
.parallax {
  background-color: black;
  perspective: 1px;
  height: 100vh;
  overflow-y: auto;
  overflow-x:hidden;
}
.parallax_layer {
  position: absolute;
  top: -200;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax_layer--main {
  position:relative;
  transform: translateZ(0);
}
.parallax_layer--background {
  position:absolute;
  transform: translateZ(-10px) scale(11);
  transform-origin: center center;
}
#maintext{
  margin:auto;
  font-size: 50px;
  color:white;
  font-size: 50px;
  text-align: center;
}
#toptext{
  margin-left: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  color:white;
  font-size: 20px;
  font-weight: bold;
  font-family: Verdana;
  text-shadow: 0px 0px 5px black;
}
#tracktext{
  margin-left: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  color:white;
  font-size: 20px;
  font-weight: bold;
  font-family: Verdana;
  text-align: center-top;
  text-shadow: 0px 0px 5px black;

}
#main {
  color:#d7e5d8;
  font-size: 20px;
  background-color: #132c2d;
  width : 800px;
  margin: auto;
  margin-top:64px;
  margin-bottom:64px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
  box-shadow: 60px 20px 120px rgba(0,0,0,1), -60px 20px 120px rgba(0,0,0,1);
}
input{
  width:35px;
}
#topScores{
  margin-top: 10px;
  margin-bottom:10px;
  background-color: #2f7e79;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#top5table{
  position: relative;
  width: 100%;
}
#ntoptable{
  position: relative;
  width: 100%;
  display: none;
}
#trackLists{
  background-color: #565656;
}
button{
  font-size: 15px;
  background-color: white;
  text-align: center;
  border: none;
  text-decoration: none;
  display: inline-block;
  transition-duration: 0.4s;
}
button:hover{
  background-color: green;
  color: white;
  cursor: pointer;
  box-shadow : inset 0 0 1em rgba(0,0,0,0.2); 
}
#navbuttons{
  height: 100%;
  width: 200px;
  -webkit-border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 0px 0px;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  float: right;
  vertical-align: top;
  margin-right:32px;
}

#navPrevious{
  height:30px;
  width: 98px;
  -webkit-border-radius: 5px 0px 0px 5px;
  -moz-border-radius: 5px 0px 0px 5px;
  border-radius: 5px 0px 0px 5px;
  margin-right:2px;
}
#navNext{
  height:30px;
  width: 98px;
  -webkit-border-radius: 0px 5px 5px 0px;
  -moz-border-radius: 0px 5px 5px 0px;  
  border-radius: 0px 5px 5px 0px;
}
#navMore{
  width:100%;
  height: 30px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#navcontainer{
  position: relative;
  padding-right: 260px;
  padding-left: 260px;
  padding-bottom: 25px;
}
#trackScoreContainer{
  position: relative;
}
#namedisplay{
  width: 490px;
  height: 100%;
  float: left;
  background-color: #2f7e79;
  -webkit-border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 0px 0px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top:5px;
  vertical-align: top;
}
.tracknumberdisplay{
  float: right;
}
.tracknumberinput{
}
.trackNameDisplay{
  text-align: center;
  font-size: 30px;
  width:380px;
  overflow:hidden;
  float:left;
  height:100%;
  text-shadow: 0px 0px 5px black;
}
#navbar{
  position: relative;
  height:40px;
}
#trackScoreTable{
  -webkit-border-radius: 0px 0px 5px 5px;
  -moz-border-radius: 0px 0px 5px 5px;
  border-radius: 0px 0px 5px 5px;
  width:100%;
  background-color: #2f7e79;
  padding-bottom: 10px;
}
td{
  text-align: center;
  text-shadow: 0px 0px 5px black;
}
th{
  font-size: 25px;
  font-weight: bold;
  font-family: Verdana;
  color: white;
}
.tralt{
  background-color: #276965;
}
.first {
  background: linear-gradient(65deg,#d6a706 2%, #f3c527 5%,white 9%,#f3c527 12%, #d6a706 15%);
  background-color: #d6a706;
  background-size: 200%;
  -webkit-animation: Gradient 10s linear infinite;
  -moz-animation: Gradient 10s linear infinite;
  animation: Gradient 10s linear infinite;
  border-style: solid;
  border-width: 2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.second {
  background: linear-gradient(65deg,#aeaeae 2%, #c3cad4 5%,white 9%,#c3cad4 12%, #aeaeae 15%);
  background-color: #aeaeae;
  background-size: 200%;
  -webkit-animation: Gradient 10s linear infinite;
  -moz-animation: Gradient 10s linear infinite;
  animation: Gradient 10s linear infinite;
  animation-delay: 2,2s;
}
.third {
  background: linear-gradient(65deg,#ba5d00 2%, #da9550 5%,white 9%,#da9550 12%, #ba5d00 15%);
  background-color: #ba5d00;
  background-size: 200%;
  -webkit-animation: Gradient 10s linear infinite;
  -moz-animation: Gradient 10s linear infinite;
  animation: Gradient 10s linear infinite;
  animation-delay: 2,5s;
}
@keyframes Gradient {
  0%{background-position:50% 50%}
  10%{background-position:50% 50%}
  14%{background-position:-100% 50%}
  100%{background-position:-100% 50%}
}
</style>