/* Basic reset 2025-08-05 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
    }

    /* Menu styling */
    nav a {border-radius: 12px;}
    nav {
      background-color: #333;
      border-style: solid;
      border-width: 2px;
    }

    ul.menu {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
    }

    ul.menu > li {
      position: relative;
    }

    ul.menu > li > a {
      display: block;
      padding: 15px 20px;
      color: white;
      text-decoration: none;
      border-style: solid;
      border-width: 2px;
      height: 50px;
      border-color: darkblue;
      background-color: teal;
    }

    buttonstyle {
      border-style:solid;
      border-radius: 8px; 
      display: block;
      padding: 15px 20px;
      font-size: 16px; 
      border-radius: 12px; 
      color: white; 
      height: 40px; 
      background-color: teal;
      width: 200px;
    }
    
    .opencourt {
      background-color: darkgreen;
      color: white;
      width: 60px
    }
     
     .opencourt:hover {
      background-color: darkblue;  
     }
        
    .doublescourt {
       background-color: teal;
       color: white;
       width: 60px;
     }
    
    .doublescourt:hover {
      background-color: darkblue;  
    }
       
    .selectoptions {
       background-color: yellow;
       color: black;
       width: 100px;
       height: 28px;
     }
    
    .selectoptions:hover {
      background-color: lightyellow;  
    }
         
    .buttoncourt {
       background-color: teal;
       color: white;
       width: 150px;
       font-size: 15px;
       border-style:solid;
       border-radius: 8px; 
     }
    
    .buttoncourt:hover {
      background-color: darkblue;  
    }   
    .bookedcourt {
       background-color: lightgray;
       color: black;
       width: 60px
       
    }
       
    ul.ulstyle > li button:hover {
      background-color: darkblue;  
    }

    ul.menu > li a:hover {
      background-color: darkblue;
    }

    /* Submenu styling */
    ul.submenu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      list-style: none;
      min-width: 160px;
      z-index: 800;
    }

    ul.submenu li a {
      text-align: center;
      padding: 10px 20px;
      display: block;
      color: white;
      text-decoration: none;
      background-color: darkgreen;
    }

    ul.submenu li a:hover {
      background-color: darkblue;
    }
    
    ul.ulstyle > li button {
      border-radius: 10px;
    }
  
    ul.submenu li span:hover {
      background-color: darkblue;
    }
      
    /* Show submenu on hover */
    ul.menu > li:hover .submenu {
      display: block;
    }
    
    .submenuinput {
      text-align: center;
      padding: 10px 20px;
      display: block;
      border-radius: 12px;
      min-width: 160px;
      height: 60px; 
      font-size: 16px; 
      background-color: darkgreen;
      color: white;
      top: 100%;
      left: 0;
    }