:root {
    --accent: rgb(172, 41, 41);
    --accent2: rgb(220, 139, 139);
}

body {
    margin: 0;
    padding: 0;
    background: black;
}

h2 {
    color: var(--accent);
    margin-bottom: 0;
}

#hi {
    align-items: center !important;
    position: relative;
}

.sidebar {
    width: 12em;
    height: 100%;
    border-top: none !important;
    border-bottom: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    background: #7a4044;
    filter: drop-shadow(2px 0px 2px rgba(255, 255, 255, 0.425));
}

.sidebar1 {
    left: 10%;
}

.sidebar2 {
    right: 10%;
}

.sidebar2>.pics {
    height: 97%;
    overflow: auto;
    scrollbar-width: none;
}

.content {
    width: 50%;
    height: 75%;
    /* border: 1px solid rgba(255, 255, 255, 0.434); */
    color: white;
     font-family: chalk;
     display: flex;
     flex-direction: column;
     gap: 1em;
}

.content>.top {
    display: flex;
    height: 37%;
}

.pics img {
    filter: saturate(0);
}

.pics img:hover {
    filter: saturate(1);
}

.top>.half1 {
    width: 35%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.half1>.tabs {
    position: absolute;
    left: -2em;
    top: 3em;
    width: 100%;
    height: 100%;
    color: black;
}

.tabs>.tab {
    height: 40px;
    width: calc(200px - .75em);
    background: #c74747;
    border: 2px solid #890202;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 5px;
    padding-left: .75em;
    position: relative;
    left: 0;
    transition: all .2s ease;
    margin-bottom: 1.25em;
    color: white;
}

.tab a {
    color: white;
}

.tab:hover {
    left: -8.75em;
}

.tab>.icon {
    margin-right: .75em;
}

.half1>.inside {
    background-image: url(../bg/wallpaper2you_64749.gif);
    background-size: contain;
    height: 85%;
    width: 95%;
    margin: auto;
    border: 1px solid #890202;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    text-align: left;
}

.half1>.inside>.ok {
    width: calc(80% - 2em);
    height: calc(77% - 2em);
    background: rgba(255, 255, 255, 0.524);
    margin: auto;
    color: black;
    padding: 1em;
    backdrop-filter: blur(2px);
    border-radius: 5px;
    text-shadow: 2px 2px 2px rgba(208, 145, 145, 0.556);
}

.contact {
    height: 100%;
    overflow: auto;
}

.contact p {
    margin: .5em 0;
}

.contact a {
    color: rgb(138, 30, 30);
    text-decoration: dotted underline;
}

.contact a:hover {
    text-decoration: none;
    color: rgb(255, 189, 189);
}

.text>.inside p:first-of-type {
    margin-top: .5em;
}

.text>.inside p b {
    color: var(--accent2);
}


.idbuttons {
    width: 95%;
}



.kewl {
    text-align: left;
}

.kewl p {
    margin: .25em 0;
}

.top>.half2 {
    width: 65%;
    /* background: green; */
}

.half2>.inside {
    padding: .5em;
    margin: auto;
    width: calc(90% - 1em);
}

.half2>.inside p {
    margin: .75em 0;
}

.blinkie {
    margin-bottom: 1em;
}

.thirds {
    display: flex;
    height: 63%;
    width: 100%;
    gap: 1.5em;
}

.thirds>.side1 {
    width: 36%;
    text-align: right;
    /* background: pink; */
}

.side1>.inside {
    padding: 1em;
    height: 93%;
    overflow: auto;
    scrollbar-width: none;
    /* padding-right: .25em; */
}

.thirds>.side2 {
    width: 32%;
    /* background: blue; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.ipod {
    border: 1px outset rgb(126, 58, 58);
    border-radius: 20px;
    background: #3f0606;
    height: 100%;
    width: 100%;
    margin: auto;
    font-family: Myriad Pro Semibold;
    box-shadow: inset 1px -3px 15px 3px rgba(0, 0, 0, 0.341);
}

.ipod>.screen {
    width: calc(87% - 10px);
    height: calc(43% - 10px);
    margin: auto;
    margin-top: 1.5em;
    background: #F6F6F6;
    border-radius: 5px;
    border: 5px solid black;
    color: black;
}

.screen>.topbar {
    height: 25px;
    width: 100%;
    font-size: 1.125em;
    background: linear-gradient(180deg, rgba(237, 240, 237, 1) 0%, rgba(182, 197, 205, 1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.859);
    /* gap: 1em; */
    position: relative;
}

.playpause-track {
    color: #5d99c2;
    position: absolute;
    left: 5px;
    top: 3px;
}

.trackinfo {
    text-align: left;
    padding: 0 1em;
}

.albumetc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

.one {
    width: 41%;
}

#albumimg {
    height: 100px;
}

