body{
  background: url(/images/22864682_6709086PINK.png);
  margin: 10px auto;
  width: 1060px;
}

h1{
  font-family: cursive;
  color: white;
  margin: 0px 0px 0px 0px;
  font-size: 45px;
  background: rgb(37,167,250);
  background: -moz-linear-gradient(180deg, rgba(37,167,250,1) 3%, rgba(77,184,252,1) 8%, rgba(59,180,255,1) 11%, rgba(0,156,255,1) 22%, rgba(39,171,255,1) 40%, rgba(37,167,250,1) 78%);
  background: -webkit-linear-gradient(180deg, rgba(37,167,250,1) 3%, rgba(77,184,252,1) 8%, rgba(59,180,255,1) 11%, rgba(0,156,255,1) 22%, rgba(39,171,255,1) 40%, rgba(37,167,250,1) 78%);
  background: linear-gradient(180deg, rgba(37,167,250,1) 3%, rgba(77,184,252,1) 8%, rgba(59,180,255,1) 11%, rgba(0,156,255,1) 22%, rgba(39,171,255,1) 40%, rgba(37,167,250,1) 78%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#25a7fa",endColorstr="#25a7fa",GradientType=1);
  border-radius: 30px 30px 0px 0px;
  padding: 0px 0px 5px 20px;
  cursor: pointer;
}
h1 span{
  margin-left: 690px;
  &:hover{
    color: aqua;
  }
}
#container{
  border-radius: 35px 35px 10px 10px;
  position: absolute;
  /* margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  width: 1050px;
  height: 850px;
  background-color: rgb(255, 255, 255);
  border: black solid 5px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
}
#dressup{
  margin: 0;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  width: fit-content;
  height: fit-content;
  gap: 20px;
}
#dressupzone{
  width: 434px;
  height: 760px;
  margin: auto;
  border-radius: 35px;
  background-image: url(/images/22864682_6709086PINK.png);
  box-shadow: rgb(165, 0, 91) inset 0px 0px 10px;
}
.sidebar{
  width: 260px;
  height: 700px;
  background: hotpink;
  clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
  box-shadow: rgb(165, 0, 91) inset 0px 0px 10px;
}
.buttons{
  transform: skew(2deg);
}
button img{width:100px;}
.baddie button, .tab button{
  border-radius: 30px;
  margin: 10px auto;
  font-family: cursive;
  font-weight: bold;
  outline: none;
  color: white;
  outline-offset: 0px;
  background: rgb(255,105,180);
  background: -moz-linear-gradient(180deg, rgba(255,105,180,1) 0%, rgba(255,147,201,1) 2%, rgba(255,143,197,1) 7%, rgba(255,117,184,1) 16%, rgba(255,88,172,1) 25%, rgba(255,98,176,1) 32%, rgba(255,105,180,1) 62%);
  background: -webkit-linear-gradient(180deg, rgba(255,105,180,1) 0%, rgba(255,147,201,1) 2%, rgba(255,143,197,1) 7%, rgba(255,117,184,1) 16%, rgba(255,88,172,1) 25%, rgba(255,98,176,1) 32%, rgba(255,105,180,1) 62%);
  background: linear-gradient(180deg, rgba(255,105,180,1) 0%, rgba(255,147,201,1) 2%, rgba(255,143,197,1) 7%, rgba(255,117,184,1) 16%, rgba(255,88,172,1) 25%, rgba(255,98,176,1) 32%, rgba(255,105,180,1) 62%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff69b4",endColorstr="#ff69b4",GradientType=1);
  border: none;
  box-shadow: 5px 5px 5px 0px rgba(199, 0, 116, 0.2);
  cursor: pointer;
}
.baddie button:hover{
  outline: 4px solid hotpink;
}
.tab{padding-top: 10px;}
.tab button{
  display: block;
  height: 40px;
  width: 160px;
  font-size: 20px;
  background: rgb(37,167,250);
  background: -moz-linear-gradient(180deg, rgba(37,167,250,1) 3%, rgba(77,184,252,1) 8%, rgba(59,180,255,1) 11%, rgba(0,156,255,1) 22%, rgba(39,171,255,1) 40%, rgba(37,167,250,1) 78%);
  background: -webkit-linear-gradient(180deg, rgba(37,167,250,1) 3%, rgba(77,184,252,1) 8%, rgba(59,180,255,1) 11%, rgba(0,156,255,1) 22%, rgba(39,171,255,1) 40%, rgba(37,167,250,1) 78%);
  background: linear-gradient(180deg, rgba(37,167,250,1) 3%, rgba(77,184,252,1) 8%, rgba(59,180,255,1) 11%, rgba(0,156,255,1) 22%, rgba(39,171,255,1) 40%, rgba(37,167,250,1) 78%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#25a7fa",endColorstr="#25a7fa",GradientType=1);
}
.tab button:hover{
  outline: 4px solid rgb(37,167,250);
}
.selections, .hair, .bottom, .top, .face{
  display: none;
}
.selections button{
  margin: auto;
  display: block;
  background: none;
  border: none;
}
.selections{
  background: white;
  border-radius: 20px;
  width: 140px;
  margin: 30px auto auto;
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.356);
}
#Tops, #Faces, #Bottoms, #Hairs{overflow-y: scroll; height: 440px;}
#me{
  background: none;
  border-radius: 0px;
  box-shadow: none;
  margin-top: -150px;
  margin-left: -124px;
}
.pick{
  transform: skew(2deg);
}
.baddie{
  transform: skew(-2deg);
  background: rgb(37,167,250);
  box-shadow: rgb(11, 90, 139) inset 0px 0px 10px;
}
.baddie button{
  height: 50px;
  width: 220px;
  margin-top: 20px;
  margin-left: 19px;
  font-size: 30px;
}
.speech{
  background: url(/dressup/baddie_bubble.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 340px;
  height: 230px;
  position: absolute;
  margin-left: 690px;
  margin-top: -300px;
  transform: rotate(-4deg);
}
.speech p{
  color: black;
  font-family: cursive;
  text-align: center;
  font-size: 22px;
  width: 280px;
  height: 90px;
  padding: 10px 6px;
  margin-left: 13px;
}
#cece{
  margin-left: -40px;
  width: 360px;
  margin-top: 130px;
}
#cece img{
  position: absolute;
}
#Ew, #Love, #Cute, #Hmm{
  display: none;
}
.emotes{
  display: none;
}
#background{
  width: 434px;
  height: 760px;
  margin: auto;
  border-radius: 35px;
  background-image: url(/images/22864682_6709086PINK.png);
  box-shadow: rgb(165, 0, 91) inset 0px 0px 10px;
}
#billie, #face, #hair, #top{
  position: absolute;
  width: 434px;
  height: 760px;
}
#billie{background-image: url(base.png);}

.face, .bottom, .top, .hair{
  position: absolute;
  width: 434px;
  height: 760px;
}
/* top pieces */
#top1{
  background-image: url(t1.png);
}
#top2{
  background-image: url(t2.png);
}
#top3{
  background-image: url(t3.png);
}
#top4{
  background-image: url(t4.png);
}
#top5{
  background-image: url(t6.png);
}
#top6{
  background-image: url(t7.png);
}
#top7{
  background-image: url(t8.png);
}
#top8{
  background-image: url(t9.png);
}
#top9{
  background-image: url(t10.png);
}
#top10{
  background-image: url(thmm.png);
}

