html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}
*, *::after, *::before {box-sizing: border-box;}img {max-width: 100%;}

/*mobile */

@media only screen and (max-width: 600px) {
    body {
        overflow: unset!important;
        overflow-x:hidden!important;
    }
.scroll-container {
    height: unset!important;
    overflow-y: unset!important;
    scroll-snap-type: unset!important;
}
.scroll-container > * {
    scroll-snap-align: unset!important;
}
    .top {
        display:block!important;
        padding:0!important;
    }
    .top .left {
        margin: auto!important;
        background-image: url(img/kevbg.jpg);
        background-size:cover;
        background-position: 55%;
        width:100%!important;
        height:calc(100vh - 30px);
    }
    .top .right #musicplayer {
        width:100%!important;
        margin:auto!important;
        position: unset!important;
    }
    .stars, .guitar {
        display:none!important;
    }
    .kevin::after {
        display:none!important
    }
    .top .left::before {
    content:"";
    display:block;
    background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/1f1d3db0-bb51-4da7-874b-fc4bda5f2395/dclwg5d-3249b800-65b3-4ad5-9a42-d0519ba70d4c.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzFmMWQzZGIwLWJiNTEtNGRhNy04NzRiLWZjNGJkYTVmMjM5NVwvZGNsd2c1ZC0zMjQ5YjgwMC02NWIzLTRhZDUtOWE0Mi1kMDUxOWJhNzBkNGMuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YV3WyK5Vbd7sQRvEr2N7ufHdC9eH5fyMha45pOxNd80);
    background-size:500px;
    position: absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
    mix-blend-mode: multiply;
    opacity:0.7;
    pointer-events: none;
}
.bottom, .commissions {
    width:100%!important;
    min-width: 100%!important;
    max-width: 100%!important;
    padding:0!important;
    display:block!important;
    margin:auto!important;
    height:fit-content!important;
    padding-inline: 0!important;
}
.price-grid {
    grid-template-columns: 1fr 1fr!important;
    min-width: 100%!important;
    max-width: 100%!important;
    width:100%!important;
    position: unset!important;
    height: fit-content!important;
    padding:10px!important;
}
.suuji {
    display:none!important;
}
.contact-nav {
    display:block!important;
    margin-bottom:10px!important;
    position: unset!important;
    height:auto!important;
}
.contact-nav img {
    display:none!important;
}
.contact-nav a {
    display:block!important;
    width:fit-content!important;
    height:auto!important;
    margin-bottom:10px;
}
.portfolio {
    display:none!important;
}
.extra-info-grid {
    width:100%!important;
    max-width: 100%!important;
    margin: auto!important;
    padding-inline: 0!important;
    padding:10px!important;
}
}

/* main */
@keyframes intro {
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
        pointer-events:none;
    }
}
@keyframes loader {
    0% {
        content:"Loading";
    }
    25% {
        content:"Loading.";
    }
    50% {
        content:"Loading..";
    }
    75% {
        content:"Loading...";
    }
    100% {
        content:"Loading";
    }
}
@keyframes float {
    0% {
        transform: translateX(0px) translateY(0px);
    }
    25% {
        transform: translateX(2px) translateY(-1px);
    }
    50% {
        transform: translateX(0px) translateY(-2px);
    }
    75% {
        transform: translateX(-1px) translateY(-1px);
    }
    100% {
        transform: translateX(0px) translateY(0px);
    }
}
.intro {
    display:none!important;
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    background-color:black;
    z-index:998;
    animation: intro 0.3s linear forwards;
    animation-delay: 2s;
    display:flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap:10px;
}
.intro .loader:after {
    content:"Loading";
    animation: loader 1s linear infinite;
    font-size:50px;
}
.intro > img {
    filter:drop-shadow(0 0 2px white) grayscale();
    height:180px;
    image-rendering: pixelated;
}
/* scrollbar */
::-webkit-scrollbar {
    width: 16px
}

::-webkit-scrollbar:horizontal {
    height: 17px
}

::-webkit-scrollbar-corner {
    background: #dfdfdf
}

::-webkit-scrollbar-track {
    background-image: url("data:image/svg+xml;charset=utf-8,<svg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='gray'/><path fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='silver'/></svg>")
}

