.product {
    padding: 10px 10px;
    width: 70%;
    height: auto;
    font-size: 11px;
    font-family: Courier New;
    color: var(--text-color);
    background-color: var(--main-color);
    text-decoration: none;
    border: 1px solid var(--text-color);
    margin-bottom: 7px;
}

.payment-button {
    display: inline-block;
    padding: 10px 10px;
    font-size: 11px;
    font-family: Courier New;
    color: var(--text-color);
    background-color: var(--main-color);
    text-decoration: none;
    border: 1px solid var(--text-color);
    border-radius: 3px;
}

.payment-button:hover {
    background-color: var(--color-d);
}

::-webkit-scrollbar {
width: 12px;
}

::-webkit-scrollbar-thumb {
background: #FDF9F8;
border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
background: #C0CBD8;
}

::placeholder { 
color: #FDF9F8;
}

* {cursor: url(https://cur.cursors-4u.net/nature/nat-10/nat985.cur), auto !	important;}

a.two:link,
a.two:visited,
a.two:active {
font-size: 11px;
font-family: Courier New;
text-decoration: underline;
}

a.two:hover {
font-size: 11px;
font-family: Courier New;
text-decoration: underline;
}

ul {
color: #FDF9F8;
font-family: Courier New !important;
font-size: 11px;
list-style-image: url('https://m.manokodu.net/point02.gif');
list-style-type: circle;
margin-left: 0;
margin-right: 25px;
}

h1 {
color: #FDF9F8;
font-size: 24px;
font-family: Courier New;
text-decoration: underline solid #DDC9C8;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
text-align: center;
letter-spacing: 2px;
}

h2 {
color: #FDF9F8;
font-size: 20px;
font-family: Courier New;
text-decoration: underline solid #CDC0C4;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
letter-spacing: 2px;
}

h3 {
color: #FDF9F8;
font-size: 16px;
font-family: Courier New;
text-decoration: underline solid #DDC9C8;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
letter-spacing: 2px;
}

h4 {
color: #FDF9F8;
font-size: 8px;
font-family: Courier New;
text-decoration: underline solid #CDC0C4;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
letter-spacing: 2px;
}

div.about {
text-indent: 50px;
}

p {
color: #FDF9F8;
text-decoration: none;
letter-spacing: 2px;
font-size: 11px;
font-family: Courier New;
}

::selection {
background: #FDF9F8;
color: #B38B80;
}

.container {
position: absolute;
left: 50%;
top: 0;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 90%;
height: auto;
margin-top: 3px;
margin-bottom: 3px;
border: 2px solid var(--text-color);
border-radius: 20px;
}

.header {
background-color: var(--bg-color);
height: auto;
border-bottom: 2px dashed var(--text-color);
margin: 0;
border-radius: 20px 20px 0 0;
box-sizing: border-box;
position: relative;
padding: 15px 0;
}

.title {
color: var(--text-color);
text-shadow: 1px 1px var(--color-c);
font-size: 30px;
margin-top: 2px;
margin-left: 24px;
box-sizing: border-box;
}

#siteimage {
background-image: var(--image-email);
border: 2px solid var(--text-color);
width: 150px;
height: 150px;
float: left;
margin-right: 10px;
margin-bottom: 5px;
background-size: cover;
}

.menu {
background-color: var(--bg-color);
padding: 1px;
height: auto;
border-bottom: 2px dashed var(--text-color);
display: flex;
align-items: center;
}

nav ul {
list-style: none;
padding: 3px;
margin: auto;
text-align: center;
}

nav ul li {
border: 1px dashed transparent;
display: inline-block;
padding: 2px;
margin: 3px;
}

nav ul li a {  
color: var(--color-b);
border: 1px dashed var(--text-color);
text-decoration: none;
display: inline-block;
padding: 2px;
margin: 0 auto;
}

nav ul li:hover {
}

nav ul li:hover a {
color: var(--color-b);
border-color: var(--bg-color); 
}

.dropdown {
position: absolute;
top: 1px;
right: 5px;
margin: 0;
text-align: center;
}

.dropbtn {
background-color: var(--bg-color);
color: var(--text-color);
border: 2px dashed var(--text-color); 
border-radius: 5px;
padding: 1px;
font-size: 14px;
width: 70px;
height: 20px;
display: block;
position: relative;
box-sizing: border-box;
}

.dropdown-content {
display: none;
position: absolute;
font-size: 16px;
color: var(--color-a);
background-color: var(--color-b);
width: 70px;
border: 2px dashed var(--text-color); 
box-sizing: border-box;
flex-direction: column;
}

.dropdown-content a {
padding: 7px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover,
.dropdown-content a:active {
background-color: var(--color-a);
color: var(--color-b);
}

.dropdown .show {
display: flex;
}

/* stop peeking at my code, it is shy */

body {
font-family: Courier New;
background-color: var(--bg-color);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%23fdf9f8' fill-opacity='0.4' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E");
background-attachment: fixed;
min-height: 100vh;
margin-bottom: 100px;
overflow: auto;
overflow-y: hidden;
width: 100%;
}

.main {
padding: 10px;

background: var(--main-color);
}
  
.footer {
background-color: var(--bg-color);
padding: 3px;
border-top: 2px dashed var(--text-color);
font-size: 11px;
border-radius: 0 0 20px 20px;
text-align: center;
}

#name {
height:20px; 
width:300px; 
padding: 5px; 
color: #FDF9F8; 
font-family: Courier New; 
background-color: #C0CBD8; 
border: 1px solid #FDF9F8; 
border-radius: 4px; 
margin-top: 4px; 
margin-bottom: 12px; 
resize: none;"
}

#email {
height:20px; 
width:300px; 
padding: 5px; 
color: #FDF9F8; 
font-family: Courier New; 
background-color: #C0CBD8; 
border: 1px solid #FDF9F8; 
border-radius: 4px; 
margin-top: 4px; 
margin-bottom: 12px; 
resize: none;"
}

