<!--
⏔⏔⏔ ꒰ ᧔ෆ᧓ ꒱ ⏔⏔⏔
hi!! welcome to my source code!! i hope you find what youre looking for 𖹭.ᐟ
i kindly ask that you dont take or copy my whole layout, this is not a template (╥﹏╥)
but definitley feel free to take snippets, or look around to see how things are done!! 
(a few snippets are from other sites LMFAO but shhhhh dont tell anyone)
if theres something that you dont understand, feel free to ask be about it!! 
(unless its javascript you can ALWAYS assume its not mine)
⏔⏔⏔ ꒰ ᧔ෆ᧓ ꒱ ⏔⏔⏔
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣀⣤⣤⣤⣤⠤⠤⠤⣤⣤⣤⣤⣤⣄⣀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣴⠶⡟⠛⠋⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠉⠉⠛⠻⣶⣤⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣾⠛⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⢯⣻⣦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣾⡟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⣿⣦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣼⡟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢺⣿⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡿⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⣽⣷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣴⣿⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢿⣷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⡟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢿⣷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠀⣦⠀⠀⠀⠀⠀⠀⢸⡇⠠⡄⠀⠀⠀⠀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣾⡃⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⢠⣿⡿⠶⠿⢻⣦⣿⡞⠂⠀⠀⠀⠀⢨⣿⠀⣿⠀⠀⠀⠀⢿⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⢻⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⡏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⢸⡇⠀⠀⠀⠈⣷⣿⣿⡀⠀⠀⠀⠀⠀⣿⡇⢹⡇⠀⠀⠀⢸⣗⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠛⣷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⡇⠀⠀⠀⠀⠀⠀⠀⣤⠀⢰⣿⣸⡇⠀⠀⠀⠀⢹⣾⡿⣧⠀⠀⠀⠀⠀⣿⣿⢸⣷⠀⠀⠀⢸⣿⢇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⢹⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠀⠀⠀⠀⠀⠀⠀⠀⣿⡀⢸⣿⣿⡇⠀⠀⠀⠀⠸⣿⡇⣽⣤⠆⠀⠀⠀⣿⢸⣾⢸⡇⠀⠀⢺⡿⡇⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡗⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠁⠀⠀⠀⠀⠀⠀⠀⣿⡇⣼⡟⣿⡇⠀⠀⠀⠀⠀⣿⡇⢸⣯⣦⣄⡀⢠⣿⠈⣿⠘⣿⠟⢶⣾⡇⢷⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠀⠀⠀⠀⠀⠀⣶⠆⣿⢿⣽⡇⢽⡇⠀⠀⠀⠀⠀⠹⡇⠀⡿⠋⠉⠛⢻⡧⢠⡿⠾⠿⠟⠛⠛⠻⠿⢿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠀⠀⠀⠀⠀⠀⢹⡄⢿⠸⣿⣇⣸⣧⣶⠾⠿⠛⠛⠛⠁⠀⠀⠀⠀⠀⠀⠀⠀⢀⡴⢖⣐⢦⣀⣀⡀⠀⢿⣷⠀⠀⠀⠀⠀⣿⠈⠀⠃⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠀⠀⠀⠀⠀⠀⠘⣷⢸⣠⡿⣿⡋⠁⠀⠀⠐⣶⠦⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⣼⡟⣿⣿⣿⣿⣿⢿⣷⣌⢸⣦⡀⠀⠀⣠⣿⠂⠀⠀⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣿⡀⠀⠀⠀⠀⠀⠀⣿⣾⡅⠀⢈⣥⣶⣶⣾⣻⢷⣅⠻⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⢻⣷⡟⣿⢟⣟⡏⣿⣾⣿⣿⣶⣞⣵⣿⠠⠰⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⡖⠀⠀⢀⠀⠀⢰⣹⡿⡿⢠⣿⢻⣿⣿⣿⣿⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⣿⣿⣿⣿⡃⠉⣿⣿⢟⣿⣿⣿⣿⠐⢤⢠⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣷⠀⢄⣿⣦⡠⣀⠀⣿⠈⠸⣯⡸⣿⣿⣽⣾⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠓⠒⠛⠛⠁⣟⣵⡿⠛⡿⢿⣿⡇⣾⣸⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⣿⡙⣼⣿⣿⣿⣾⣶⣿⡄⠀⠈⢱⣬⣽⣿⡽⠟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⡋⠁⠀⠀⢸⣿⣧⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠺⣿⣿⢹⣿⣇⣧⢹⣿⣧⠀⠀⠀⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠀⠀⠀⠀⣾⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠿⢿⡎⣿⣿⣝⠛⡹⢷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⢉⣙⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠀⠀⠀⠀⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⣧⢹⣿⣿⣷⣝⡛⢷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠛⠘⠛⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⣄⣿⠀⠀⠀⢠⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⢸⣿⣿⣿⣿⣿⣿⣷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢤⠤⠄⠐⠚⠃⠀⠀⠀⠀⠀⠀⠀⣴⣿⡟⠀⠀⠀⢸⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢿⣼⣿⣿⣿⣿⣿⣿⣿⣿⣦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣾⣿⣿⡗⡄⠀⠀⣾⣿⣿⣿⡿⢿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⢼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣤⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⡾⠋⢸⣿⣿⡗⠃⠀⠄⣿⢿⣿⣿⠇⠸⠷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠿⠸⣿⡟⠁⢿⡟⣿⣿⣿⢿⣿⣿⣿⣿⣷⡶⢤⣄⣀⣀⠀⠀⠀⢀⣠⣤⠾⠛⠁⠀⠀⣾⣿⣤⡗⠀⠐⣱⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠋⠀⠀⠸⠇⠈⠟⠁⠀⠉⣩⣾⣿⣿⡇⠀⠀⠈⠉⠉⠉⠉⠉⠁⠀⠀⠀⠀⠀⢀⣸⣿⣿⣿⡄⢸⢸⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢠⡄⢀⣤⠞⠋⠀⠀⣠⣤⣄⠀⠀⣀⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⣶⣶⣤⣤⣄⣀⣀⣀⣀⣠⣤⣴⣶⣿⣿⣿⣿⣿⣿⡅⣽⣾⣁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢀⣴⠋⣴⠟⠁⠀⠀⠀⠀⣿⠀⠙⣿⡀⣿⠁⠘⣧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⡴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡏⡄⣿⡿⠻⠿⣦⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⣾⠁⣼⠃⠀⢠⡾⠶⣦⡀⢹⡄⠀⠸⣧⣿⠀⠀⢻⡦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡿⠋⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⡇⢻⡇⠀⠀⠙⢙⣷⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⢸⡇⠸⠇⠀⠀⠘⣇⠀⠈⢿⡼⣧⠀⠀⢿⢸⡇⠀⠈⡏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣤⠟⠻⣄⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣁⣼⠁⠀⢀⡴⠋⠀⠙⠳⣤⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⢀⣽⣆⠀⠈⢿⣿⡀⠀⢸⡇⡇⠀⢰⡿⠓⣶⠀⠀⠀⠀⠀⣠⣴⠿⠋⠁⠀⠀⠈⠳⢤⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⣿⢙⣟⣠⠶⠋⠀⠀⠀⠀⠀⠈⠙⢷⣄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⣻⡄⠙⣦⠀⠘⣿⡇⠀⠈⣿⣷⠀⡿⠀⢀⣿⣷⠀⢀⣴⠟⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⢀⣿⣿⡏⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠿⣦⡀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠸⣷⠀⠘⣧⠀⠘⣿⠀⠀⠈⠁⠀⣧⣴⣿⣿⣿⣴⣿⣧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣆⠉⠛⠻⠿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣿⠛⠉⣿⣿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⣦⡀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠹⡇⠀⢹⡆⠀⠀⠀⣀⣤⡶⠟⢽⠏⠁⢸⣿⡷⠙⣿⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣧⠄⠀⠀⠀⠀⠉⠉⠉⠉⠉⠉⠉⠉⠉⠀⣽⠇⠀⠀⢻⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢿⣆⠀
⠀⠀⠀⠀⠀⠀⠀⣾⣿⠀⣈⣡⡤⡶⣟⢉⡀⠀⠀⠀⢠⣺⡾⠋⠀⢀⣿⣞⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣧⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⡟⠀⠀⠀⠸⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⡿⢿⣆
⠀⠀⠀⠀⠀⠀⠀⠿⠿⠿⠭⠥⠤⠤⠭⠤⠤⠤⠤⠷⠿⠭⠤⠤⠴⠯⠤⠿⠬⠷⠤⠤⠤⠄⠀⠀⠀⠠⠤⠤⠤⠤⠽⠿⠷⠤⠤⠤⠤⠤⠤⠤⠤⠤⠤⠤⠿⠥⠤⠤⠤⠤⠤⠤⠤⠀⠀⠀⠀⠀⠀⠀⠀⠀⠤⠤⠤⠤⠼⠯⠤⠼⡧
have fun looking through!
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SMILE! ⭐️</title>
</head>
<link rel="icon" href="/favicon.ico" />
<style>
	#music-player {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
