@font-face {
                font-family: Frutiger;
                src: url('f.ttf'), url('https://eclipse-the-feathered-dragon.neocities.org/fonts/Frutiger.ttf');
            }

            @font-face {
                font-family: Frutiger;
                src: url('f.ttf'), url('https://eclipse-the-feathered-dragon.neocities.org/fonts/Frutiger.ttf');
                font-weight: bold;
            }

            @font-face {
                font-family: Frutiger;
                src: url('f-i.ttf'), url('https://eclipse-the-feathered-dragon.neocities.org/fonts/Frutiger-I.ttf');
                font-style: italic;
            }

            @font-face {
                font-family: Frutiger;
                src: url('f-i.ttf'), url('https://eclipse-the-feathered-dragon.neocities.org/fonts/Frutiger-I.ttf');
                font-style: italic;
                font-weight: bold;
            }
            
            body {
                font-family: 'Frutiger', sans-serif;
                margin: 0;
                background-image: url('https://eclipse-the-feathered-dragon.neocities.org/other/images/fa-music-notes.jpg');
		            background-position: center;
                background-attachment: fixed;
            }
            
            * {
                box-sizing: border-box;
            }
            
            
            #container {
                max-width: 920px;
                margin: 0 auto;
            }

            #container a {
		            color: #94cdff;
		            font-style: italic;
            }
            
            #container a:hover {
                text-decoration: none;
            }


            main {
                background-color: #74bffc;
                border: 4px solid #2b60ac;
                border-radius: 30px;
                padding: 20px;
		            margin-top: 20px;
                position: relative;
                overflow: hidden;
                z-index: 0;
            }

            main::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 50px;
                background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
                border-bottom-left-radius: 1000px 300px;
                border-bottom-right-radius: 1000px 300px;
                z-index: -2;
                overflow: hidden;
                inset: 0;
                clip-path: inset(0 round 30px);
                border-top-left-radius: 30px;
                border-top-right-radius: 30px;
            }


footer {
    background-color: #74bffc;
		color: #ffffff;
    border: 4px solid #2b60ac;
		border-bottom: none;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    width: 100%;
    height: 50px;
    padding: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 15px; 
		font-size: smaller;
}
            
            

            h1,
            h2,
            h3 {
                color: #ffffff;
            }

            h1 {
                font-size: 25px;
            }
            
            
            p {
                color: #ffffff;
		font-size: 18px;
            } 
            
            #header {
                width: 100%;
                height: 300px;
                padding: 8px;
                background-color: #6daee4;
                border: 4px solid #2b60ac;
		border-top: none;
                border-bottom-left-radius: 30px;
                border-bottom-right-radius: 30px;
            }

	    #buttons {
		float: left;
		margin-right: 20px;
		height: 200px;
		display: flex;
		flex-direction: column;
		gap: 18px;
            }

button {
border: none;
background: none;
cursor: pointer;
display: flex;
align-items: center;
position: relative;
}

	    button .bar {
		background-image: linear-gradient(#026bcc, #024bc2);
		border: 3px solid #002d85;
		border-radius: 20px;
		color: #badffe;
		font-family: 'Frutiger';
		font-size: 18px;
		padding: 5px;
		padding-left: 70px;
		height: 35px;
		width: 160px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
                position: relative;
                overflow: hidden;
                z-index: 0;
	    }

button .bar::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 20px;
background-image: linear-gradient(rgba(53, 156, 252, 0.8), rgba(53, 156, 252, 0));
border-bottom-left-radius: 1000px 300px;
border-bottom-right-radius: 1000px 300px;
z-index: -2;
overflow: hidden;
inset: 0;
clip-path: inset(0 round 20px);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

button img {
width: 100%;
height: 100%;
}

button .icon {
position: absolute;
width: 50px;
height: 50px;
background-image: linear-gradient(#026bcc, #024bc2);
border: 3px solid #002d85;
border-radius: 50%;
padding: 6px;
overflow: hidden;
z-index: 2;
}

#buttons a {
text-decoration: none;
}

.artist, .genre, .album, .song {
background-image: linear-gradient(#026bcc, #024bc2);
border: 4px solid #002d85;
border-radius: 30px;
padding: 20px;
margin-bottom: 20px;
}

.album, .song {
min-height: 310px;
}

.artist .icon {
float: left;
width: 40px;
margin-top: 15px;
margin-right: 6px;
}

.album .cover {
float: left;
width: 240px;
margin-top: 15px;
margin-right: 15px;
border: 3px solid #002d85;
}

.song .cover {
float: left;
width: 240px;
margin-top: 15px;
margin-right: 15px;
border: 3px solid #002d85;
}

.song h2 {
  margin-bottom: 5px;
}

.quote {
  color: #91ceff;
  margin-top: 0;
  font-style: italic;
}