#country {
height:30px; 
width:312px; 
padding: 5px; 
color: #FDF9F8; 
font-family: Courier New; 
background-color: #C0CBD8; 
border: 1px solid #FDF9F8; 
border-radius: 4px; 
margin-top: 4px; 
margin-bottom: 12px; 
resize: vertical;"
}

#message {
height:135px; 
width:300px; 
padding: 5px; 
color: #FDF9F8; 
font-family: Courier New; 
background-color: #C0CBD8; 
border: 1px solid #FDF9F8; 
border-radius: 4px; 
margin-top: 4px; 
margin-bottom: 12px; 
resize: vertical;"
}

ul {
font-family: Courier New;
font-size: 11px;
list-style-image: url('point02.gif');
}

.button1 {
background-color: #C0CBD8;
border: 1px solid #FDF9F8;
color: #FDF9F8;
padding: 10px 10px;
width: 80px;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 4px;
font-family: Courier New;
font-size: 14px;
}

.button1:hover {
background-color: #DDC9C8;
}

.button2 {
color: #FDF9F8;
font-size: 11px;
font-family: Courier New;
text-decoration: none;
border-radius: 4px;
padding: none;
background-color: transparent;
border: 2px dotted #DDC9C8;
}

.button2:hover {
color: #FDF9F8;
font-size: 11px;
font-family: Courier New;
text-decoration: none;
border-radius: 4px;
padding: none;
background-color: #DDC9C8;
border: 2px dotted #FDF9F8;
}

.audio-box {
width: 100%;
height: 30px;
background: rgba(252, 233, 139, 0.5);
font-family: Courier New;
color: #9B4F22;
border: 1px solid rgba(155, 79, 34, 0.7);
font-size: 10px;
overflow: hidden;
display: grid;
grid-template-rows: 6px auto;
margin-top: 15px;
}

.my-player {
width: auto;
height: 350px;
border: 2px solid rgba(155, 79, 34, 0.7);
background-image: url('cardcaptor.jpg');
background-position: center !important;
margin-left: auto;
margin-right: auto;
}