border-width: 7px; 
border-style: none none solid none;
border-color: white;
border-image: url("https://advelos.moe/homepagev3/borders/IMG_5491.png") 7 fill round;
            height: 30px;
            color: #8d4330;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            box-sizing: border-box;
            z-index: 10 ;
        }

        #controls {
            display: flex;
            gap: 10px;
        }

        #controls button {
            background-color: transparent;
            border: none;
            text-shadow: 2px 2px #ffd6b7;
            color: #8d4330;
            cursor: pointer;
        }

        #controls button:hover {
            color: #ff8ba6;
            text-shadow: 2px 2px #ffffff;
        }

        #progress-bar {
            position: relative;
            flex-grow: 1;
            height: 9px;
            border-radius:5px;
            background: rgba(255, 255, 255, 0.726);
            border: #ff8ba6 1px solid;
            margin: 0 10px;
            overflow: hidden;
            cursor: pointer;
        }

        #progress-fill {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 0%;
            background-image: url(https://advelos.moe/homepagev3/backgrounds/IMG_6633.jpeg);
            background-size: 10px;
            border-right:white 1px solid;
        }

        #song-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        #song-name {
            text-shadow:2px 2px rgb(255, 255, 255);
            font-size: 15px;
        }
        
        #current-time {
            text-shadow:2px 2px #ffffff;
            font-size: 11px;

        }
        
        #total-duration {
            text-shadow:2px 2px #ffffff;
            font-size: 11px;

        }

        /* Custom Volume Slider */
        #volume-slider {
            position: relative;
            width: 100px;
            height: 10px;
            border-radius:20px;
            background-color: rgba(255, 255, 255, 0.678);
             border: #ff8ba6 1px solid;
            cursor: pointer;
        }

        #volume-fill {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background-image: url(https://advelos.moe/homepagev3/backgrounds/IMG_6633.jpeg);
            border-radius: 20px;
            background-size: 10px;
             border-right: #ff8ba6 1px solid;
            width: 100%; /* Full volume by default */
        }

        #current-time, #total-duration {
            font-size: 10px;
            color: #8d4330;
        }
            @font-face {
  font-family: "Magica";
  src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);
}
@font-face {
  font-family: 'Balsamiq Sans';
  src: url(BalsamiqSans-Regular.ttf);
}
body {
font-family: 'Balsamiq sans', cursive;
  color: #8d4330;
      max-width: 1150px;
    margin: 0 auto;
    padding: 1em;
    text-align: center;
    background-image: url(https://advelos.moe/homepagev3/backgrounds/IMG_5828.png);
    background-size: 700px;
    padding-top: 40px;
    cursor: url(https://advelos.moe/homepagev3/graphics/purin%20cursor.png), default;
    overflow-x: hidden;
}
a {
  cursor: url(https://advelos.moe/homepagev3/graphics/purin%20hover.png), pointer;
}
.container {
  display: grid;
  grid-template-areas:
    "header header header header"
    "firstleft main main firstright"
    "footer footer footer footer";
    grid-template-columns: 20fr 17fr 17fr 20fr;
  gap: 2px;
  padding: 0px;
border: 10px solid white ;
            border-image: url(https://advelos.moe/homepagev3/borders/IMG_5476.png) 8 fill round;
            text-align: center;
}
#bigborder {
  background-image: url(https://advelos.moe/homepagev2/backgrounds/IMG_2719.jpeg);
  background-size: 600px;
  padding: 5px;
      border: 9px solid white;
    border-image: url("https://advelos.moe/homepagev3/borders/IMG_5478.png") 8 round;
    border-radius: 20px;
}
.container div.header {
  grid-area: header;
}
#imagehead {
  position: relative;
  top: -3px;
}
#topseper {
  border-radius: 20px;
}

#stamps {
  position: relative;
  bottom: 7px;
  height: 70px;
  margin: 0 auto;
         border-width:7px;
border-style:solid;
border-color: white;
border-image: url("https://advelos.moe/homepagev3/borders/IMG_2838.gif") 7 fill round;
padding: 0px;
}

#stampscontainer {
border: 10px solid white;
            border-image: url(https://advelos.moe/homepagev3/borders/IMG_5482.png) 8 fill round;
            height: 50px;
            background: none;
}
#lcurtain {
  position: absolute;
  left: 0px;
  z-index: 2;
  height: 85px;
  width: 53px;
}
#rcurtain {
  position: absolute;
  right: 0px;
  z-index: 2;
  height: 85px;
  width: 53px;
}


.marquee {
  height: 51px;
  width: auto;

  overflow: hidden;
  position: relative;
}

.marquee div {
  display: block;
  width: 200%;
  height: 51px;

  position: absolute;
  overflow: hidden;

  animation: marquee 9s linear infinite;
}

.marquee span {
  float: left;
  width: 97px;
}

@keyframes marquee {
  0% { left: 0; }
  50% { left: -45%; } 
  100% { left: 0; }
}
.container div.firstleft {
  grid-area: firstleft;
   margin: 0px 5px 5px 5px;
}
#menu {
  border: #ff8ba6 double 3px ; 
  border-radius: 25px;
  height: 295px;
      scrollbar-color: #ff8ba6 #ffffff;
      scrollbar-width: thin;
    overflow: scroll;
    overflow-x: hidden;
    background-image: url(https://advelos.moe/homepagev2/backgrounds/IMG_2875.jpeg);
    background-size: 200px;}
