body {
    font-family: ms ui gothic;
    image-rendering: pixelated;
    background-image: url(https://file.garden/aS-t0Aj4K3mdDujK/sozai/background/10.png);
    
}

.main {
    border:1px solid;
    height:550px;
    width:650px;
    padding:15px;
    border-radius: 15px;
    box-shadow: inset 3px 3px 3px rgba(179, 79, 134, 0.5);
    background-image:url(https://foollovers.com/mat/dot02/a20-bg-polkadot.gif);
 

}

.inner {
    border:1px solid;
    padding:10px;
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAlklEQVQ4T72UUQ7AIAhD9f6H3uISDINSwWz6KeVVEenth9UTzAtoaB4LCgxpWKyVE8ypIdxCh4gZDWYUn/sMGhnIYXX8pdXQUEQeE+ZE0ERTOMk0EOjqqlmTh4OgVQNXgmPQ7FWRLrz+Z9ABqtbSmrvXt9CswbJPq+DUj2Il0OOv/PcFHA0OVEenPTZPo9Po/e3Jv92vNzTVMhaw0h3zAAAAAElFTkSuQmCC") 7 /  7px / 0 round;
    border-width:  7px;
    border-style:  solid;
    height:510px;
    background-color:white;
    border-radius: 10px;
        display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 5px;
  grid-auto-flow: row;
  grid-template-areas:
    "want favs favs"
    "want currently currently"
    "want finished finished";
    
}



.favs,.finished { 

border:1px solid;
border-radius: 8px;
padding:10px;
font-size: 12px;
overflow-y: scroll;
}

.favs {
    grid-area: favs;
}

.favs img, .finished img {
    height:140px;
    border:1px solid;
    border-radius: 10px;
    float: left;
    margin: 5px;
    margin-left: -40px;

}



.want {
     grid-area: want; 
border:1px solid;
border-radius: 8px;
overflow-y: scroll;
}

.currently { 
    grid-area: currently; 
    border:1px solid;
    border-radius: 8px;
    padding:10px;
    overflow-y: scroll;
    font-size: 12px;
    
}

.currently img {
    border:1px solid;
    height:140px;
    float:right;
    margin:5px;
    border-radius: 10px;
    margin-right: -40px;
}


h5 {
    margin-left: 100px;
}

.progress {
    height:15px;
    border:2px solid rgb(255, 134, 195);
    width:130px;
    border-radius: 7px;
    background-image: url(https://foollovers.com/mat/dot/b17-bg-polkadot.gif);
    margin-left: 30px;
}

.currently span {
margin-left: 170px;
}

text {
    background:black;
}

text:hover {
background:transparent;
}

span {
    font-size: 12px;
    width:380px;
}

.fill {
    border-radius: 6px;
    height:15px;
    background-color:rgba(255, 168, 183, 0.664);
    margin-right: auto;
}

.finished { 
    grid-area: finished;

}

.lace1 {
    background-image:url(https://foollovers.com/mat/frill/ob01-bg-frill.gif);
    background-repeat: repeat-x;
    height:58px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    position:sticky;
    margin-top: -495px;
    width:199px;
    margin-left: 1px;


}

li img {
    height:20px;
    transition: ease 1s;
}

li img:hover {
    transform: scale(5);
}

li {
    font-size: 12px;
}

summary {
    list-style: none;
    font-size: 12px;
    cursor: pointer;
}

.lacie {
    background-image:url(https://foollovers.com/mat/frill02/fa14-bg-frill.gif);
    height:390px;
    position:fixed;
}

.finished img {
    margin-left: -80px;
}