a specific song at click a specific song at click

stuff i like a lot, find comfort in or etc. fun

FAV SONGS

Large toggle button
00:00 / 00:00
Previous track button Next track button
Small toggle button
1.
Bedroom - In My Head
Small toggle button
2.
Dream, Ivory - Welcome and Goodbye
Small toggle button
3.
Rainbow Kitten Surprise - Counting Cards
Small toggle button
4.
Mike Posner - Cooler Than Me
Small toggle button
5.
Pinkshift - I'm gonna tell my therapist on you
Small toggle button
6.
Rainbow Kitten Surprise - Devil Like Me
Small toggle button
7.
Lyn - Beneath The Mask
Small toggle button
8.
Cavetown - Juliet
Small toggle button
9.
CobraStarship - I Kissed A Boy
Small toggle button
10.
Mixed Matches - I Never Cared About You

IKE × 21 × HE/HIM

just your average guy ever

i kinda basically do the work of this site lol


🍔 IKE is...

🥞 LIOR (my bf) is...

/*for neocities later @font-face { font-family: megadeth; src: url("/fonts/Megadeth.ttf") format('truetype'); } */ body { margin: 0; overflow: auto; height: 900px; background: url(https://cdn.discordapp.com/attachments/955323640541503508/1009626341601202227/unknown.png); font-family: "MS pGothic"; font-size: 20px; } *{ scrollbar-color: #C00918 #0B0202; scrollbar-width: thin;} /* width */ ::-webkit-scrollbar { width: 4px; padding-right: 6px; } /* Track */ ::-webkit-scrollbar-track { background: #0B0202; } /* Handle */ ::-webkit-scrollbar-thumb { background: #3E070C; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #C00918; } div#qTip{ border: 1px solid red; padding:3px; display: none; margin-left:15px; max-width: 130px; background:black; margin-top:-20px; text-align: center; position: absolute; font-size:12px; color: white; text-shadow: 0px 1px 2px #870000; z-index:9999999;} .leftbar { position: absolute; left: 0; top: 0; bottom: 0; width: 350px; max-width: 20%; padding: 10px; background: black; color: white; height: 1000px; min-height: 100%; border-right: 2px solid #9F0000; z-index: 99999; } .rightbar { position: absolute; right: 0; top: 0; height: 1000px; min-height: 100%; width: 350px; max-width: 20%; padding: 10px; background: black; color: white; border-left: 2px solid #9F0000; z-index: 99999; } .innerbox { margin: 10px auto; width: 288px; max-width: 85%; height: 300px; max-height: 35%; overflow-y: auto; overflow-x: hidden; border: 8px double #9F0000; background: #F9F9F9; color: black; padding: 12px; text-align: center; } .innerbox h3 { font-size: 28px; margin: 7px auto 0; font-family: "MS Gothic"; text-shadow: 1px 1px 0px #9F0000; } .innerbox sup { letter-spacing: -.1px; word-spacing: -1px; font-family: "MS pGothic"; text-shadow: 0px 0px 1px #9F0000; font-size: 13px; } .innerbox p { margin: 5px 10px; letter-spacing: -1px; } .mid { width: 100%; height: 100%; margin: 0; } .middlef { margin: 2% auto 0; position: sticky; top: 0px; width: 525px; max-width: 30%; height: 550px; max-height: 55%; border: 6px double black; background: #F9F9F9; padding: 15px 10px; box-shadow: 0 0 12px 12px black; z-index: 99999; display: flex; flex-flow: column wrap; align-items: center; } .innertop { width: 100%; height: 152px; max-height: 152px; margin: 0; display: flex; flex-flow: row nowrap; justify-content: center; gap: 3%; } #icon { width: 150px; height: 150px; max-width: 100%; border: 2px solid black; } .blackboxo { color: #f9f9f9; background: #050202; border: 2px solid #870000; width: 345px; max-width: 100%; height: 150px; max-height: 150px; overflow-y: auto; overflow-x: hidden; float: right; } .blackboxo h3 { /*for neocities later font-family: Megadeth; */ font-family: 'MS Gothic'; font-size: 93%; text-align: center; color: white; text-shadow: -1px 1px 1px #870000; margin: 0 0 0px 12px; font-weight: 600; letter-spacing: -1px; word-spacing: -6px; } #x { font-size: 60%; } .blackboxo p { margin: 0 8px; padding: 0 5px; max-width: 190px; text-align: center; font-size: 70%; text-shadow: 0px 1px 2px #870000; } #pridebabey { max-width: 50%; } #hestanding { position: absolute; bottom: -45px; right: -30px; height: 370px; max-height: 61%; } #hestandingt { display: none; } #ike { text-shadow: 1px 0px 1px #e80000; } #lior { text-shadow: 1px 0px 1px #5c7233; } #loverboy { width: 95%; border: 6px double #9F0000; } #akeshuban { width: 250px; max-width: 87%; height: auto; border: 1px solid black; } hr { width: 250px; max-width: 87%; } #spacer { border-color: transparent; margin: 5px auto; } #ikeliorp { max-width: 250px; margin: 0 auto; text-align: center; line-height: 18px; } #manwhore { position: absolute; top: -28px; right: -10px; height: 44px; filter: hue-rotate(15deg); } #spincards { width: 120px; filter: saturate(80%); position: absolute; top: -20px; left: -46px; animation-name: spin; animation-duration: 5000ms; animation-iteration-count: infinite; animation-timing-function: linear; /* transform: rotate(3deg); */ /* transform: rotate(0.3rad);/ */ /* transform: rotate(3grad); */ /* transform: rotate(.03turn); */ } @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } #cheebkira { float: right; width: 43%; max-width: 150px; margin-top: -3px; margin-right: -7px; } #insanelygay { width: 52%; margin: 6px 0 3px 12px; filter: saturate(75%); } .slider { height: 20px; position: relative; width: 100%; margin: 8px auto; max-width: 512px; border: 1px solid black; display: grid; place-items: center; overflow: hidden; } .slider::before, .slider::after{ position:absolute; content:''; height:100%;width:25%; z-index:2;pointer-events:none; } .slider::before{ left:0; top:0; } .slider::after{ right:0; top:0; transform:rotateZ(180deg); } /* IMPORTANT CODE BELOW */ .slide-track { width: calc(150px * 20); display: flex; animation: scroll 20s linear infinite; justify-content: space-between; } .slide { width: 150px; height: 20px; display: grid; place-items: center; transition:0.5s; cursor:pointer; } @keyframes scroll { 0% { transform: translateX(0px); } 100% { transform: translateX(calc(-150px * 10)); } } @media screen and (max-width: 768px) { } /* SNOWFLAKE CSS BELOW! SNOWFLAKE CSS BELOW! SNOWFLAKE CSS BELOW! SNOWFLAKE CSS BELOW! SNOWFLAKE CSS BELOW! SNOWFLAKE CSS BELOW! SNOWFLAKE CSS BELOW! SNOWFLAKE CSS BELOW! SNOWFLAKE CSS BELOW! */ @-webkit-keyframes snowflakes-fall { 0% { top: -10% } 100% { top: 100% } } @-webkit-keyframes snowflakes-shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0) } 50% { -webkit-transform: translateX(80px); transform: translateX(80px) } } @keyframes snowflakes-fall { 0% { top: -10% } 100% { top: 100% } } @keyframes snowflakes-shake { 0%, 100% { transform: translateX(0) } 50% { transform: translateX(80px) } } .snowflake { position: fixed; top: -10%; z-index: 9999; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-animation-name: snowflakes-fall, snowflakes-shake; -webkit-animation-duration: 5s, 3s; -webkit-animation-timing-function: linear, ease-in-out; -webkit-animation-iteration-count: infinite, infinite; -webkit-animation-play-state: running, running; animation-name: snowflakes-fall, snowflakes-shake; animation-duration: 5s, 3s; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-play-state: running, running } .snowflake:nth-of-type(0) { left: 22%; -webkit-animation-delay: 0s, 0s; animation-delay: 0s, 0s } .snowflake:nth-of-type(1) { left: 20%; -webkit-animation-delay: 1s, 1s; animation-delay: 1s, 1s } .snowflake:nth-of-type(2) { left: 35%; -webkit-animation-delay: 6s, .5s; animation-delay: 6s, .5s } .snowflake:nth-of-type(3) { left: 33%; -webkit-animation-delay: 4s, 2s; animation-delay: 4s, 2s } .snowflake:nth-of-type(4) { left: 42%; -webkit-animation-delay: 2s, 2s; animation-delay: 2s, 2s } .snowflake:nth-of-type(5) { left: 35%; -webkit-animation-delay: 8s, 3s; animation-delay: 8s, 3s } .snowflake:nth-of-type(6) { left: 68%; -webkit-animation-delay: 6s, 2s; animation-delay: 6s, 2s } .snowflake:nth-of-type(7) { left: 70%; -webkit-animation-delay: 2.5s, 1s; animation-delay: 2.5s, 1s } .snowflake:nth-of-type(8) { left: 75%; -webkit-animation-delay: 1s, 0s; animation-delay: 1s, 0s } .snowflake:nth-of-type(9) { left: 80%; -webkit-animation-delay: 3s, 1.5s; animation-delay: 3s, 1.5s } .snowflake:nth-of-type(10) { left: 30%; -webkit-animation-delay: 2s, 0s; animation-delay: 2s, 0s } .snowflake:nth-of-type(11) { left: 65%; -webkit-animation-delay: 4s, 2.5s; animation-delay: 4s, 2.5s } @mixin clearfix() { *zoom: 1; &:before, &:after { content: " "; display: table; } &:after { clear: both; display: block; font-size: 0; height: 0; visibility: hidden; } } @mixin media($type) { @if $type == tablet {/* Small devices (tablets, 768px and up) */ @media (min-width: 768px) and (max-width: 991px) { @content; } } @else if $type == mediumDesktop {/* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) and (max-width: 1100px) { @content; } } @else if $type == largeDesktop {/* Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { @content; } } } .screen-reader-text { /* Reusable, toolbox kind of class */ position: absolute; top: -9999px; left: -9999px; } .disabled { color: #666; cursor: default; } .show { display: inline-block !important; } .container { font-family: "MS pGothic"; font-size: 15px; margin: 0 auto; width: 90%; padding: 10px 10px 0; background: white; border: 5px double black; text-align: left; .player { height: 50px; margin: 0; position: relative; width: 90%; .large-toggle-btn { border: 5px double #9F0000; background-color: black; float: left; font-size: 1.5em; height: 27px; margin: 0 10px 0 0; overflow: hidden; padding: 14px 0 0px; position: relative; text-align: center; vertical-align: bottom; width: 40px; .large-play-btn { &:before { content: url(https://cdn.discordapp.com/attachments/955323640541503508/1011506709459636274/tumblr_769c7359982b15a2d614a4d4b7a144a5_e1fb5a09_75.gif); } cursor: pointer; display: inline-block; position: relative; top: -6px; } .large-pause-btn { &:before { content: url(https://cdn.discordapp.com/attachments/955323640541503508/1011506709015044156/tumblr_074c114ee3bd628096355e199f8eeef0_dfa74936_75.gif); } cursor: pointer; display: inline-block; position: relative; top: -13%; } } .info-box { width: 57%; bottom: 10px; left: 65px; position: absolute; top: 7px; .track-info-box { float: left; max-width: 140px; font-size: 12px; margin: 0 0 6px 0; visibility: hidden; width: 100%; .track-title-text { display: inline-block; } .audio-time { display: inline-block; padding: 0 0 0 5px; width: 80px; } @include clearfix(); } } .progress-box { float: left; width: 95%; position: relative; .progress-cell { height: 12px; position: relative; .progress { background: #fff; border: 1px solid black; border-radius: 0; height: 8px; position: relative; width: 100%; .progress-buffer { background: #9F0000; height: 100%; width: 0; } .progress-indicator { background: #fff; border: 1px solid black; border-radius: 0; cursor: pointer; height: 10px; left: 0; overflow: hidden; position: absolute; top: -2px; width: 22px; } } } } .controls-box { bottom: 45%; right: -12%; width: 40px; text-align: center; position: absolute; background: black; border: 5px double #9F0000; padding: 1px 3px; .previous-track-btn { &:before { content: url(https://cdn.discordapp.com/attachments/955323640541503508/1011723124254986342/arrow1.gif); font: 1em; } text-align: center; width: 15px; cursor: pointer; display: inline-block; } .next-track-btn { &:before { content: url(https://cdn.discordapp.com/attachments/955323640541503508/1011723124619874335/arrow2.gif); font: 1em; } text-align: center; width: 15px; cursor: pointer; display: inline-block; } } @include clearfix(); } .play-list { display: block; margin: 0 auto 20px auto; width: 100%; .play-list-row { display: block; margin: 10px 0; width: 100%; .track-title { .playlist-track { &:hover { text-decoration: underline; color: #9F0000; } letter-spacing: -1px; color: #000; text-decoration: none; } } .small-toggle-btn { border: 1px solid black; cursor: pointer; display: inline-block; height: 20px; margin: 0 auto; overflow: hidden; position: relative; text-align: center; vertical-align: middle; width: 20px; .small-play-btn { &:before { content: url(https://cdn.discordapp.com/attachments/955323640541503508/1011794500026372166/frame_1_delay-0.5s.png); font: 0.85em; } display: inline-block; } .small-pause-btn { &:before { content: url(https://cdn.discordapp.com/attachments/955323640541503508/1011794499581788181/frame_0_delay-0.5s.png); font: 0.85em; } display: inline-block; } } .track-number { display: inline-block; } .track-title { display: inline-block; .playlist-track { text-decoration: none; &:hover { text-decoration: underline; } } } .track-title.active-track { font-weight: bold; } @include clearfix(); } } } /* ANYTHING PAST HERE IS FOR MOBILE IKE. DONT GO DOWN MORE ANYTHING PAST HERE IS FOR MOBILE IKE. DONT GO DOWN MORE ANYTHING PAST HERE IS FOR MOBILE IKE. DONT GO DOWN MORE ANYTHING PAST HERE IS FOR MOBILE IKE. DONT GO DOWN MORE */ /* LARGER LIKE TABLETS */ @media screen and (max-width: 1600px){ } /* SMALLER SCREENS */ @media screen and (max-width: 815px){ .leftbar { height: 40%; max-height: 45%; min-height: initial; width: auto; max-width: 800px; border: none; border-bottom: 2px solid #9F0000; position: relative; z-index: 99999; } .rightbar { height: 40%; max-height: 45%; min-height: initial; width: auto; max-width: 800px; border: none; border-top: 2px solid #9F0000; position: relative; z-index: 99999; } .middlef { position: relative; margin: 15px auto; padding: 5px; width: 94%; max-height: 420px; max-width: 100%; box-shadow: none; z-index: 99999; } .innertop { } .innertop>#icon { max-height: 135px; } #icon { width: 150px; height: 150px; max-height: initial; max-width: 30%; object-fit: cover; } .blackboxo { width: 67%; max-height: 125px; margin-top: 10px; } .mid { height: auto; width: auto; } .slider { margin: 0 auto; } .slide-track { width: calc(80px * 20); } .slide { width: 150px; } @keyframes scroll { 0% { transform: translateX(0px); } 100% { transform: translateX(calc(-80px * 10)); } } #spincards { width: 25%; } #hestanding { display: none; } #hestandingt { display: block; position: fixed; bottom: 0; right: 0; max-height: 25%; z-index: 999999; } .snowflake { z-index: 999; } .innerbox { height: 70%; max-height: 72%; } }