.audio-player {
width: auto;
height: 30px;
background: rgba(252, 233, 139, 0.5);
font-family: Courier New;
color: #9B4F22;
border-top: 1px solid rgba(155, 79, 34, 0.7);
border-bottom: 1px solid rgba(155, 79, 34, 0.7);
font-size: 10px;
overflow: hidden;
display: grid;
grid-template-rows: 6px auto;
margin-top: 30px;
}

.current-track {
width: auto;
text-align: center;
font-family: Courier New;
color: #9B4F22;
margin: 15px;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box; 
}

.current-track span {
display: inline-block;
padding-left: 100%;
animation: scrollText 20s linear infinite;
}

@keyframes scrollText {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

#playingWaves {
padding: 0px;
margin-top: 30px;
margin-left: 40px;
border: none;
background: none;   
}

#playingWaves img {
opacity: 1;
}

progress {
width: 100%;
margin-top: 0px;
background-color: rgba(252, 227, 246, 0.7);
border-bottom: 1px solid rgba(155, 79, 34, 0.7);
}

progress::-webkit-progress-bar {
background-color: rgba(252, 227, 246, 0.7);
}

progress::-webkit-progress-value {
background-color: rgba(234, 25, 69, 0.7);
}

progress::-moz-progress-bar {
background-color: rgba(234, 25, 69, 0.7);
}

.controls {
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 2px;
}

#playPauseBtn {
padding: 0;
border: none;
background: none;
cursor: pointer;
display: flex;    
align-items: center;
}

#playPauseBtn img {
width: 25px;
height: 25px;
}

#currentTime, #totalTime {
font-size: 11px;
color: #9b4f22;
margin: 0 10px;
}

.slider_container {
width: 45%;
max-width: 115px;
display: flex;
justify-content: right;
align-items: right;
}

input[type='range'] {
overflow: hidden;
width: 115px;
-webkit-appearance: none;
background-color: rgba(182, 217, 213, 0.7);
border-radius: 1px;
border: 1px solid rgba(252, 227, 246, 0.7);
}

input[type='range']::-webkit-slider-runnable-track {
height: 10px;
-webkit-appearance: none;
color: #ffffff;
margin-top: -1px;
}

input[type='range']::-webkit-slider-thumb {
width: 10px;
-webkit-appearance: none;
height: 10px;
cursor: ew-resize;
background: rgba(252, 227, 246, 0.7);
box-shadow: -80px 0 0 80px rgba(182, 217, 213, 1);
border-radius: 1px;
}

input[type='range']:hover::-webkit-slider-thumb {
background: rgba(252, 227, 246, 1);
}

input[type='range']:active::-webkit-slider-thumb {
background: rgba(252, 227, 246, 1);
}

.playlist {
width: auto;
height: 132px;
overflow-y: auto;
overflow-x: hidden;
background-color: transparent;
}

.playlist ul {
background: none;
border-radius: 1px;
padding: 0px;
height: 16px;
margin: 0px;
list-style-type: none;
}

.playlist li {
background: rgba(252, 227, 246, 0.5);
border-radius: 1px;
padding: 4px;
width: auto;
height: 16px;
margin: 0px;
color: rgba(155, 79, 34, 0.8);
font-family: Courier New;
font-size: 12px;
letter-spacing: 2px;
text-decoration: none;
font-weight: bold;
vertical-align: middle;
text-align: left !important;
}

.playlist li:hover {
background: rgba(182, 217, 213, 0.5);
border-radius: 1px;
padding: 4px;
width: auto;
height: 16px;
margin: 0px;
color: rgba(155, 79, 34, 0.8);
font-family: Courier New;
font-size: 12px;
letter-spacing: 2px;
text-decoration: none;
font-weight: bold;
vertical-align: middle;
text-align: left !important;
}

.playlist::-webkit-scrollbar {
width: 1px;
}
 
.playlist::-webkit-scrollbar-track {
background-color: rgba(252, 227, 246, 0.5);
}

.playlist::-webkit-scrollbar-button {
background-color: rgba(252, 227, 246, 0.5);
}
 
.playlist::-webkit-scrollbar-thumb {
background-color: rgba(252, 227, 246, 0.5);
border-radius: 0px; 
}

.playlist::-webkit-scrollbar-thumb:hover {
background: rgba(182, 217, 213, 0.5);
}