#dividertopper {
  position: sticky;
  top: 0;
  left: 0;
  margin-bottom: -19px;
  pointer-events: none; 
}
#guesttopper {
    position: relative;
  top: 0;
  left: 0;
  margin-bottom: -19px;
  border-radius: 20px 20px 0px 0px;
  pointer-events: none; 
}

#menutitlemenu {
  border-radius: 25px 25px 0px 0px;
}
#menutext {
  margin: -10px 10px 10px 10px;
    border: #ff8ba6 double 3px ;
  border-radius: 25px;
  font-size: 18px;
  padding: 0px;
  text-align: left;
  background-image: url(https://advelos.moe/homepagev3/backgrounds/IMG_5547.jpeg);
  background-size: 200px;
}
#menucontentpink {
  background: none;
  padding-left: 5px; 
  padding-top: 5px; 
}
    #menucontentpink>a {
            color: #8d4330;
      text-decoration: none;
    }
#menucontentyellow {
padding-left: 5px;
padding-top: 5px;
background-image: url(https://advelos.moe/homepagev3/backgrounds/IMG_5544.png);
background-size: 200px;
}
    #menucontentyellow>a {
      color: #8d4330;
      text-decoration: none;
    }
#hrpink {
  border-style: dashed;
border-width: 1px;
border-color: #ff8ba6;
padding: 0px;
margin: 0px
}
#hryellow {
  border-style: dashed;
border-width: 1px;
border-color: #ffb379;
padding: 0px;
margin: 0px;
}
#adveloslink {
    background-color: #ffffff;
  border-radius: 25px;
  border: #ffc179 double 3px ; 
  width: 98%;
  height: 250px;
  margin-top: 10px;
  overflow: hidden;
  background-image: url(https://advelos.moe/homepagev3/backgrounds/IMG_6126.jpeg);  
  background-size: 200px;
  position: relative;
}
#frameborder {
  pointer-events: none;
  position: absolute;
  text-align: left;
  left: 0px; 
}
#fanlistframeborder {
    pointer-events: none;
  position: sticky;
  text-align: left;
  left: 0px;
  top: 0px; 
  margin-bottom: -200px;
}
#fanlisttitle{
  margin-top: -30px;
}

#iframeborder {
border: 10px solid white;
            border-image: url(https://advelos.moe/homepagev3/borders/IMG_5476.png) 8 fill round; 
width: 160px;
height: 160px; 
padding: 0px; 
margin: 0 auto;
margin-top: 35px;
}
#iframeborder>a {
  color: #ff8ba6; 
}
#webrings {
  background-image: url(https://advelos.moe/homepagev3/backgrounds/IMG_6149.jpeg);
  background-size: 300px; 
  border-radius: 25px; 
  border: #ff8ba6 double 3px ;
  width: 98%;
  height: 250px;
  margin-top: 10px;
        scrollbar-color: #ff8ba6 #ffffff;
      scrollbar-width: thin;
    overflow: hidden;
    overflow-x: hidden;
}
#webringstitle {
  margin-top: -20px;
} 
#webringstext{
  background-color: rgba(255, 255, 255, 0.37);
  width: 85%;
  margin: 0 auto;
    border-radius: 25px; 
  border: #ff8ba6 double 3px ;
  padding: 5px;
  height: 45px; 
  margin-top: -5px;
}
#webringsbutton {
  margin-top: 5px;
}
.container div.main {
  grid-area: main;
  margin: 0px 5px 5px 5px;
}
#maintext {
  background-image: url(https://advelos.moe/homepagev3/backgrounds/IMG_6162.png);
  background-size: 450px; 
  height: 560px;
    border: double ;
    border-color: #ff8ba6 #ffc179 #ff8ba6 #ffc179;
  border-radius: 25px;
}
#maintextbox {
  background-image: url(https://advelos.moe/homepagev3/backgrounds/IMG_6163.jpeg);
  background-position: center;
  border: double; 
  border-color: #ffc179 #ff8ba6 #ffc179 #ff8ba6; 
  border-radius: 20px;
  width: 95%; 
  height: 90%; 
  margin: 0 auto;
    margin-top: 30px;
    position: relative;
            scrollbar-color: #ffc179 #ffffff;
      scrollbar-width: thin;
    overflow: scroll;
    overflow-x: hidden;
}
#maintexttopper {
  margin-bottom: -50px;
    pointer-events: none;
  position: sticky;
  top: 0;
  left: 0; 
}
#submainbox {
  background-color: rgba(255, 255, 255, 0.5);
  margin: 10px;
       border: 9px solid white;
    border-image: url("https://advelos.moe/homepagev3/borders/IMG_5478.png") 8 round;
    border-radius: 20px;
    padding: 8px; 
    font-size: 17px;
}
#floatleft {
  float: left;
}
#floatright {
  float: right;
}
#guestbook {
  background-color: #ffffff;
  height: 250px;
    border: double 3px ;
     border-color: #ffc179 #ff8ba6 #ffc179 #ff8ba6; 
  border-radius: 25px;
  margin-top: 10px;
      background-image: url(https://advelos.moe/homepagev3/backgrounds/IMG_6455.jpeg);
    background-size: 300px;
}
#guesttext {
 
  max-height: 10%;
  width: 400px; 
  margin: 0 auto;
  border: 10px solid white ;
            border-image: url(https://advelos.moe/homepagev3/borders/IMG_5476.png) 8 fill round;
}
#guesttitle {
  margin-top: -16px;
}
.container div.firstright {
  grid-area: firstright;

  margin: 0px 10px 5px 5px;
}
#status {
  background-color: #ffffff;
  border-radius: 25px;
  border: #ffc179 double 3px ;
  width: 100%;
  height: 250px;
}
#statustitle {
  border-radius: 25px 25px 0px 0px;
}
#statuscafecontain {
    position: relative;
  top: -15px;
  background: none;
}
#statuscafe {
  background: none;

   border-width: 7px; 
border-style: solid;
border-color: white;
border-image: url("https://advelos.moe/homepagev3/borders/IMG_5491.png") 7 fill round;
    margin: 0 1.5em 0em 1.5em;
    overflow: scroll;
    scrollbar-color: #ffb379 #ffffff;
    scrollbar-width: none;
    height: fit-content;
    max-height: 80px;
}
#statuscafe-username {
    color: #dbaea2;
    background: none;
    background-image: url(https://advelos.moe/homepagev3/backgrounds/IMG_3789.png);
    background-size: 100px;
    border-radius: 5px 5px 0px 0px;
}
#statuscafe-username>a {
  color: #fae2b5;
}
#statuscafe-content {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    background: none;
}
#statuspixel {
  margin-top: 5px ;
}

#buttons {
  margin-top: 5px;
  height: 30px;
         border-width:7px;
