body { 
font-family: 'rainy hearts';
color: #6c3054;
font-size: 16px;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: url("https://i.imgur.com/olxuZuR.jpg");
background-repeat: repeat;
background-size: 100px;
cursor: url(https://i.postimg.cc/L8PP5nyk/oth399.png), progress;}
a:hover { cursor: url(https://i.postimg.cc/L8PP5nyk/oth399.png), progress;
}
@font-face {
font-family: 'rainy hearts';
src: url('rainyhearts.ttf') format('OpenType');
font-weight: normal;
font-style: normal;
}  
::selection {
color: #ffd9e9;
text-shadow:
1px 0px #6c3054, 
0px 1px #6c3054, 
-1px 0px #6c3054, 
0px -1px #6c3054;
}
::-webkit-scrollbar {
width: 8px;
background-color: #ffd9e9;
}
::-webkit-scrollbar-thumb {
background-color: #ffd9e9;
}
::-webkit-scrollbar-track {
background-color: white;
}
a {
color:#ff58a0; text-decoration:underline 0.5px dotted #ff58a0;
}
a:hover{ 
text-decoration:underline 0.5px #ff58a0;
}
b {
font-weight: 1;
text-shadow: 2px 2px #ffd9e9;
}
h1 {
color: #6c3054;
text-shadow:
1px 0px #ffd9e9, 
0px 1px #ffd9e9, 
-1px 0px #ffd9e9, 
0px -1px #ffd9e9;
}
h2 {
color: #ffd9e9;
}
h3 {
color: #ff58a0;
}
.container {
display: flex;
max-width: 800px;
width: 100%; 
flex-direction: row; 
gap: 10px;
margin: 0px auto;
flex-wrap: wrap;
}
#profile {
height: 150px;
overflow-y: scroll;}
.left-column, .right-column {
flex: 1;
min-width: 0; 
padding: 10px;
box-sizing: border-box;

}
#nav {
flex-wrap: wrap;
justify-content: center;
}
html { text-size-adjust: 100%; }
@media screen and (max-width: 768px) and (orientation: portrait) {
.container {
flex-direction: column; 
margin: 10px auto;
}
#profile, #welcome, #nav, #currently, #mystamps, #otherbuttons, #music, #updates  {
max-width: 100%;
overflow-x: hidden;
}
.buttons {
justify-content: space-around;
}
}
#profile, #welcome, #nav, #currently, #mystamps, #otherbuttons, #music, #updates {
background: linear-gradient(180deg, #ffffff, #ffedf4 90%);
border: 1px solid #ff2483;
border-radius: 0px 0px 5px 5px;
padding: 10px;
margin-top: -1px;
display: flex; 
gap: 10px;
}
#updates {
height: 126px;
overflow-y: scroll;
}
#welcome {
height: 126px;
overflow-y: scroll;
display: block;
}
.footer {
width: 95%;
order: 3; 
border-radius: 5px;
margin: 0px 10px 20px 10px;
text-align: center;
background: linear-gradient(180deg, #ffffff, #ffedf4 90%);
border: 1px solid #ff2483;
padding: 10px;
overflow: hidden;
}
#mystamps {
margin: 0 auto;
text-align: center;
cursor: url(https://i.postimg.cc/L8PP5nyk/oth399.png), progress;
}
h4 {
background: linear-gradient(180deg, #ffd5e5, #ffb8d3 70%);
padding: 3px 5px 3px 3px;
border: 1px solid #ff2483;
height: 21px;
border-radius: 5px 5px 0px 0px;
margin-bottom: 0;
}
#icon {
border: 1px solid #ff2483;
border-radius: 5px;
width: 150px;
height: 150px;
}
textarea {
background-color: #ffd9e9;
border: 1.5px groove #ffd6e7;
border-radius: 4px;
resize: none;
outline:none;
font-family: 'rainy hearts';
color: #6c3054;
cursor: url(https://i.postimg.cc/L8PP5nyk/oth399.png), progress;}
button {
border-radius: 4px;
padding: 5px;
font-family: 'rainy hearts';
color: #6c3054;
margin: 3px;
cursor: url(https://i.postimg.cc/L8PP5nyk/oth399.png), progress;
border: 1px groove #ffd6e7;
background-image: linear-gradient(#ffeff6, #ffffff, 20%, #fffafc, 30%, #ffd6e7, #ffbcd9);
}
button:hover{
border: 1px groove #ffbcd9;
}
#otherbuttons { 
overflow: hidden;
}
.marquee {
display: flex;
margin: 0 auto;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);	
transform:translateX(100%);
/* Apply animation to this element */	
-moz-animation: marquee 10s linear infinite;
-webkit-animation: marquee 10s linear infinite;
animation: marquee 10s linear infinite;
}
#otherbuttons img {
width: 88px;
height: 31px;
}
/* Move it (define the animation) */
@-moz-keyframes marquee {
0%   { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes marquee {
0%   { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes marquee {
0%   { 
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%); 		
}
100% { 
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%); 
}
}
.marquee:hover {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#musicplayer{
width:100%; /* width of the player - make it 100% if you want it to fill your container */
padding:5px;
text-align:center; 
display:flex;
flex-direction:column;
gap:10px;
background-color: none;
}
.songtitle, .track-info{
color: #6c3054;
text-shadow:
1px 0px #ffd9e9, 
0px 1px #ffd9e9, 
-1px 0px #ffd9e9, 
0px -1px #ffd9e9;
}
.now-playing{
display: none;
}
.controls{
display:flex; 
flex-direction:column; 
gap:10px;
cursor: url(https://i.postimg.cc/L8PP5nyk/oth399.png), progress;
}
.buttons{
display:flex;
justify-content:center;
width:100%;
}
.buttons div{
width:33.3%;
}
.playpause-track, .prev-track, .next-track{
color:#ffd9e9; /* color of buttons */
font-size:35px !important; /* size of buttons */
font-family: Arial;
}
.volume-icon{
font-size:22px !important; /* size of volume icon */
}
.seeking, .volume{
display:flex;
flex-direction:row;
align-items:center;
gap:5px;
}
.seeking, .volume{
display:flex;
flex-direction:row;
align-items:center;
gap:5px;
}
input[type=range]{
-webkit-appearance:none; /* removes default appearance of the tracks */
width:100%;
}
input[type=range]:focus{
outline:none; /* removes outline around tracks when focusing */
}
input[type=range]::-webkit-slider-runnable-track{
width:100%;
height:4px; /* thickness of seeking track */
background:#ffd9e9; /* color of seeking track */
cursor: url(https://i.postimg.cc/L8PP5nyk/oth399.png), progress;
}
input[type=range]::-webkit-slider-thumb{
height:10px; /* height of seeking square */
width:10px; /* width of seeking square */
border-radius:5px; /* change to 5px if you want a circle seeker */
background:#ffd9e9; /* color of seeker square */
-webkit-appearance:none;
margin-top:-3px; /* fixes the weird margin around the seeker square in chrome */
cursor: url(https://i.postimg.cc/L8PP5nyk/oth399.png), progress;
}
input[type=range]::-moz-range-track{
width:100%;
height:4px; /* thickness of seeking track */
background:#ffd9e9; /* color of seeking track */
cursor: url(https://i.postimg.cc/L8PP5nyk/oth399.png), progress;
}
input[type=range]::-moz-range-thumb{
height:10px; /* height of seeking square */
width:10px; /* width of seeking square */
border-radius:0px; /* change to 5px if you want a circle seeker */
background:#ffd9e9; /* color of seeker square */
border:none; /* removes weird border around seeker square in firefox */
cursor: url(https://i.postimg.cc/L8PP5nyk/oth399.png), progress;
}
.tooltip-element {
display: inline-block;
color:#ff58a0; text-decoration:underline 0.5px dotted #ff58a0;
}
.tooltip-element:hover {
text-decoration:underline 0.5px #ff58a0;
}
.tooltip {
position: fixed;
opacity: 0;
visibility: hidden;
transition: opacity 0.8s;
width: max-content;
max-width: 200px;
padding: 3px;
margin: 15px 10px 0px 20px;
text-align: center;
border-radius: 5px;
font-size: clamp(16px, 16px, 16px);
color: #6c3054;
z-index: 9999;
background: linear-gradient(180deg, #ffd5e5, #ffb8d3 70%);
border: 1px solid #ff2483;
pointer-events: none;
word-wrap: break-word;
}