::-webkit-scrollbar-thumb {
    background-color: rgb(127, 127, 127);
    box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px rgb(27, 27, 27),inset 2px 2px #dfdfdf
}

::-webkit-scrollbar-button:horizontal:end:increment,::-webkit-scrollbar-button:horizontal:start:decrement,::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:vertical:start:decrement {
    display: block
}

::-webkit-scrollbar-button:vertical:start {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAIAAABbzbuTAAAAbklEQVR4AcyP0Q2AMAhESeeSGRhJ+WYbV3AAVxKDaYpUg1/2QumF3Gto2b4IAIqeKScR0fAJ6LUkpDGtC1CXrL8AZn7asLOSpa1H7A60udZX0gExEScOmHuqb5txgI3e+6AAEe0J2d8KIq5pAcABAAD//3iv7XwAAAAGSURBVAMAFm6QI1J/fm8AAAAASUVORK5CYII=");
    height: 17px
}

::-webkit-scrollbar-button:vertical:end {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAIAAABbzbuTAAAAdElEQVR4AcyP2w2AIAxFG+aSGRgJ/WYbV3AAV/KY+gEVkvpjuLm82nsSGo4vEpHAWnwqpRC+AY7VIWL4Abg5PTuw9WRma2bIOZv2u9IApOtEfaeltgBVzenO07gDkBilafUBGiP/A6SUTof0kyHGuLslIhcAAAD//4T8I6EAAAAGSURBVAMA9YyQIzzTlHcAAAAASUVORK5CYII=");
    height: 17px
}

::-webkit-scrollbar-button:horizontal:start {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z' fill='%23000'/%3E%3C/svg%3E");
    width: 16px
}

::-webkit-scrollbar-button:horizontal:end {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z' fill='%23000'/%3E%3C/svg%3E");
    width: 16px
}
* {
    cursor: url(img/cursor.png), auto;
}
html {
  scroll-behavior: smooth; /* For smooth scrolling when jumping */
}
body {
    background-color: black;
    background-image:url(img/bg.jpg);
    color:white;
    font-family:'ms pgothic', arial;
    overflow:hidden;
}
body > div:not(.scroll-container) {
    pointer-events: none;
}
.scroll-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}
.scroll-container > * {
    scroll-snap-align: start;
}
.kevin {
    filter:saturate(0);
    transition: .5s;
}
#credits-dialog:target {
    opacity:1;
    pointer-events: all;
}
#credits-dialog::before {
    display:block;
    content:"";
    position: fixed;
    top:0;
    left:0;
    background-color:black;
    width:100%;
    height:100%;
    opacity:0.5;
}
#credits-dialog {
    opacity:0;
    pointer-events: none;
    position: fixed;
    z-index:996;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    height:400px;
    width:400px;
    max-width:90%;
    max-height:90%;
    background-color:black;
    border:1px solid white;
    box-shadow: 0px 0px 30px 5px black;
    border-radius: 5px;
    transition: 0.3s;
    padding:40px;
    line-break: auto;
    word-break: break-all;
}
#credits-dialog > p {
    margin-bottom: 10px;
}
#credits-dialog h5 {
    background-color: silver;
    color:white;
    font-weight:bold;
    position: absolute;
    width:100%;
    top:0;
    left:0;
    padding:5px;
    height:25px;
    font-size:13px;
    letter-spacing: 1px;
}
#credits-dialog h5 a {
    text-decoration: none;
    background-color:black;
    color:white;
    padding:5px;
    margin:2px;
    width:40px;
    display:block;
    position: absolute;
    right:0;
    top:0;
    text-align: center;
    border:1px solid white;
    font-size:10px;

}
.stars {
    background-image: url(img/stars.gif);
    width:15vw;
    height:100%;
    background-size:contain;
    background-repeat: no-repeat;
    background-position: top center;
    position:absolute;
    left:0;
}
.guitar {
    background-image: url(img/guitar.gif);
    width:10vw;
    height:40%;
    background-size:contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    position:absolute;
    right:0;
    bottom:0;
}
.portfolio {
    height:100vh;
    padding:20px;
    padding-bottom:0px;
    display:flex;
    flex-direction: column;
}
.portfolio > h3 {
    font-size:60px;
    margin:auto;
    margin-bottom:20px;
    text-align: center;
    height:fit-content;
}
.computer-screen {
    width:1200px;
    max-width:90%;
    height:100%;
    flex:1;
    margin:auto;
    background:linear-gradient(silver, gray);
    position: relative;
    border-radius: 10px 10px 0px 0px;
    border:2px solid black;
}
.computer-screen .inside {
    display:block;
    position: absolute;
    inset:50px;
    top:80px;
    margin:auto;
    background-color: white;
    border: 80px inset silver;
    border-radius:20px;
    transform: scaleY(0.95);
    outline:1px inset black;
}
.computer-screen .inside .windows {
    display:grid;
    grid-template-columns: 1fr 1fr;
    position: absolute;
    inset:0;
    margin:auto;
    width:100%;
    height:100%;
    z-index:875;
    gap:20px;
    padding:10px;
    text-align: center;
}
.computer-screen .inside .windows .dialog {
    background:silver;
    border:2px inset black;
    box-shadow: 0px 0px 0px 1px white;
    height:300px;
    text-align: left;
    position: relative;
    padding-top:25px;
}
.computer-screen .inside .windows .dialog > div {
    overflow-y:auto;
    height:100%;
    padding:10px;
}
.computer-screen .inside .windows .dialog > div * {
        text-shadow: none!important;
        color:black;
        font-weight: bold;
}
.computer-screen .inside .windows .dialog > div iframe {
    height:300px;
    width:100%;
}
.computer-screen .inside .windows .dialog:first-child {
    margin-top:100px;
    grid-row: span 2;
    height:70%;
}
.computer-screen .inside .windows .dialog h5 {
    background-color: black;
    color:white;
    font-weight:bold;
    position: absolute;
    width:100%;
    top:0;
    left:0;
    padding:5px;
    height:25px;
    letter-spacing: 1px;
}
.computer-screen .inside .windows .dialog h5 a {
    text-decoration: none;
    background-color:black;
    color:white;
    padding:5px;
    margin:2px;
    width:40px;
    display:block;
    position: absolute;
    right:0;
    top:0;
    text-align: center;
    border:1px solid white;
    font-size:10px;
}
.computer-screen .inside::before {
    border-radius: 50% 50% 50% 50% / 10% 10% 10% 10%;
    content: "";
    display:block;
    position: absolute;
    inset:0px;
    height:125%;
    width:100%;
    margin:auto;
    background-color: black;}