.names {
    width: 59%;
}

.names p {
    margin: .5em 0;
}

.seeking {
    position: relative;
    margin-top: .75em;
}

.seeking input {
    width: 100%;
    margin: 0 !important;
    box-shadow: 0px 3px 3px 0px #C9CCC9;
    border-radius: 1px;
    height: 15px;
}

.seeking>.glass {
    height: 4px;
    width: 100%;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.632) 30%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    top: 3px;
    left: 0;
    pointer-events: none;
}



input[type="range"]::-moz-range-track {
    width: 100%;
    height: 100%;
    cursor: help;
    background: linear-gradient(180deg, rgba(245, 248, 245, 1) 10%, #e5e6e7 30%, #e5e6e7 60%, rgba(245, 248, 245, 1) 75%);
    
}


input[type="range"]::-moz-range-progress {
    background: repeating-linear-gradient(90deg,rgba(53, 151, 195, 1) 0%, rgba(94, 172, 223, 1) 25%, rgba(53, 151, 195, 1) 50%, rgba(94, 172, 223, 1) 75%, #3597c3 100%);
    background-size: 1%;
    height: 100%;
    background-attachment: fixed;
    
}

input[type="range"]::-moz-range-thumb {
    height: 100%;
    width: 0px;
    border-radius: 0px;
    background: #206b8e;
    cursor: help;
    border: none;
}

.total-duration {
    position: absolute;
    right: 0;
    bottom: 0;
}

.ipod>.controls {
    border-radius: 50%;
    background: black;
    height: 14em;
    width: 14em;
    margin: auto;
    margin-top: 2.5em;
    position: relative;
    color: rgb(201, 201, 201);
}

.controls>.enter {
    background-color: #3F0606;
    height: 5.5em;
    width: 5.5em;
    position: absolute;
    top: 4.25em;
    left: 4.25em;
    border-radius: 50%;
    z-index: 3;
}

.controls>.menu {
    position: absolute;
    top: .875em;
    right: 0;
    width: 100%;
}

.controls>.ctrl_Bk {
    position: absolute;
    top: 45%;
    left: 1em;
    transform: scaleY(.8);
}

.controls>.ctrl_fwd {
    position: absolute;
    top: 45%;
    right: 1em;
    transform: scaleY(.8);
}

.controls>.pp {
    position: absolute;
    bottom: .75em;
    right: 0;
    width: 100%;
}

.ctrl {
    z-index: 2;
    transition: all .2s ease;  
}

.ctrl::after {
    content: '';
    position: absolute;
background: radial-gradient(circle,rgba(207, 207, 207, 0.5) 0%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
z-index: -1;
    clip-path: polygon(100% 0, 1% 0, 50% 100%);
    border-radius: 50%;
}

.ctrl:active::after {
    background: radial-gradient(circle,rgba(131, 131, 131, 0.5) 0%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
}

.menu:hover::after {
    height: 8em;
    width: 10.5em;
    left: 12.5%;
    top: -0.95em;
}

.ctrl_Bk:hover::after {
    height: 8.75em;
    width: 13em;
    left: -3.25em;
    top: -3.75em;
    transform: rotate(-90deg);
}

.ctrl_fwd:hover::after {
    height: 8.75em;
    width: 13em;
    right: -3.25em;
    top: -3.75em;
    transform: rotate(90deg);
}

.pp:hover::after {
    height: 8em;
    width: 10.5em;
    left: 12.5%;
    bottom: -0.95em;
    transform: rotate(180deg);
}



.thirds>.side3 {
    width: 32%;
    padding-top: 1em;
    /* background: orange; */
}

.side3>.inside {
    /* padding: 1em 0; */
    width: 92%;
    height: 100%;
    overflow: auto;
    margin: auto;
    /* background-image: url('../bg/1980262_8c5d8.gif');
    background-size: 60%; */
    scrollbar-width: none;
    /* border-radius: 10px; */
    text-align: left;
}



.divider {
    width: 75%;
    margin: auto;
    height: 1px;
    background: white;
}

@font-face {
    font-family: Myriad Pro;
    src: url(../font/MYRIADPRO-REGULAR.OTF);
}

@font-face {
    font-family: Myriad Pro Semibold;
    src: url(../font/MYRIADPRO-SEMIBOLD.OTF);
}