.nav-bar {
    margin-top: 10px;
}
.nav-bar ul {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 50px;
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
}
.nav-bar li {
    float: right;
    width: 100%;
}
.nav-bar li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.nav-bar li a:hover {
   color: white;
   background-color: #111;
}

.values {
  background-image: url('./images/background-celebs.png');
  background-size: cover;
  background-position: 50% 50%; 
  color: white;
  padding-bottom: 10rem;
  padding-top: 10rem;
}

.vote-counter {
       display: inline-flex;
       align-items: center;
       background-color: #333;
       border-radius: 20px;
       padding: 5px 15px;
       font-size: 16px;
       color: white;
   }
   .vote-counter .vote-button {
       background: none;
       border: none;
       color: white;
       cursor: pointer;
       padding: 0;
       width: 24px;
       height: 24px;
   }
   .vote-counter .vote-button:focus {
       outline: none;
   }
   .vote-counter .vote-count {
       margin: 0 10px;
   }
   .up-arrow::before, .down-arrow::before {
       content: '';
       display: block;
       width: 0;
       height: 0;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
   }
   .up-arrow::before {
       border-bottom: 5px solid white;
   }
   .down-arrow::before {
       border-top: 5px solid white;
   }
   
   
   input[type="date"] {
     height: 38px;
     padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
     background-color: #fff;
     border: 1px solid #D1D1D1;
     border-radius: 4px;
     box-shadow: none;
     box-sizing: border-box; }
     
   input[type="date"] {
     -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none; }
             
   input[type="date"]:focus {
     border: 1px solid #33C3F0;
     outline: 0; }
   
   
   @media (min-width: 400px) {
      #mobile-spacer {
         display:none;
      }
      
      #bet-input {
         background-color:#d3d3d3;padding:20px;border-radius:8px;margin-left:auto;margin-right:auto;
         width: 100%
      }
      
      .td-width {
         width: 50%;
      }
   }
      
   @media (min-width: 550px) {
      #bet-input {
         width: 100%;
      }
      
      
   }
   
   @media (min-width: 750px) {
      #bet-input {
         width: 48%;
         margin-left: 26%;
      }
   }
   
   
   /* Basic styling */
   #hamburger {
       display: none;
       cursor: pointer;
       font-size: 30px;
       padding-right: 10px;
       float: right;
       /* margin-top: -95px; */
       position: absolute;
       right: 10px;
       top: 20px;
       
   }

   /* Style the navigation menu */
   ul#navMenu {
       list-style-type: none;
       margin: 0;
       margin-top: 3% !important;
       padding: 0;
   }

   ul#navMenu li {
       padding: 8px;
       margin-bottom: 7px;
       /* background-color: #f8f8f8; */
       display: block;
   }

   /* Media query for screens that are 768px wide or less */
   
   @media (max-width: 450px) {
       #hamburger {
           display: block;
           
       }

       ul#navMenu {
           display: none;
       }
   }
   
   @media (min-width: 451px) {
       #hamburger {
           display: block;
           /* margin-top: 0px; */
       }

       ul#navMenu {
           display: none;
       }
   }
   
   @media (min-width: 1031px) {
       #hamburger {
           display: none;
       }

       ul#navMenu {
           display: block;;
       }
       
       .nav-bar {
           margin-top: 10px;
       }
       .nav-bar ul {
          position: relative !important;
          top: 0px;
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background-color: white;
       }
       .nav-bar li {
           float: right;
           width: auto;
       }
       .nav-bar li a {
           display: block;
           color: black;
           text-align: center;
           padding: 14px 16px;
           text-decoration: none;
       }
       .nav-bar li a:hover {
          color: white;
          background-color: #111;
       }
   }
   
   @media (min-width: 400px) {
      .mobile_hide {
         display:none;
      }
   }
      
   @media (min-width: 550px) {
      .mobile_hide {
         display:block;
      }
   }
   
   @media (min-width: 750px) {
      .mobile_hide {
         display:block;
      }
   }