body {
    margin-top: 1.5em;
}

h1 {
    margin: .5em 0;
    font-family: "Love Marker";
    font-size: 1.5em;
}

#top {
    display: flex;
    width: 85%;
    margin: auto;
    margin-top: 1em;
    /* font-size: .875em; */
}

#top > .half1 {
    width: 40%;
    margin-right: 1em;
}

#top > .half2 {
    width: calc(60% - 20px);
    border: 1px solid black;
    height: calc(200px - 20px);
    background-image: linear-gradient(145deg, #ffd4e2 25%, #ffe8f0 25%, #ffe8f0 50%, #ffd4e2 50%, #ffd4e2 75%, #ffe8f0 75%, #ffe8f0 100%);  
    background-size: 52.30px 36.62px;
    padding: 10px;
    overflow: auto;
    text-shadow: 1px 1px 1px #fff;
    font-family: Dekko;
    line-height: 1.25em;
}

.gugu {
    margin-top: 2em;
    /* width: 100%; */
    /* border: 1px solid black; */
}

.section {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    border-bottom: 1px solid rgb(230, 230, 230);
}

.section > .half1 {
    width: 60%;
    margin-right: 1em;
    /* border: 1px solid black; */
}

.section > .half2 {
    width: 40%;
    /* border: 1px solid black; */
    text-align: left;
}

.one > .half1 > .song {
    background: #ffe5f3;
}

.two > .half1 > .song {
    background: #ffe5e5;
}

.three > .half1 > .song {
    background: #e5e5ff;
}

.four > .half1 > .song {
    background: #c4ffc4;
}

.five > .half1 > .song {
    background: #ffc8ea;
}

.six > .half1 > .song {
    background: #c8fbff;
}

.song {
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.song:nth-child(even) {
    filter: brightness(105%);
}

.half2 p {
    width: 100%;
}

 .tippy-box[data-theme~="custom"] {
    background-color: #f7f7f7;
    color: black;
    border: 1px solid #ededed;
    border-radius: 0;
    width: 250px;
  }
  