.middle-shapes {
  width: 600px;
  margin: 100px auto 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  position: relative;
}

.pink {
  width: 100%;
  height: 25px;
  background-color: #D098B9;
}

.purple {
  width: 100%;
  height: 25px;
  background-color: #77626E;
 
}
.top {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #77626E;
}

.bottom {
  width: 100%;
  height: 30px;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #D098B9;
}
h1 {
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
  font-family: "sabbath-black", serif;
font-weight: 800;
font-style: normal;
 white-space: nowrap;
    font-size: 70px;
    width: max-content;
}
h1:hover {
    font-size: 75px;
    font-weight: 1000;
}

.center {
   position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
}
.nav-bar{
margin: 8px 0 8px 0;
display: grid;
column-gap: 2px;
row-gap: 2px;
z-index: 11;
        }
a:hover {
  background-color: #d09abb;
  color: white;
}
.menu {
grid-template-columns: repeat(4, 1fr);
font-family: "sabbath-black", serif;
font-weight: 800;
font-style: normal;
 white-space: nowrap;
position: relative;
top: -20px;
  
        }
.button {
  color: black;
  text-decoration: none;
  padding: 15px;
  display: block;
  cursor: pointer;
}

.line-art {
     position: fixed;
  left: -100px;
  top: -15px;
  z-index: -1;
}