.bar {
  background-color: #222;
  display: block;
  height: 0.15em;
  width: 100%;
  border-radius: 0.1em;
  cursor: pointer;
  box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.80);
  z-index: -3;
  opacity: 0.5;
}

.bar:hover {
  color: #fff;
  opacity: 1;
  cursor: pointer;
}

.cloud-container {
  position: absolute;
  display: flex;
  background-image: url('https://joseywails.com/assets/cloud.png');
  background-size: cover;
  width: 20vw;
  aspect-ratio: 400 / 220; 
  top: 5vh;
  left: 1.5vw;
  font-family: "homemadeapple";
  font-size: 2.5vw;
  z-index: 990;
  opacity: 0.7;
  cursor: pointer;
  filter: grayscale(100%)
}

.cloud-container.dropdown {
  position: absolute; 
}

.cloud {
  padding-left: 9.3vw;
  padding-top: 5vw;
  cursor: pointer;
  opacity: 0.9;
}

.cloud:hover {
  opacity: 1;
  transition: .1s ease-in-out;
}



.menu-content {
  background-image: url('https://joseywails.com/assets/rain.png');
  display:none;
  background-size: contain;
  background-repeat: repeat-y;
  background-position: center;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%; 
  display: flex;
  flex-direction: column;
  overflow: hidden; 
  max-height: 0; 
  margin-top: -10px;
  padding-top: 20px;
  z-index: 9994; 
  transition: max-height 0.5s ease-in-out, opacity 0.2s ease-in-out;
  animation: scrollBackground 3s linear infinite;
  opacity: 0;
}

@keyframes scrollBackground {
    from {
        background-position: 0 0; 
    }
    to {
        background-position: 0 100%;
    }
}

.menu-content.show {
  max-height: 800px;
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent);
  mask-image: linear-gradient(to bottom, black 80%, transparent);
  opacity: 1;
}

.menu-content a {
  padding: 6.5px 6.5px;
  text-decoration: none;
  display: block;
  text-align: center;
  color: #A9A9A9;
  font-size: 2.8vw;
  box-sizing: border-box;
}

.menu-content a:hover {
  text-decoration: underline dotted;

}