.computer-screen .inside::after {
    border-radius: 10% 10% 10% 10% / 50% 50% 50% 50%;
    content: "";
    display:block;
    position: absolute;
    inset:0px;
    height:109%;
    width:115%;
    left:-7.5%;
    margin:auto;
    background-color: black;}
.middlepart {
    display:none;
    gap:50px;
    margin-top:50px!important;
    height:80%;
    width:80%;
    margin:auto;
}
.middlepart > * {
    flex:1;
    overflow-y:auto;
    border:1px solid white;
    background:black;
    padding:20px;
}
.art-preview iframe {
    width:100%;
    height:90%
}
.top:hover .kevin {
    filter:saturate(1.1);
}
a {
    color:silver;
}
b {
    font-weight: bold;
}
a, p, h1, h2, h4, h5, b, h3, ul, li {
    filter: saturate(0);
    text-shadow:
    2px 0px black,
    -2px 0px black,
    0px 2px black,
    0px -2px black,
    2px 2px black,
    -2px -2px black,
    -2px 2px black,
    2px -2px black,
    0px 0px 10px black;
}

ul {
    list-style-type: square;
    list-style-image: url(img/cig.gif);
    margin-top:10px;
    padding:10px;
}
ul li {
    margin-bottom:5px;
}
.top {
    display:flex;
    height:100vh;
    padding:20px;
}
.left {
    width:45vh;
    text-align: center;
}
.right {
    flex:1;
}
.bubble, .title {
    filter: drop-shadow(8px 8px 5px rgba(255, 255, 255, 0.274));
}
.title {
    background-image:url(img/title2.png);
    background-size:contain;
    background-repeat:no-repeat;
    background-position: top center;
    width:80%;
    height:18vh;
    animation: float 2s linear infinite;
}