border-style:solid;
border-color: white;
border-image: url("https://advelos.moe/homepagev3/borders/IMG_2838.gif") 7 fill round;
}
#cbox {
  background-color: #ffffff;
  border-radius: 25px;
  border: #ff8ba6 double 3px ;
  width: 100%;
  height: 245px; 
  margin-top: 10px;
  padding: 0px;

}
#cboxframe {
  border-radius: 25px;
}
#linkme {
  background-size: 300px; 
  border-radius: 25px; 
  border: #ffc179 double 3px ;
  width: 98%;
  height: 250px;
  margin-top: 10px;
        scrollbar-color: #ffc179 #ffffff;
      scrollbar-width: thin;
    overflow: scroll;
    overflow-x: hidden;
        background-image: url(https://advelos.moe/homepagev3/backgrounds/IMG_6456.jpeg);
    background-size: 300px;
}
#linkmetext{
   border-radius: 25px; 
  border: #ffc179 double 3px ;
  width: 80%;
  background-color: rgba(255, 255, 255, 0.67);
  margin: 0 auto;
  padding: 10px;
  margin-bottom: 10px;
}
#littletext {
  color: #a8857c;
  font-size: smaller;
  margin-bottom: 5px; 
}
#littletext>a {
  color: #a8857c;
}
#hotlink{
  margin-top: 5px;
}
#webtile {
  background-size: 300px; 
  border-radius: 25px; 
  border: #ff8ba6 double 3px ;
  width: 98%;
  height: 250px;
  margin-top: 10px;
overflow: hidden;
    background-image: url(https://advelos.moe/homepagev3/backgrounds/IMG_6501.jpeg);
    background-size: 350px; 
    position: relative;
}

#fanlist {
    background-color: #ffffff;
  border-radius: 25px;
  border: #ffc179 double 3px ;
  width: 98%;
  height: 250px;
  margin-top: 10px;
        scrollbar-color: #ffc179 #ffffff;
      scrollbar-width: thin;
    overflow: scroll;
    overflow-x: hidden;
    background-image: url(https://advelos.moe/homepagev3/backgrounds/IMG_6499.jpeg);
    background-size: 250px;
    position: relative;
}
#fanlisttext {
   background-color: #ffffff;
  width:65%;
  margin: 0 auto; 
    border-radius: 15px; 
  border: #ffb379 double 3px ;
  padding: 5px;
  line-height: 20px;
  margin-bottom: 40px; 
} 
#fanupdates {
width: 100%;
    height: 250px;
  margin-top: 10px;
  display: flex;
  gap: 3px;
}
#todo {
  
    background-color: #ffffff;
  border-radius: 25px;
  border: #ff8ba6 double 3px ;
  width: 50%;
  height: 250px;

        scrollbar-color: #ff8ba6 #ffffff;
      scrollbar-width: thin;
    overflow: scroll;
    overflow-x: hidden;
        background-image: url(https://advelos.moe/homepagev3/backgrounds/IMG_6502.jpeg);
    background-size: 250px;
}
#todotext {
   background-color: #ffffff;
  width: 80%; 
  margin: 0 auto; 
    border-radius: 15px; 
  border: #ff8ba6 dashed 3px ;
  padding: 5px;
  text-align: left;
  line-height: 25px;
  margin-bottom: 10px; 
} 
#updates {
      background-color: #ffffff;
  border-radius: 25px;
  border: #ffc179 double 3px ;
  width: 50%;
  height: 250px;
margin-left: 5px;
        scrollbar-color: #ffc179 #ffffff;
      scrollbar-width: thin;
    overflow: scroll;
    overflow-x: hidden;
        
        background-image: url(https://advelos.moe/homepagev3/backgrounds/IMG_6500.jpeg);
    background-size: 300px;
}
#updatestext{
    background-color: #ffffff;
  width: 80%; 
  margin: 0 auto; 
    border-radius: 15px; 
  border: #ffb379 dashed 3px ;
  padding: 5px;
  line-height: 20px;
  margin-bottom: 10px; 
}
#updatestext>p {
  margin-top: 5px; 
}
.container div.footer {
  grid-area: footer;
  background-color: #ffffff;
}

#blinkies {
  width: 99%;
  height: 20px;
  margin: 0 auto;
  overflow: hidden;
           border-width:7px;
border-style:solid;
border-color: white;
border-image: url("https://advelos.moe/homepagev3/borders/IMG_2838.gif") 7 fill round;
}
#bigfoot {
  margin: 5px; 
  background-image: url(https://advelos.moe/homepagev3/backgrounds/IMG_6894.jpeg);
  border-radius: 20px;
  padding: 10px; 
  background-size: 200px;
  border: #ffb379 double 3px ;
  border-bottom: none; 
}
#thumbnail {
       
    padding: 0;
    margin: 0 auto; 
                position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 85%;
              display: flex;
  justify-content: center;
  align-items: center;
}

</style>
</head>
<body>
     <div id="music-player">
        <div id="controls" style="margin-top:-2px;">
            <button id="skip-back"><<</button>
            <button id="play-pause" style="width:35px;">▶</button>
            <button id="skip-forward">>></button>
        </div>

        <div id="progress-bar" style="margin-top:-1px;">
            <div id="progress-fill"></div>
        </div>

        <div id="song-info">
            <marquee id="song-name" scrollamount="3" style="width:85px;">Cassette - Lexycat</marquee>
            <span id="current-time" style="font-family: 'MS PGothic', 'ＭＳ Ｐゴシック', Georgia, Arial, Helvetica, sans-serif;">00:00</span>
            <span style="text-shadow:2px 2px rgb(255, 255, 255);">/</span>
            <span id="total-duration" style="font-family: 'MS PGothic', 'ＭＳ Ｐゴシック', Georgia, Arial, Helvetica, sans-serif;">00:00</span>
            <!-- Custom Volume Slider -->
            <div id="volume-slider">
                <div id="volume-fill"></div>
            </div>
        </div>
    </div>
	<script>
        const playlist = [
            { title: "COLTEMONKHA - Communication", url: "https://file.garden/ZnXXbnWZT2iPJ907/neocities/music/COLTEMONIKHA%20-%20communication%20(320%20KBps).mp3" }, 
            { title: "Cassette - Lexycat", url: "https://file.garden/ZnXXbnWZT2iPJ907/neocities/homepage%20v2/music/cassette.mp3" },

        ];

        const playPauseButton = document.getElementById('play-pause');
        const skipBackButton = document.getElementById('skip-back');
        const skipForwardButton = document.getElementById('skip-forward');
        const progressBar = document.getElementById('progress-bar');
        const progressFill = document.getElementById('progress-fill');
        const songNameDisplay = document.getElementById('song-name');
        const currentTimeDisplay = document.getElementById('current-time');
        const totalDurationDisplay = document.getElementById('total-duration');
        const volumeSlider = document.getElementById('volume-slider'); // Volume slider container
        const volumeFill = document.getElementById('volume-fill'); // Volume fill to indicate current volume
        let currentSongIndex = 0;
        let isPlaying = false;
        let audio = new Audio();
        let progressInterval;

        // Format time in mm:ss with leading zeros
        function formatTime(seconds) {
            const minutes = Math.floor(seconds / 60);
            const secs = Math.floor(seconds % 60);
            return `${minutes < 10 ? '0' : ''}${minutes}:${secs < 10 ? '0' : ''}${secs}`;
        }

        // Load the first song initially
        function loadSong(index) {
            const song = playlist[index];
            audio.src = song.url;
            songNameDisplay.textContent = song.title;
            audio.addEventListener('loadedmetadata', () => {
                totalDurationDisplay.textContent = formatTime(audio.duration);
            });
            currentSongIndex = index;
        }

        // Play or pause the song
        playPauseButton.addEventListener('click', () => {
            if (isPlaying) {
                audio.pause();
                playPauseButton.textContent = '▶';
                clearInterval(progressInterval);
            } else {
                audio.play();
                playPauseButton.textContent = '⏸';
                startProgress();
            }
            isPlaying = !isPlaying;
        });

        // Skip to the next song
        skipForwardButton.addEventListener('click', () => {
            currentSongIndex = (currentSongIndex + 1) % playlist.length;
            loadSong(currentSongIndex);
            if (isPlaying) audio.play();
            resetProgress();
            startProgress();
        });

        // Skip to the previous song
        skipBackButton.addEventListener('click', () => {
            currentSongIndex = (currentSongIndex - 1 + playlist.length) % playlist.length;
            loadSong(currentSongIndex);
            if (isPlaying) audio.play();
            resetProgress();
            startProgress();
        });

        // Start the progress bar
        function startProgress() {
            progressInterval = setInterval(() => {
                if (audio.duration) {
                    const progressPercentage = (audio.currentTime / audio.duration) * 100;
                    progressFill.style.width = progressPercentage + '%';
                    currentTimeDisplay.textContent = formatTime(audio.currentTime);
                }
                if (audio.ended) {
                    clearInterval(progressInterval);
                    skipForwardButton.click(); // Automatically go to the next song when one ends
                }
            }, 500);
        }

        // Reset the progress bar when the song changes
        function resetProgress() {
            progressFill.style.width = '0%';
            currentTimeDisplay.textContent = '00:00';
        }

        // Click event for progress bar
        progressBar.addEventListener('click', (event) => {
            const rect = progressBar.getBoundingClientRect();
            const offsetX = event.clientX - rect.left;
            const progressPercentage = (offsetX / rect.width) * 100;
            const newTime = (progressPercentage / 100) * audio.duration;
            audio.currentTime = newTime;
            progressFill.style.width = progressPercentage + '%';
        });

        const maxVolume = 0.5; // Set the max volume (between 0 and 1)

