@font-face {
  font-family: 'mousey-regular';
  src: url('/assets/fonts/webfontkit-20250608-162842/mousey-regular-webfont.woff');
}



.container {
  margin: 40px;
  background-color: transparent;
  display: flex;
  flex-direction: column; /* ⬅️ THIS LINE IS NEW */
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.title {
 margin: 0 auto;
}

h1 {
   color: darkgreen;
 font-family: "mousey-regular";
 font-weight: bold;
 font-size: 50px;
}


.dressuparea {
  width: 80%;
  height: fit-content;
  margin: 10px auto;
  background: url("/assets/img/dressupme.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.tops {
  height: 250px;
  width: 50%;
  position: relative;
  top: 120px;
  margin: 0 auto;
  align-content: center;
  z-index: 2;
  
  display: flex;
  justify-content: center;
}

.bottoms {
  height: 300px;
  width: 50%;
  position: relative;
  top: 30px;
  margin: 0 auto;
  z-index: 1;
  
  display: flex;
  justify-content: center;
}


.buttonup {
background-color: transparent;
 background-size: 50px;
 height: 50px;
 width: 50px;
 cursor: pointer;
 margin: auto;
 border: none;
}

.buttondown {
  background-color: transparent;
 background-size: 50px;
 height: 50px;
 width: 50px;
 cursor: pointer;
 margin:auto;
 border: none;
}


.note {
 width: 20%;
 background-image:  url("/assets/img/sticky.png");
 background-size: cover;
 background-repeat: no-repeat;
}

.note p {
 margin-top: 50px;
 margin-left: 20px;
 margin-right: 20px;
 margin-bottom: 30px;
 font-family: "mousey-regular";
 font-size: 15pt;
 
}