.kevin {
    background-image: url(img/kevbg.jpg);
    background-size:cover;
    background-position: 65%;
    width:100%;
    height:100%;
    box-shadow:inset 0px 0px 10px 10px black;
    position:relative
}
.kevin::after {
    content:"";
    display:block;
    background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/1f1d3db0-bb51-4da7-874b-fc4bda5f2395/dclwg5d-3249b800-65b3-4ad5-9a42-d0519ba70d4c.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzFmMWQzZGIwLWJiNTEtNGRhNy04NzRiLWZjNGJkYTVmMjM5NVwvZGNsd2c1ZC0zMjQ5YjgwMC02NWIzLTRhZDUtOWE0Mi1kMDUxOWJhNzBkNGMuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YV3WyK5Vbd7sQRvEr2N7ufHdC9eH5fyMha45pOxNd80);
    background-size:500px;
    position: absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
    mix-blend-mode: multiply;
    opacity:0.7;
    pointer-events: none;
}
nav {
    display:flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;

}
.bubble {
    border: 2px solid white;
    border-radius: 100%;
    max-width:220px;
    margin-right:-100px;
    margin-bottom:20px;
    aspect-ratio: 1/1;
    max-height:22vh;
    box-shadow: 
    inset 0px 0px 0px 2px black,
    inset 0px 0px 40px 0px white
    ;
    background:rgba(0, 0, 0, 0.642);
    animation: float 2s linear infinite;
    display:flex;
    flex-wrap: wrap;
    gap:10px;
    align-items: center;
    align-content: center;
    justify-content: center;
    font-size:1.5vh;
}
.bubble.one {
    padding:20px;
    max-width:260px;
    animation-delay:0.3s;
}
.bubble.two {
    margin-right:100px;
}
.bubble.three {
    max-width:200px;
    animation-delay:0.6s;
}
.bubble.two > p, .bubble.three > p {
    aspect-ratio:unset!important;
    width:fit-content;
    border-radius: 20px;
    height:fit-content;
}
.bubble > p {
    border: 1px solid white;
    width:40%;
    padding:10px;
    aspect-ratio: 1/1;
    box-shadow: 
    inset 0px 0px 0px 2px black,
    inset 0px 0px 12px 0px white
    ;
    background:rgba(0, 0, 0, 0.642);
    border-radius: 100%;
}
.bubble > p img {
    aspect-ratio: 1/1;
    filter:contrast(2)
}
.bottom {
    display:flex;
    flex-wrap: wrap;
    padding-top:20px;
    padding-inline:20px;
    min-height:100vh;
}
.contact-nav {
    height:6vh;
    width:100%;
    position: absolute;
    top:-1vh;
    display:flex;
    align-items: center;
}
.contact-nav img {
    height:100%;
    margin-left:50px;
}
.contact-nav h1 {
    font-size:40px;
    margin-inline:20px;
}
.contact-nav a {
    border: 1px solid white;
    border-radius: 50px;
    padding:10px;
    padding-inline:20px;
    box-shadow: 
    inset 0px 0px 0px 1px black,
    inset 0px 0px 10px 0px white
    ;
    background:rgba(0, 0, 0, 0.642);
    color:white;
    margin-left:10px;
}
.commissions {
    height:98vh;
    display:flex;
    width:1200px;
    min-width:60%;
    max-width: 90vw;
    margin:auto;
    padding:10px;
    gap:10px;
    position: relative;
}
.suuji {
    background-image: url(img/suuji.png);
    background-repeat: no-repeat;
    background-position:center;
    background-size:contain;
    position: absolute;
    bottom:2vh;
    width:18vw;
    height:90vh;
    filter:saturate(0);
    transition: .5s;
}
.suuji:hover {
    filter:saturate(1.1);
}
.price-grid {
    flex:1;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:10px;
    flex-wrap: wrap;
    position: absolute;
    bottom:2vh;
    width:calc(100% - 20vw);
    left:20.5vw;
    height:90vh;
}
.item img {
    width:100%;
    max-height:45%;
    object-fit: contain;
    display:block;
    margin-bottom:10px;
    filter:saturate(0) contrast(1.2);
    transition: 1s;
}
.item:hover img {
    filter:saturate(1.2) contrast(1);
}
.item h2 {
    font-size:20px;
    font-weight:bold;
    border-bottom: 1px dotted white;
    padding-bottom:5px;
}
h3 {
    font-size:40px;
    margin:5px;
}
.item p {
    margin-bottom:5px;
}
.item {
    padding:10px;
    background:rgb(43, 43, 43);
    text-align: center;
    color:white;
    box-shadow: inset 0px -100px 70px -20px black,
    inset 0px 0px 0px 2px white;
    border-radius:20px 20px 0px 0px;
    transition:0.3s;
    text-align:left;
    height: 45vh;
    font-size:1.8vh;
}
.item:hover {
    transform: translateY(-10px);
}
.extra-info-grid {
    flex:1;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    height:98vh;
    padding-inline:25px;
    max-width: 900px;
    margin:auto;
}
.extra-info-grid .item:first-child {
    grid-column: span 2;
    padding-inline:50px;
    padding-bottom:100px;
}
.extra-info-grid .item:first-child img {
    height:fit-content;
}
.extra-info-grid .item:hover {
    transform: none;
}
.extra-info-grid .item {
    padding-inline: 40px;
    height: fit-content;
}
.extra-info-grid h3 {
    border-bottom: 1px dotted white;
    padding-bottom:5px;
}