// Load the first song initially and set default volume
function loadSong(index) {
    const song = playlist[index];
    audio.src = song.url;
    audio.volume = maxVolume; // Ensure the initial volume is set
    songNameDisplay.textContent = song.title;
    audio.addEventListener('loadedmetadata', () => {
        totalDurationDisplay.textContent = formatTime(audio.duration);
    });
    currentSongIndex = index;
    updateVolumeUI(maxVolume); // Update volume slider UI
}

// Function to update volume UI based on actual volume
function updateVolumeUI(volume) {
    const volumePercentage = volume / maxVolume; // Scale fill percentage
    volumeFill.style.width = (volumePercentage * 100) + '%';
}

// Volume control using the div slider
function setVolume(event) {
    const rect = volumeSlider.getBoundingClientRect();
    const offsetX = event.clientX - rect.left;
    let volumePercentage = Math.max(0, Math.min(1, offsetX / rect.width)); // Clamp between 0 and 1
    audio.volume = volumePercentage * maxVolume; // Scale within max volume
    updateVolumeUI(audio.volume); // Update UI
}

// Handle click to set volume
volumeSlider.addEventListener('click', setVolume);

// Handle dragging for volume control
volumeSlider.addEventListener('mousedown', () => {
    window.addEventListener('mousemove', setVolume);
    window.addEventListener('mouseup', () => {
        window.removeEventListener('mousemove', setVolume);
    });
});

// Load the first song initially
loadSong(currentSongIndex);
    </script>
    
  <div id="bigborder">
<div class="container">
  
  <div class="header">
    <img id="imagehead" src="https://advelos.moe/homepagev3/header/IMG_5473.png" alt="advelos.moe just for fun" width="100%">
    <div id="stamps">
      <img id="lcurtain" src="https://advelos.moe/homepagev3/graphics/lcurtain.png" height="100%">
      <img id="rcurtain" src="https://advelos.moe/homepagev3/graphics/rcurtain.png" height="100%" >
    <div id="stampscontainer">
<div class="marquee">
  <div>
    <span><img src="https://advelos.moe/homepagev3/optimised%20stamps/IMG_5936.png" height="50px"></span>
    <span><img src="https://advelos.moe/homepagev3/optimised%20stamps/IMG_6750.png" height="50px"></span> 
        <span><img src="https://advelos.moe/homepagev3/optimised%20stamps/IMG_5783.gif" height="50px"></span>
    <span><img src="https://advelos.moe/homepagev3/optimised%20stamps/IMG_5945.png" height="50px"></span>
        <span><img src="https://advelos.moe/homepagev3/optimised%20stamps/IMG_5941.png" height="50px"></span>
    <span><img src="https://advelos.moe/homepagev3/optimised%20stamps/IMG_5984.gif" height="50px"></span> 
        <span><img src="https://advelos.moe/homepagev3/optimised%20stamps/IMG_5986.gif" height="50px"></span>
    <span><img src="https://advelos.moe/homepagev3/optimised%20stamps/IMG_5990.gif" height="50"></span>
         <span><img src="https://advelos.moe/homepagev3/optimised%20stamps/IMG_5935.png" height="50px"></span>
    <span><img src="https://advelos.moe/homepagev3/optimised%20stamps/IMG_5943.png" height="50px"></span>
        <span><img src="https://advelos.moe/homepagev3/optimised%20stamps/IMG_5934.gif" height="50px"></span>
    <span><img src="https://advelos.moe/homepagev3/optimised%20stamps/IMG_5944.png" height="50px"></span>
    <span><img src="https://advelos.moe/homepagev3/optimised%20stamps/IMG_5940.png" height="50px"></span>
    
    <span><img src="https://advelos.moe/homepagev3/optimised%20stamps/IMG_5995.gif" height="50px"></span>
    <span><img src="https://advelos.moe/homepagev3/optimised%20stamps/IMG_6751.png" height="50px"></span>
    <span><img src="https://advelos.moe/homepagev3/optimised%20stamps/IMG_5942.png" height="50px"></span>
    
  </div>
