/* @font-face {
  font-family:Pixelify Sans;
  src: url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');
} */

html { 
    background-color:#2356AD;
    cursor: url("../img/cursor.png"), auto;
    font-family: "Pixelify Sans", sans-serif;
    color:#FFB8FF;
}

.star {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 150px;
}

.marquee {
  display: block;
  margin: auto;
  margin-top: 225px;
  
  background-size: contain;
 
}


#container {
  gap: 5px ;
  /* margin: 900px; */
  display: flex;
  justify-content: center;
  /* grid-template-areas: 
  
  "p p p p s s o o"
  "p p p p s s o o"
  "p p p p s s o o"

  ; */
}

.doll {
  width: 300px;
}

#paper-column {
  width: 875px;
  height: 1200px;
}

#column-two {
  width: 415px;
  height: 1200px;
  background-color: white;
}

#column-three {
  width:415px;
  height: 1200px;
  background-color: #FFB8FF;
}

.draggable-box {
  position: absolute;
}

.icons {
  width: 120px;
  display: flex;
  gap: 25px 20px;
  row-gap: 25px;
  column-gap: 20px;

}

#button{
  padding: 25px;
  position: relative;
  margin-bottom: 200px;
  margin-left: 150px;
  margin-top: 1500px;
  color:white; 
  font-size: 30px;
  border-radius: 10px;
  font-weight:bold;
  background-color:deeppink;
  height: 80px;
  width: 180px;
}

#freeform{
  margin: auto;
}

.hidden {
  display: none;
}

/* by default, all the clothes are hidden when 
the page loads */
.clothing-container {
  display: none;
}

#text-entry-box {
  width: 90%;
  margin: auto;
  margin-left: 100px;
}

#back {
  background-repeat: no-repeat;
  background-size: cover;
}

#animated { 
  position: sticky;
  margin-top: 25px;
  margin-left: 50px;
}

.star2 {
  position: static;
  margin-top: 50px;
  margin-left: 50px;
}

#space {
  position: relative;
  margin-top:400px;
  margin-left: 600px;
}