/* Initial CSS setup without hover-based display rules */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f7f7f7;
  height: 100%;
  background: linear-gradient(135deg, #432371, #faae7b) fixed;
  background-size: 100% 50%;
  background-repeat: repeat-y;
}

/* nav {
  background-color: #bca5bec7;
  padding: 20px;
}

.menu {
  list-style: none;
}

.menu ul {
  list-style: none;
}

.menu-item {
  background-color: #be1818;
  display: inline-block;
  position: relative;
}

.menu-item a {
  color: #f7f7f7;
  text-decoration: none;
}

.menu-item > a {
  background-color: #bca5be;
  padding: 10px 20px;
  display: block;
  white-space: nowrap;
}

.submenu, .subsubmenu {
  display: none; 
  position: absolute;
  background-color: #bca5beaa;
  min-width: 150px;
  z-index: 10;
  text-align: center;
}
.submenu a, .subsubmenu a{
  padding: 10px 20px;
  display: block;
  white-space: nowrap;
}

.submenu {
  top: 100%;
  left: 0;
}

.subsubmenu {
  top: 0;
  left: 100%;
} */



  /* nav {
    background-color: #bca5bec7;
    padding: 20px;
    flex-grow: 1;
  }
  
  .item{
    position: relative;
    display: inline-block;
  }

  .item > a{
    color: #f7f7f7;
    text-decoration: none;
    padding: 10px 20px;
    background-color: #bca5be;
    display: flex;
  }
  .item ul{
    list-style: none;
  }

  .submenu{
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #bca5beaa;
    display: none;
    text-align: center;
    min-width: 150px;
  }
  .submenu li a{
    color: #f7f7f7;
    padding: 10px;
    text-decoration: none;
    display: block;
  }

  .subsubm{
    position:absolute;
    top:0;
    left: 100%;
    display: none;
    background-color: #bca5beaa;
    width: 100px;
    min-width: 150px;
  }

  .subsubm li a {
    color: white;
    padding: 10px;
    text-decoration: none;
    display: block;
  }

  .menu > .item:hover .submenu {
    display: block;
  }
  .submenu li:hover .subsubm {
    display: block;
  }
 */