.menu {
      background: black;
      height: 80px;      
    }

    .menu ul {
      list-style: none;
    }

    .menu > ul {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }

    .menu > ul > li {
      position: relative;
    }

    .menu a {
      display: block;
      padding: 16px 22px;
      color: white;
      text-decoration: none;
      font-family: "Bangers", system-ui;
      font-weight: 300;
      font-size: 21pt;
      font-style: normal;
      color: white;
      transition: background 0.3s;
    }

    .menu a:hover {
      background: #444;
    }

    .submenu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 220px;
      background: #333;
      z-index: 999;
    }

    .submenu li a {
      padding: 12px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      white-space: nowrap;
    }

    .submenu li a:hover {
      background: #555;
    }

    .menu li:hover > .submenu {
      display: block;
    }

    /* Responsive */
    @media (max-width: 1023px) {
    
    
    .menu {
      background: black;
      height: auto;
      width: 100%;
    }

    .menu a{font-size: 16pt;}
 

      .menu > ul {
        flex-direction: column;
        align-items: stretch;
      }

      .menu > ul > li {
        width: 100%;
        border-top: 1px solid rgba(255,255,255,0.08);
      }

      .menu a {
        width: 100%;
      }

      .submenu {
        display: block;
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
        transition: 0.3s ease;
        }

      .submenu li a {
        padding-left: 35px;
        white-space: normal;
      }

      .menu li:hover > .submenu {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        }
    }