/**
     * Copyright (C) 2024 Alexander Barkin
     * All rights reserved.
     *
     * This software is the property of Alexander Barkin.
     * Unauthorized reproduction, distribution, or modification
     * of this software is strictly prohibited.
     *
     * BARKIN.US PROJECT ➀
     * Version 2.1
     * 07.24.2023
     */
 
    :root {
      --player-width: 518px;
      --player-height: 98vh;
    }
    
    #yb-music-player{
        width: var(--player-width);
        height: var(--player-height);
    }
    
    html, body {
        background-color: black; 
        resize: none;
    }
    
    body {
        font-family: "Sans Serif", Arial, Helvetica, sans-serif;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
    
    nav a {
        display: none;
    }
    
    .my-div {
        position: absolute; 
        bottom: 0; 
        text-align: left; 
        color: white; 
        margin-bottom: 8px; 
        margin-left: 8px; 
    }
    
    #home-container {
        position: relative;
    }
    
    #music-library {
        position: relative;
        z-index: 1;
    }

    /* Smoothly transition the opacity */
    #canvas {
        position: absolute;
        left: 50%; 
        transform: translateX(-50%); 
        top: 0;
        z-index: -1;    
        height: 100%;
      
        opacity: 0.8;
        transition: opacity .2s;
    }
    
    #canvasHome {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100vh;
        background: linear-gradient(transparent,transparent,#800080);
    }
    
    /* Hide all button rows by default */
    .button-row {
        display: none;
    }
    /* Show the button row for the targeted section */
        section:target + .button-row {
        display: block;
    }
    
    #content {
		display: none;
	}
    
    #home {
        outline:focus none;
        user-select: none;
        resize: none;
        
        background: black;
        background-color: black;
        background-image:  url("https://barkin.us/img/bg04.jpg") ;
        background-size: cover;
        background-position: center;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        
        min-height: 100vh; 
        min-width: 100vw;  
    }
    
    #player {
        position: relative; 
        top: 0;
        
        outline: none;
        user-select: none;
        resize: none;
        background: black;
        background-color: black;
        /*
        transition: background-image 2s ease-in-out;
        transform: rotateY(0deg);
        */
        
        -webkit-backface-visibility: hidden;
        
        -o-transform-origin: center bottom 0;
        -ms-transform-origin: center bottom 0;
        -moz-transform-origin: center bottom 0;
        -webkit-transform-origin: center bottom 0;
        transform-origin: center bottom 0;
        
        -o-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -o-transition: all 4s ease-in-out;
        -moz-transition: all 4s ease-in-out;
        -webkit-transition: all 4s ease-in-out;
        transition: all 4s ease-in-out;
       
        
        background-image:  url("https://barkin.us/img/bg07.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat; 
        height: 100%;
        width: 100%; 
        margin: 0;
        padding: 0;
        overflow: hidden;
        min-height: 100vh; 
        min-width: 100vw;  
    }
    /*
    #contact {
        outline: none;
        user-select: none;
        resize: none;
        
        background-image: url("../img/background/bg01.jpg") ;
        background-size: cover;
        background-position: center;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        min-height: 100vh; 
        min-width: 100vw; 
    }
    
    #990099
    
    #fff1e2
    #fbdfbc
    */
    
    .popup {
      display: none;
      position: fixed;
      top: 48%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color:  #800000;   /* #800080; #cdc2d7; */
      padding: 20px;
      border: 1px solid #ccc;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      text-shadow: 1px 1px 1px black;
      border-radius: 1%;  
      z-index: 777;
      margin-bottom: -20px;
    }
    
    .popup form {
        display: flex;
        flex-direction: column;
    }
    
    /* margin between elements */
    .popup form > * {
        margin-bottom: 10px; 
    }   
    
    #name,
        #email,
            #message, 
                #h-captcha {
        border: 1px solid black; 
        transition: all 0.3s ease;  /*Add transition for smooth effect */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
        transform: translateZ(-10px); /* Move the elements back in 3D space */
        background-color: #F5F5F5; /* #FFFAFA; */
    }
    
    #cancelBtn, #send {
        border: 1px solid black; 
        border-radius: 1%;
        transition: all 0.3s ease;  
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
        transform: translateZ(-20px); 
        
        background-color: IndianRed;  /* DarkMagenta;   #4B0082;  */
        color: whitesmoke; 
        text-shadow: 1px 1px 1px black;
    }

    @keyframes bg {
        0%{ background-position: 0 0; }
        100%{ background-position: 8px 8px; }
    }
    
    .dropbtn, .dropbtn2 {
        color: white;
        margin-top:10px;
        margin-right:10px;
        border: none;
        cursor: pointer;
        height: 40px;
        width: 40px;
        z-index: 30;
    }
    
    .dropbtn:hover, .dropbtn:focus, .dropbtn2:hover, .dropbtn2:focus {
        background-color: #2980B9;
    }
    
    .dropdown, .dropdown2 {
        position: absolute;
        display: inline-block;
        right: 0;
        top: 0;
        z-index: 4;
    }
    
    .dropdown-content, .dropdown-content2 {  
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        margin-top: 10px;
        margin-right: 10px;
   
        background-color: black;
        text-shadow: 1px 1px 1px black;
        
        min-width: 100px;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        z-index: 5;
    }
    
    .dropdown-content a, .dropdown-content2 a {
        color: white; 
        padding: 6px 12px;
        text-decoration: none;
        display: block;
        position: relative;
    }
    
    .dropdown-content a:not(:last-child)::after, 
    .dropdown-content2 a:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 16px;
        right: 16px;
        height: 1px;
        background-color: #ccc;
    }
    
    .dropdown a:hover, .dropdown2 a:hover {background-color: #ddd;}
    
    .show, .show2 {display: block;}
    
  
    
    /*  
    .details {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin-top: 25px;
    }
    */
    
    .track-art {
        position: relative;
        float: left;                
        background: #333 url("../img/images/album-cover-bg.jpg") no-repeat 0 0 scroll; 
        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .75);
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .75);
        box-shadow: 0 1px 4px rgba(0, 0, 0, .75);
        margin-left:8px;
        margin-right:16px;
        height: 180px;
        width: 180px;
        /*background-image: url("../img/images/album-cover-bg.jpg");*/
        background-size: cover;
        border-radius: 1%;
    }
 
    .track-art .highlight {   /* todo: !!! */
        background: transparent url(../img/images/album-cover-highlight.png) no-repeat 0 0 scroll;
        opacity: 1;
    }
  
    .info-container {
        position: relative;
        height: 140px; 
        margin-top:10px;
        margin-bottom:10px;
        /*
        right: 200;
        top: 10;
        padding: 10px,0 10px,0;
        */
    }
    
    .now-playing {
        display: flex;
        font-size: 0.9rem; /* 0.6rem; no skeleton*/
        align-items: center;
        flex-direction: column;
        justify-content: center;
        color: #ccc;
        text-shadow: 1px 1px 1px black;
        
        margin-top: 3px;
        margin-bottom: 6px;
    }
    
    .track-name {
        display: flex;
        justify-content: center;
        color: whitesmoke;
        font-size: 1.9; /*1.3rem;  no skeleton*/
        text-shadow: 1px 1px 1px black;
        
        margin-top: 8px;
        margin-bottom: 2px;
    }
    
    .track-artist {
        display: flex;
        justify-content: center;
        color: #ccc;
        font-size: 1.3rem; /*1rem;  no skeleton*/
        text-shadow: 1px 1px 1px black;
        
        margin-top: 8px;
        margin-bottom: 7px;
    }
    
    .buttons {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 42px;
    }
    
    .fa-1x , .fas-1x {
        font-size: 1em;
        color: whitesmoke;
        text-shadow: 1px 1px 1px black;
    }
  
    .fa-2x {
        font-size: 2em;
        color: whitesmoke;
        text-shadow: 1px 1px 1px black;
    }
  
    .fa-3x {
        font-size: 3em;
        color: whitesmoke;
        text-shadow: 1px 1px 1px black;
    }
  
    .fa-4x {
        font-size: 4em;
        color: whitesmoke;
        text-shadow: 1px 1px 1px black;
    }
    
    /* Smoothly transition the opacity */
    .playpause-track,
    .prev-track,
    .next-track,
    .prev-playlist,
    .next-playlist,
    .play-random,
    .show-hide-playlist {
        padding: 8px;
        opacity: 0.8;
        transition: opacity .2s;
    }
    
    .playpause-track:hover,
    .prev-track:hover,
    .next-track:hover, 
    .prev-playlist:hover,
    .next-playlist:hover,
    .play-random:hover,
    .show-hide-playlist:hover {
        opacity: 1.0;
    }
    
    .slider_container {
        width: 60%;
        max-width: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
    }
    
    .seek_slider::-webkit-slider-thumb,
    .volume_slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 15px;
        height: 15px;
        background: whitesmoke;
        cursor: pointer;
        border-radius: 50%;
        box-shadow: 0 0 0 1px black;
    }
    
    .seek_slider:hover,
    .volume_slider:hover {
        opacity: 1.0;
    }
     
    .seek_slider {
        width: 60%;
        appearance: none;
        height: 3px;
        background: black;
        opacity: 0.7;
        box-shadow: 0 0 0 1px black;
        border: solid 1px #82CFD0;
        border-radius: 8px;
        outline: none;
        transition: background 450ms ease-in;
    }
    
    .volume_slider {
        width: 30%;
        appearance: none;
        height: 2px;
        background: black;
        opacity: 0.7;
        box-shadow: 0 0 0 1px black;
        border: solid 1px #82CFD0;
        border-radius: 8px;
        outline: none;
        transition: background 450ms ease-in;
    }
    
    .current-time,
    .total-duration {
        color: whitesmoke;
        text-shadow: 1px 1px 1px black;
        padding: 10px;
    }
  
    i.fa-volume-down{
        margin-left: 5px;
    }
    
    .fa-volume-down,
    .fa-volume-up {
        padding: 10px;
        color: whitesmoke;
        text-shadow: 1px 1px 1px black;
    }
    
    .fa-list,
    .fa-random,
    .fa-play-circle,
    .fa-pause-circle,
    .fa-step-forward,
    .fa-step-backward,
    .fa-forward,
    .fa-backward {
        cursor: pointer;
    }
    
    table {
        margin-top: 10px;
        margin-left: 8px;
        z-index: 10;
        /*
        #DDD - Light gray
        #EEE - Very light gray
        #F5F5F5 - Whitish gray
        #F8F8F8 - Off-white
                    whitesmoke;
        */
        color: #F5F5F5;
        text-shadow: 1px 1px 1px black;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        border-collapse: collapse;
        width: 491px;
   
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    }
      
    table td,
        table th {
        border-left: none;  /* Remove left border of cells */
        border-right: none; /* Remove right border of cells */
        
        /*border: 1px solid #ddd;*/
        border-bottom: 1px solid #5A5A5A;
        /*
        #000000;
        */
        padding: 3px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        transition: box-shadow 0.3s ease;
        user-select: none;
    }
     
    #playlist_table tr {
        cursor: pointer;
    }
      
    table tr:hover {
        background-color: #ddd;
    }
    
    tr.active td {
        font-weight: bold;
    }
      
    #table th {
        padding-top: 6px;
        padding-bottom: 6px;
        text-align: left;
        
        background-color: transparent;
        color: white;
    }
      
    thead {
        visibility: collapse;
        /*
        visibility: hidden;
        background-color: transparent;
        border-width: 0;
        color: transparent;
        pointer-events: none;  Disable pointer events */
        /*user-select: none;  Disable text highlighting */
    }
      
    td:not(:first-child) {
        border-left: none;
    }
      
    td:not(:last-child) {
        border-right: none;
    }
      
    /* 
    table th:last-child,
      table td:last-child {
        border-right: 1px solid #ddd;
    }
    */
      
    .track_no{
        width: 5%;
    }
    .track_name{
        width: 48%;
    }
    .track_artist{
        width: 44%;
    }
    .track_duration{
        width: 3%;
    }
    
    .highlighted {   
        background-color: #ddd;
        opacity: 0.8;
        font-weight: bold;
    }
    
    .highlighted td:nth-child(4) {
        position: relative;
    }
  
    .highlighted td:nth-child(4)::after {
        content: "\f028";
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
        font-family: "Font Awesome 5 Free"; 
        font-weight: 900; 
    }
      
    #copyright {
        position: absolute; 
        bottom: 10px; 
        text-align: left; 
        color: whitesmoke; 
        margin-bottom: 5px; 
        margin-left: 8px; 
        height: 10px;
        text-shadow: 1px 1px 1px black;
    }
      
     
   /*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
   

    
    @media  (max-width: 767px) {
        /* 
        tr.touch-hover {background-color: transparent;}
       
        .hovered is dummy object supporting js code
        
        tr:hover {
            background-color: transparent !important;
        } 
        
        tr.hovered {
            background-color: transparent;
        }
        */
        
        .dropbtn, .dropbtn2 {
            display: none;
        }
        
        #dropdown, #dropdown2{
            display:none;
        }
        
        .dropbtn, .dropbtn2 {
            display:none;
        }
        
        .dropdown-content, .dropdown-content2{
            display: none;
        }
        
        .track-art {
            position: relative;
            float: left;                
            /*background: #333 url("../img/images/album-cover-bg.jpg") no-repeat 0 0 scroll; */
            -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .75);
            -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .75);
            box-shadow: 0 1px 4px rgba(0, 0, 0, .75);
            margin-left:8px;
            margin-right:16px;
            height: 160px;
            width: 160px;
            background-size: cover;
            border-radius: 1%;
        }
        
        .info-container {
            position: relative;
            height: 116px;
            width: 76%;
            margin-top: 10px;
            /*margin-bottom: 10px;*/
            margin-right: 10px;
            
        }
        
        .buttons{
            margin-top: 14px;    
        }
        /*
        #music-library-table {
            width: 96%;
            border-collapse: collapse;
        }
        */
        .volume_slider {
            display:none;
        }
        
        
        i.fa-volume-down{
            display:none;
        }
    
        .fa-volume-down,
        .fa-volume-up {
            display:none;
        }
        
        .slider_container {
            width: 42%;
            max-width: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            margin-top:0;
        }
        
        #background {
            display: none; 
        }
         
        #canvas {
            display: none;  
        }
        
        #copyright {
            position: fixed;
            bottom: 0;
            left: 0;
            margin: 0;
            padding: 2em;
            z-index:10;
            /* DO NOT!!!  display: block;*/
        }
        
        #player:after {
            content: "";
            display: block;
            padding-bottom: 56.25%; /* 16:9 aspect ratio (adjust as needed) */
        }
        
    }  
    
    
    /*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
    
    @media screen and (max-width: 767px) and (orientation: landscape) {
        html {
            overflow-x: hidden;
            position: absolute;
            top: 100%;
            left: 0;
        }
    
        body {
            /*transform: rotate(-90deg);*/
            transform-origin: left top;
            width: 100vh;
            position: absolute;
            top: 0;
            left: 0;
        }

        #copyright {
            visibility: hidden;  
        }
    }








    /*and (min-width: 320px)*/
    /*
    @media screen and (max-width: 767px) and (orientation: landscape) { 
        
        html { 
            transform: rotate(-90deg); 
            transform-origin: left top;
            width: 100vh; 
            overflow-x: hidden; 
            position: absolute; 
            top: 100%; 
            left: 0; 
        }
        
        #copyright {
            position: fixed;
            bottom: 0;
            right: 0;
            margin: 0;
            padding: 2em;
            z-index: 10;
        }
    }
    */