@import url(root.css);
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    image-rendering: pixelated;
    font-family: arial;
    font-weight: 600;
    color: rgb(104, 46, 46);
    cursor: url("https://file.garden/aKM6cgV5eixaX8Eq/cursor-_1_.png"), auto;
}
body{
    background: var(--bg);
    filter: url(#filter);
}
.container{
    width: 600px;
    height: max-content;
    margin: 0 auto;
    margin-top: 20px;
}
header{
    background: var(--pink);
    height: 150px;
    width: 100%;
    clip-path: polygon(8% 0, 100% 0, 100% 30%, 100% 90%, 92% 100%, 30% 100%, 0 100%, 0 9%);
    position: relative;
    border: 2px solid rgb(255, 255, 255);
}
@font-face {
    font-family: one;
    src: url("https://file.garden/aKM6cgV5eixaX8Eq/VENUSRIS.TTF");
}
header h1{
    position: absolute;
    bottom: 0;
    font-family: one;
    font-style: italic;
    color: white;
}
.circles{
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
}
.circle{
    width: 50px;
    height: 50px;
    border-radius: 100px;
    background: white;
    position: absolute;
    right: 0;
    z-index: 67;
}
.lines{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    left: 0;
    top: 0;
}
.lines hr{
    border: 6px solid rgb(153, 226, 255);
    width: 100%;
    position: absolute;
    top: 0;
}
nav{
    width: 25%;
    height: max-content;
}
main{
    width: calc(100% - 25%);
    font-size: 8pt;
}
main, nav{
    margin-top: 10px;
}
.link{
    background: var(--pink);
    width: 50px;
    height: 50px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    margin-top: 20px;
    cursor: crosshair;
}
.link:nth-child(even) {
    float: right;
}
.link:hover{
    filter: brightness(110%);
}
main{
    background: url("https://file.garden/aKM6cgV5eixaX8Eq/kabe041.gif");
    height: 200px;
    margin-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    position: relative;
}
.headings, .headings h2{
    text-align: right;
    font-size: 10pt;
    color: rgb(153, 226, 255);
}
.headings hr{
    border: 3px solid rgb(153, 226, 255);
    width: 230px;
    float:right;
}
.headings{
    position: relative;
    width: 100%;
    height: 20px;
    margin-right:15px;
}
.content{
    display: none;
}
.btns{
    display:flex;
    gap: 10px;
    padding:10px;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.btns button{
    background:greenyellow;
    border: none;
    color: var(--pink);
    font-family:one;
}
#songTitle{
    text-align:center;
}
.btns button:hover {
    cursor: crosshair;
    font-style:italic;
}
.btns button:active{
    transform: scale(0.9);
}
input[type=range] {
    width: 160px;
    cursor: pointer;
}
span{
    background: greenyellow;
    color: white;
}
.mybtn{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100px;
    text-align: center;
}
#more ll{
  list-style-image: url("https://file.garden/aKM6cgV5eixaX8Eq/bul4.gif");
}
#more ul{
  list-style-position: inside;
  list-style-image: url("https://file.garden/aKM6cgV5eixaX8Eq/bul4.gif");
}
#more a{
  text-decoration: none;
  cursor: crosshair;
}
#more a:hover{
  font-style: italic;
}
@keyframes fade{
  0%{
    opacity: 0;
    transform: translateX(10px);
  }
  100%{
    opacity: 1;
    transform: translateX(1);
  }
}
.content{
  animation: fade 1s ease-in-out;
}