@font-face {font-family: "SF Espresso Shack";
    src: url("../fonts/SF-Espresso-Shack.eot"); /* IE9*/
    src: url("../fonts/SF-Espresso-Shack.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/SF-Espresso-Shack.woff2") format("woff2"), /* chrome firefox */
    url("../fonts/SF-Espresso-Shack.woff") format("woff"), /* chrome firefox */
    url("../fonts/SF-Espresso-Shack.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
    url("../fonts/SF-Espresso-Shack.svg#SF Espresso Shack") format("svg"); /* iOS 4.1- */
}
@media only screen and (max-width: 480px) { 

.enter-name input[type=name] {
  background-color:yellow;
  color: #000;
    border-radius: 10px;
      box-sizing: border-box;
      border: none;
      padding: 5px;
      position: fixed;
      left: 10px;
      bottom: 0px;
      height: 55px;
      width: 70%;
      text-align: center;
      font-size: 22px;
      display: inline-block;
}

.enter-name .btn {
  border-radius: 10px;
      font-size: 21px;
      padding: 4px;
      position: fixed;
      right: 2px;
      bottom: 3px;
      height: 55px;
      width: 23%;
      display: inline-block;
      color: #000;
      background-color:#10E43A;
      border: none;
      letter-spacing: .5px;
      transition: .2s ease-out;
      cursor: pointer;
      line-height: 36px;
      outline: 0;
      text-transform: uppercase;
      vertical-align: middle;
      text-decoration: none;
      animation-duration: 4s !important;
}

.enter-name input[type=name]::-webkit-input-placeholder { 
  color: #000;
    font-size: 18px;  
}

.enter-name input[type=name]::-moz-placeholder { 
  color: #000;
    font-size: 18px;
}

.enter-name input[type=name]:focus::-webkit-input-placeholder {
    color: #000;
}

.enter-name input[type=name]:focus::-moz-placeholder { 
  color: #000;
    font-size: 18px;
}
}
.page {
    display: inline-block;
    padding: 0px 9px;
    margin-right: 4px;
    border-radius: 3px;
    border: solid 1px #c0c0c0;
    background: #e9e9e9;
    box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
    font-size: .875em;
    font-weight: bold;
    text-decoration: none;
    color: #717171;
    text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}

.page:hover, .page.gradient:hover {
    background: #fefefe;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
    background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);
}

.page.active {
    border: none;
    background: #616161;
    box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
    color: #f0f0f0;
    text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}