</div>
    </div>
    </div>
    <img id="topseper" src="https://advelos.moe/homepagev3/dividers/headerdivider.png" width="100%">
  </div>
  <div class="firstleft">
      <div id="menu">
        <img id="dividertopper" src="https://advelos.moe/homepagev3/dividers/IMG_5540.png" width="100%"> 
        <div id="menutext">
        <img id="menutitlemenu" src="https://advelos.moe/homepagev3/titles/IMG_5531.png" width="100%" alt="menu!">
        <div id="menucontentpink">
          <img src="https://advelos.moe/homepagev3/pixels/IMG_5999.gif" height="20px">
          <a href="https://advelos.moe/aboutme">
            <img src="https://advelos.moe/homepagev3/navigation%20buttons/IMG_6038.png" height="20px" alt="about me" title="about me">
          </a>
          <img src="https://advelos.moe/homepagev3/pixels/IMG_2750.gif" height="20px">
        </div>
        <hr id="hrpink">
        <div id="menucontentyellow">
          <img src="https://advelos.moe/homepagev3/pixels/IMG_5998.gif" height="20px">
          <a href="https://advelos.moe/blog">
            <img src="https://advelos.moe/homepagev3/navigation%20buttons/IMG_6078.png" height="20px" alt="blog" title="blog"> 
          </a>
          <img src="https://advelos.moe/homepagev3/pixels/IMG_1620.png" height="20px">
        </div>
        <hr id="hryellow">
                <div id="menucontentpink">
          <img src="https://advelos.moe/homepagev3/pixels/IMG_5999.gif" height="20px">
          <a href="https://advelos.moe/miniblog">
            <img src="https://advelos.moe/homepagev3/navigation%20buttons/IMG_6040.png" height="20px" alt="mini blog" title="mini blog">
          </a>
          <img src="https://advelos.moe/homepagev3/pixels/IMG_2765.gif" height="20px">
        </div>
        <hr id="hrpink">
                <div id="menucontentyellow">
                    <img src="https://advelos.moe/homepagev3/pixels/IMG_5998.gif" height="20px">
          <a href="#">
            <img src="https://advelos.moe/homepagev3/navigation%20buttons/IMG_6077.png" height="20px" alt="shrines" title="shrines">
          </a>
          <img src="https://advelos.moe/homepagev3/pixels/IMG_1617.gif" height="20px">
        </div>
        <hr id="hryellow">
                <div id="menucontentpink">
          <img src="https://advelos.moe/homepagev3/pixels/IMG_5999.gif" height="20px">
          <a href="#">
            <img src="https://advelos.moe/homepagev3/navigation%20buttons/IMG_6042.png" height="20px" alt="creations" title="creations">
          </a>
          <img src="https://advelos.moe/homepagev3/pixels/IMG_2760.gif" height="20px">
        </div>
        <hr id="hrpink">
                <div id="menucontentyellow">
          <img src="https://advelos.moe/homepagev3/pixels/IMG_5998.gif" height="20px">
          <a href="#">
            <img src="https://advelos.moe/homepagev3/navigation%20buttons/IMG_6076.png" height="20px" alt="collections" title="collections">
          </a>
          <img src="https://advelos.moe/homepagev3/pixels/IMG_1631.gif" height="20px">
        </div>
        <hr id="hryellow">
                <img id="menutitle" src="https://advelos.moe/homepagev3/titles/IMG_5533.png" width="100%" alt="media!">
        <div id="menucontentpink">
          <img src="https://advelos.moe/homepagev3/pixels/IMG_5999.gif" height="20px">
          <a href="#">
            <img src="https://advelos.moe/homepagev3/navigation%20buttons/IMG_6056.png" height="20px" alt="music" title="music">
          </a>
          <img src="https://advelos.moe/homepagev3/pixels/IMG_2766.gif" height="20px">
        </div>
        <hr id="hrpink">
        <div id="menucontentyellow">
          <img src="https://advelos.moe/homepagev3/pixels/IMG_5998.gif" height="20px">
          <a href="#">
            <img src="https://advelos.moe/homepagev3/navigation%20buttons/IMG_6075.png" height="20px" alt="tv" title="tv"> 
          </a>
          <img src="https://advelos.moe/homepagev3/pixels/IMG_1634.gif" height="20px">
        </div>
        <hr id="hryellow">
                <div id="menucontentpink">
          <img src="https://advelos.moe/homepagev3/pixels/IMG_5999.gif" height="20px">
          <a href="#">
            <img src="https://advelos.moe/homepagev3/navigation%20buttons/IMG_6054.png" height="20px" alt="games" title="games">
          </a>
          <img src="https://advelos.moe/homepagev3/pixels/IMG_2752.gif" height="20px">
        </div>
        <hr id="hrpink">
                <div id="menucontentyellow">
                    <img src="https://advelos.moe/homepagev3/pixels/IMG_5998.gif" height="20px">
          <a href="#">
            <img src="https://advelos.moe/homepagev3/navigation%20buttons/IMG_6074.png" height="20px" alt="food" title="food">
          </a>
          <img src="https://advelos.moe/homepagev3/pixels/IMG_1623.gif" height="20px">
        </div>
        <hr id="hryellow">
                <div id="menucontentpink">
          <img src="https://advelos.moe/homepagev3/pixels/IMG_5999.gif" height="20px">
          <a href="#">
            <img src="https://advelos.moe/homepagev3/navigation%20buttons/IMG_6052.png" height="20px" alt="fashion" title="fashion">
          </a>
          <img src="https://advelos.moe/homepagev3/pixels/IMG_3487.gif" height="20px">
        </div>
        <hr id="hrpink">
                <div id="menucontentyellow">
          <img src="https://advelos.moe/homepagev3/pixels/IMG_5998.gif" height="20px">
          <a href="#">
            <img src="https://advelos.moe/homepagev3/navigation%20buttons/IMG_6073.png" height="20px" alt="monthly goals" title="monthly goals">
          </a>
          <img src="https://advelos.moe/homepagev3/pixels/IMG_1625.gif" height="20px">
        </div>
        <hr id="hryellow">
                <img id="menutitle" src="https://advelos.moe/homepagev3/titles/IMG_5532.png" width="100%" alt="sitley!">
        <div id="menucontentpink">
          <img src="https://advelos.moe/homepagev3/pixels/IMG_5999.gif" height="20px">
          <a href="https://advelos.moe/sitemap">
            <img src="https://advelos.moe/homepagev3/navigation%20buttons/IMG_6050.png" height="20px" alt="site map" title="site map">
          </a>
          <img src="https://advelos.moe/homepagev3/pixels/IMG_3492.gif" height="20px">
        </div>
        <hr id="hrpink">
        <div id="menucontentyellow">
          <img src="https://advelos.moe/homepagev3/pixels/IMG_5998.gif" height="20px">
          <a href="#">
            <img src="https://advelos.moe/homepagev3/navigation%20buttons/IMG_6072.png" height="20px" alt="site history" title="site history"> 
          </a>
          <img src="https://advelos.moe/homepagev3/pixels/IMG_1632.gif" height="20px">
        </div>
        <hr id="hryellow">
                <div id="menucontentpink">
          <img src="https://advelos.moe/homepagev3/pixels/IMG_5999.gif" height="20px">
          <a href="https://advelos.moe/links">
            <img src="https://advelos.moe/homepagev3/navigation%20buttons/IMG_6048.png" height="20px" alt="buttons" title="buttons">
          </a>
          <img src="https://advelos.moe/homepagev3/pixels/IMG_2764.gif" height="20px">
        </div>
        <hr id="hrpink">
                <div id="menucontentyellow">
                    <img src="https://advelos.moe/homepagev3/pixels/IMG_5998.gif" height="20px">
          <a href="#">
            <img src="https://advelos.moe/homepagev3/navigation%20buttons/IMG_6071.png" height="20px" alt="resources" title="resources">
          </a>
          <img src="https://advelos.moe/homepagev3/pixels/IMG_3644.gif" height="20px">
        </div>
        <hr id="hryellow">
                <div id="menucontentpink">
          <img src="https://advelos.moe/homepagev3/pixels/IMG_5999.gif" height="20px">
          <a href="#">
            <img src="https://advelos.moe/homepagev3/navigation%20buttons/IMG_6046.png" height="20px" alt="webrings" title="webrings">
          </a>
          <img src="https://advelos.moe/homepagev3/pixels/IMG_2751.gif" height="20px">
        </div>
        <hr id="hrpink">
                <div id="menucontentyellow">
          <img src="https://advelos.moe/homepagev3/pixels/IMG_5998.gif" height="20px">
          <a href="http://nekoweb.org/follow/advelos.moe">
            <img src="https://advelos.moe/homepagev3/navigation%20buttons/IMG_6070.png" height="20px" alt="nekoweb" title="follow on nekoweb">
          </a>
          <img src="https://advelos.moe/homepagev3/pixels/IMG_3825.gif" height="20px">
        </div>
        <hr id="hryellow">
                <div id="menucontentpink">
          <img src="https://advelos.moe/homepagev3/pixels/IMG_5999.gif" height="20px">
          <a href="https://neocities.org/site/advelos">
            <img src="https://advelos.moe/homepagev3/navigation%20buttons/IMG_6044.png" height="20px" alt="neocities" title="neocities profile">
          </a>
          <img src="https://advelos.moe/homepagev3/pixels/IMG_2651.gif" height="20px">
        </div>

      </div>
      </div>
      <div id="adveloslink">
        <img id="frameborder" src="https://advelos.moe/homepagev3/dividers/IMG_6145.png" height="100%" width="100%"> 
        <div id="frameframeborder">
        <div id="iframeborder">
          <iframe id="linkiframe" width="160px" height="160px" style="border:none" src="https://advelos.moe/adveloslinkiframe" name="ADvelos"></iframe>
        </div>
        </div>
      </div>
      <div id="webrings">
        <img id="dividertopper" src="https://advelos.moe/homepagev3/dividers/IMG_6150.png" width="100%"> 
        <img id="webringstitle" src="https://advelos.moe/homepagev3/titles/IMG_6148.png" width="100%">
        <div id="webringstext"><span style="color: #ff8ba6;">⋆˚⋆୨୧˚</span>webrings are here!<span style="color: #ff8ba6;">⋆˚⋆୨୧˚</span><br><img id="webringsbutton" src="https://advelos.moe/homepagev3/pixels/IMG_2761.gif" height="20px"> <a href="#"><img id="webringsbutton" src="https://advelos.moe/homepagev3/navigation%20buttons/IMG_6046.png"></a>
        <img id="webringsbutton" src="https://advelos.moe/homepagev3/pixels/IMG_2761.gif" height="20px">
        </div>
      </div>
  <div id="fanlist">
    <img id="fanlistframeborder" src="https://advelos.moe/homepagev3/dividers/IMG_6850.png" height="100%" width="100%"> 
    <img id="fanlisttitle" src="https://advelos.moe/homepagev3/titles/IMG_6494.png" width="85%"> 
    <div id="fanlisttext">   
      <a href="https://fan.wings.nu/pompompurin/index.php"><img src="https://advelos.moe/homepagev3/fanlistings/pompom.png"></a>
     <br>
      <a href="https://fanlistings.melankorin.net/vocaloid/"><img src="https://advelos.moe/homepagev3/fanlistings/50x50-03.png"></a>
      <a href="https://mikh.net/cheese/"><img src="https://advelos.moe/homepagev3/fanlistings/manda50x50_3.gif"></a>
      <a href="https://candy.fanfreak.net/"><img src="https://advelos.moe/homepagev3/fanlistings/509.jpg"></a>
      <a href="https://n8listing.neocities.org/pinkpantheress/"><img src="http://advelos.moe/homepagev3/fanlistings/PANTHERESS4.png"></a>
      <a href="https://fan.i-heart-you.net/stickers/"><img src="https://advelos.moe/homepagev3/fanlistings/stickers-50x50_05.gif"></a>
      <a href="https://precious-memory.net/blankets/"><img src="https://advelos.moe/homepagev3/fanlistings/43225bc626c20d_judith2.gif"></a>
      <a href="https://fans.thislove.nu/html/"><img src="https://advelos.moe/homepagev3/fanlistings/html50x50_002.png"></a>
      <a href="https://shadow-lord.com/masks/"><img src="https://advelos.moe/homepagev3/fanlistings/45.png"></a>
      <a href="https://fan.lunarella.net/ivan/"><img src="https://advelos.moe/homepagev3/fanlistings/Me04u0o.png"></a>

     
    </div>
  </div>
  </div>
  <div class="main">
      <div id="maintext">
        <div id="maintextbox">
          <img id="maintexttopper" src="https://advelos.moe/homepagev3/dividers/IMG_6169.png" width="100%"> 
           <div id="submainbox">
            
            <img id="floatleft" src="https://advelos.moe/homepagev3/graphics/IMG_6172.png" height="150px">
            <p>
            <img src="https://advelos.moe/homepagev3/dividers/IMG_1572.gif" height="30px"><br>
              hi there!! my name is silly and welcome to advelos, the sweetest dessert shop in all of the web! from creamy cheesecake to delicious pancakes, any sweet treat you want is on the menu ^_^ ! i must warn you that the site itself is not edible so please don't- HEY. DON'T TAKE A BITE!!! I NEED THAT CODE!! </p>
            <p>
              i made this site as my happy little home on the internet! This site means a whole bunch to me, im so happy that so many people welcome me into such a loving community here ♡ each day, i become more and more dissapointed with the direction of modern social media. it makes me feel upset :( ! i cannot explain how much i love the indie web, each and every site no matter how rudimentary or advanced, hold a special place in my heart. it means so much to me that you yourself are willing to see my little project, so really, thank you!</p>
            <p>
              <img id="floatright" src="https://advelos.moe/homepagev3/graphics/IMG_6173.png" height="130px" > 
              this site was coded on a 1280 x 720 (16:9) laptop on VS Code on 100% zoom! it might look wonky on other displays, so always remember to zoom in or out !! this site is best viewed with chromium based browsers (I'm sorry to all my firefox truthers you will seriously not have a good time)! if you're on phone then i can only apologize for what you had to see in portrait.. thank you for turning your phone 🫡 stay safe out there mobile users</p>
              <img src="https://advelos.moe/homepagev3/graphics/IMG_6188.png" width="49%"> <img src="https://advelos.moe/homepagev3/graphics/IMG_6187.png" width="49%">
           </div>
        </div>
      </div>
      <div id="guestbook"> 
        <img id="guesttopper" src="https://advelos.moe/homepagev3/dividers/IMG_6445.png" width="100%">
        <a href="https://advelos.atabook.org/">
        <img id="guesttitle" src="https://advelos.moe/homepagev3/titles/IMG_6439.png" height="65%"></a>
        <div id="guesttext">
          <img src="https://advelos.moe/homepagev3/pixels/IMG_1617.gif" height="15px">
          click the image above to sign the guestbook!
        <img src="https://advelos.moe/homepagev3/pixels/IMG_3484.gif" height="15px">
      </div>
      </div>
      <div id="fanupdates">
              <div id="todo">
                <img id="dividertopper" src="https://advelos.moe/homepagev3/dividers/Untitled526_20260208124749.png" width="100%">
                <img src="https://advelos.moe/homepagev3/titles/IMG_6493.png" width="100%">
                <div id="todotext">
                  <span style="color: #ff8ba6;">╰┈➤</span> remake about me page
                  <br>
                  <span style="color: #ff8ba6;">╰┈➤</span> WEBRINGS PAGE!!
                  <br>
                  <span style="color: #ff8ba6;">╰┈➤</span> remake blog page 
                  <br>
                  <span style="color: #ff8ba6;">╰┈➤</span> make an ADvelos index
                  <br>
                   <span style="color: #ff8ba6;">╰┈➤</span> miniblog revamp (with optimisations ofc)
                  <br>
                  <span style="color: #ff8ba6;">╰┈➤</span> also work on that secret webring that only im allowed to know about heheh ¬‿¬
                </div>
              </div>
      <div id="updates">
        <img id="dividertopper" src="https://advelos.moe/homepagev3/dividers/IMG_6852.png" width="100%">
        <img id="updatestitle" src="https://advelos.moe/homepagev3/titles/IMG_6492.png" width="100%">
        <div id="updatestext">
          <p>
          <span style="color: #ff9011; font-size: large; text-decoration: underline;">20/2/26</span><br>
          advelos v3 is finally out! hope you enjoy the new layout :D </p>
                    <p>
          <span style="color: #ff9011; font-size: large; text-decoration: underline;">28/1/26</span><br>
          new links page! its very bright and rainbow hehe...</p>
                    <p>
          <span style="color: #ff9011; font-size: large; text-decoration: underline;">25/1/26</span><br>
          replaced the piclog with a brand new miniblog!</p>
        </div>
      </div>
      </div>

  </div>
  <div class="firstright">
    <div id="status">
      <img id="statustitle" src="https://advelos.moe/homepagev3/titles/status%20optimised.png" width="100%">
      <div id="statuscafecontain">
        <div id="statuscafe"><div id="statuscafe-username"></div><div id="statuscafe-content"></div></div><script src="https://status.cafe/current-status.js?name=advelos" defer></script>
    <img id="statuspixel" src="https://advelos.moe/homepagev2/pixels/wiggly%20star%20pix.gif" height="20px">
      </div>
      </div>
    <div id="buttons">
      <img src="https://advelos.moe/homepagev3/buttons/v3buttonsoptimised.gif" width="100%">
    </div>
    <div id="cbox">
      <iframe src="https://www5.cbox.ws/box/?boxid=957912&boxtag=yOvjF2" width="100%" height="245px"  allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto" id="cboxframe"></iframe>
    </div>
    <div id="linkme">
      <img id="dividertopper" src="https://advelos.moe/homepagev3/dividers/Untitled519_20260208125255.png" width="100%">
      <img src="https://advelos.moe/homepagev3/titles/IMG_6440.png" width="100%">
      <div id="linkmetext">
        <span style="color:#faa647" >‧₊˚ ⋅</span>
        <img id="mainbutton" src="https://advelos.moe/buttons/my%20buttons/advelosbutton.gif">
        <span style="color:#faa647" >‧₊˚ ⋅</span>
        <div id="littletext">(button by <a href="https://rice.place/">rice.place</a>!)</div>
        or you can take your pick from my secondary buttons!
        <br><br><img src="https://advelos.moe/buttons/my%20buttons/advelosbutton2.gif"> <img src="https://advelos.moe/buttons/my%20buttons/advelos1.gif"> <img src="https://advelos.moe/buttons/my%20buttons/toocutetoload.gif"> <img src="https://advelos.moe/buttons/my%20buttons/purinsquish.gif">
        <br><br><textarea><a href="https://advelos.moe/" alt="advelos button" title="advelos ⋆˙⟡"><img src="link the button here!"></a></textarea>
        <div id="hotlink"> 
          hotlinking is okay, but downloading the button is alot more reliable! they might go down randomly ( ˶°ㅁ°) !! <br><br>please let me know if you add my button, ill be sure to link back to you!! :D
        </div>
      </div>
    </div>
    <div id="webtile">
              <img id="frameborder" src="https://advelos.moe/homepagev3/dividers/IMG_6525.png" height="100%" width="100%"> 
        <div id="frameframeborder">
        <div id="iframeborder">
          <form method="post" action="https://poll.pollcode.com/12369653"><div style="background-color:#ffffff;border-radius:28px;padding:2px;width:100%;font-family:Kosugi;font-size:small;color:#8F523A;background-image: url('https://file.garden/ZnXXbnWZT2iPJ907/neocities/homepage%20v2/backgrounds/IMG_2863.jpeg');background-size: 300px;"><div style="padding:2px 0px 4px 2px;"><strong>Do you like desserts?</strong></div><input type="radio" name="answer" value="1" id="answer123696531" style="float:left;" /><label for="answer123696531" style="float:left;width:150px;">yes! i love them!</label><div style="clear:both;height:2px;"></div><input type="radio" name="answer" value="2" id="answer123696532" style="float:left;" /><label for="answer123696532" style="float:left;width:150px;">no... i dont like sweets that much</label><div style="clear:both;height:2px;"></div><input type="radio" name="answer" value="3" id="answer123696533" style="float:left;" /><label for="answer123696533" style="float:left;width:150px;">secret 3rd option</label><div style="clear:both;height:2px;"></div><div align="center" style="padding:3px;"><input type="submit" value=" Vote ">&nbsp;<input type="submit" name="view" value=" View "></div><div align="right" style="font-size:10px">pollcode.com <a  style="color: #ff8ba6;"  href="https://pollcode.com/">free polls</a></div></div></form>
        </div>
        </div> 
    </div>
  </div>
    <div class="footer">
    <div id="blinkies">
      <img src="https://advelos.moe/homepagev3/blinkies/IMG_2646.gif" height="20px">
      <img src="https://advelos.moe/homepagev3/blinkies/IMG_2648.gif" height="20px">
      <img src="https://advelos.moe/homepagev3/blinkies/IMG_2641.gif" height="20px">
      <img src="https://advelos.moe/homepagev3/blinkies/IMG_6404.gif" height="20px">
      <img src="https://advelos.moe/homepagev3/blinkies/IMG_6395.gif" height="20px">
      <img src="https://advelos.moe/homepagev3/blinkies/IMG_2665.gif" height="20px">
      <img src="https://advelos.moe/homepagev3/blinkies/IMG_2637.gif" height="20px">
    </div>
    <div id="bigfoot">
      <span style="background-color: #ffffff;">advelos 2025 - FOREVER!! hand coded with love ˚ʚ♡ɞ˚</span>
    </div>
  </div>
</div>
</div>
    <script>
      if (navigator.userAgent === "Screenjesus") {
     document.body.innerHTML = '<img id="thumbnail" src="https://advelos.moe/thumb.png">'; 
      }
</script>
</body>
</html>