/* black theme */

#musicplayer{ 
  font-family: 'basiic';
  font-weight:bold;
  height:30px;
  width:70%;
  right:50px;
  top:20px;
  position:fixed;
  z-index:888;
  margin-bottom:20px;  
  display:flex;
    background: linear-gradient(180deg,black 0%, lightgray 45%, black 47%, black 60%, gray 100%);  
  border:ridge 2px gray;/* border around player */
  outline: solid 2px black;  
  box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
    }
 
    .songtitle{ 
    display:block;
    padding:2px; /* padding around song title */
    font-family: 'pixel';
    margin-top:4px;
    margin-right: 5px; 
    font-size:15px;
    color:black;
    letter-spacing: 1px; 

    background: white;/* background of song title */
    border: gray inset 1px;
       border-radius:6px;
       box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
    }
 
    .controls{
      font-size:12px; /* size of controls */
      text-align:center;
      width:100px;
      height:20px;
      text-decoration:none;
      filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
    }
 
    .controls td{
       padding-top:5px; /* padding around controls */
    }
 
    .seeking{
      width:75%;
      background: transparent;/* background color of seeking bar */
      display:flex;
      justify-content: space-evenly;
      padding:7px; /* padding around seeking bar */
       
    }
 
    .current-time{  
      padding-right:5px;
      margin-right: 3px; 
     filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
       
    }
 
    .total-duration{
      padding-left:5px;
      filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
    }
  .ctrlimg {
   height:16px;
   width:16px;
   }
    .ctrlimg:hover{
        cursor:help;
    }
    
    input[type=range] {
        -webkit-appearance: none;
        width: 100%;
      background: transparent;
    }
    
    input[type=range]:focus {
        outline: none;
    }
    
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 6px; /* thickness of seeking track */
        cursor: help;
        border-radius: 6px;
        background: black; /* color of seeking track */
        border: 1px white solid;
    }

    input[type=range]::-webkit-slider-thumb {
      
        height: 30px; /* height of seeking square */
        width: 20px; /* width of seeking square */
        background-image:  url('https://file.garden/Zztv0a9yEhr5pmEq/tumblr_40786d3985453eb5412348aad980ac51_3a9a1088_1280%20(1).gif'); /* image of  seeking square */
        background-size: 25px;
        -webkit-appearance: none;
        margin-top: -10px;
        
    }
    
input[type=range].volume_slider::-webkit-slider-runnable-track { 
    background: white; /* color of volume seeking track */
     filter:drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);  /* outline of volume seeking track */ 
    }
    
 input[type=range].volume_slider::-webkit-slider-thumb {
    background-image: url(https://file.garden/Zztv0a9yEhr5pmEq/798d7d72_original.png);/* image of volume seeking square */
    background-size: 20px;
    height: 20px; /* height of volume seeking square */
    width: 20px; 
    margin-top: -8px;
   }
 
 
.slider_container {  
  width: 15%;       /* width of volume seeker */
  display: flex;
  justify-content: center;
  align-items: center;
}