/* bottom pieces */
#bottom1{
  background-image: url(b10.png);
}
#bottom2{
  background-image: url(b9.png);
}
#bottom3{
  background-image: url(b8.png);
}
#bottom4{
  background-image: url(b7.png);
}
#bottom5{
  background-image: url(b6.png);
}
#bottom6{
  background-image: url(b4.png);
}
#bottom7{
  background-image: url(b3.png);
}
#bottom8{
  background-image: url(b2.png);
}
#bottom9{
  background-image: url(b1.png);
}
#bottom10{
  background-image: url(bhmm.png);
}

/* face pieces */
#face1{
  background-image: url(f11.png);
}
#face2{
  background-image: url(f7.png);
}
#face3{
  background-image: url(f3.png);
}
#face4{
  background-image: url(f4.png);
}
#face5{
  background-image: url(f2.png);
}
#face6{
  background-image: url(f6.png);
}
#face7{
  background-image: url(f12.png);
}
#face8{
  background-image: url(f8.png);
}
#face9{
  background-image: url(f5.png);
}

/* hair pieces */
#hair1{
  background-image: url(h1.png);
}
#hair2{
  background-image: url(h12.png);
}
#hair3{
  background-image: url(h2.png);
}
#hair4{
  background-image: url(h7.png);
}
#hair5{
  background-image: url(h3.png);
}
#hair6{
  background-image: url(h4.png);
}
#hair7{
  background-image: url(h8.png);
}
#hair8{
  background-image: url(h5.png);
}
#hair9{
  background-image: url(h6.png);
}
#hair10{
  background-image: url(hhmm1.png);
}

button.hi:hover{
  border: rgb(247, 247, 247) solid;
}

* {
  scrollbar-width: auto;
  scrollbar-color: #26a9fd #ffffff;
}
*::-webkit-scrollbar {
  width: 16px;
}
*::-webkit-scrollbar-track {
  background: #ffffff;
}
*::-webkit-scrollbar-thumb {
  background-color: #26a9fd;
  border-radius: 0px;
  border: 3px ridge #70c8ff;
}

.selections {
  scrollbar-width: thin;
  scrollbar-color: #26a9fd #ffffff00;
}
.selections::-webkit-scrollbar {
  width: 8px;
}
.selections::-webkit-scrollbar-track {
  background: #ffffff00;
}
.selections::-webkit-scrollbar-thumb {
  background-color: #26a9fd;
  border-radius: 0px;
  border: 1px ridge #70c8ff;
}