@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes sizepulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(0.8); }
} 
  
  #overlay {
    position: fixed;
    inset: 0;        
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(142, 124, 240, 0.329);
    background-image: -webkit-radial-gradient(rgba(0, 0, 255, 0.062),rgba(255, 255, 255, 0.164),rgba(0, 0, 0, 0.137));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: pointer;
    transition: opacity 1s ease;
  }
        
    
  #overlay-prompt {
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: rgb(255, 255, 255);
    letter-spacing: 30px;
    font-size: 200px;
    text-align: center;
    animation: sizepulse 20s infinite
  }
 
  #qmark {
    animation: pulse 2s infinite;
  }
 
   #feathers {
        position: fixed;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
        z-index: 1;
        }
    .fw { position: absolute; top: -120px; animation: ffall var(--dur) linear var(--del) 1; }
    .fi { animation: fswing var(--sdur) linear var(--sdel) infinite; }

    @keyframes ffall {
      from { transform: translateY(0);      opacity: 0; }
      5%   {                                opacity: 1; }
      85%  {                                opacity: 0.8; }
      to   { transform: translateY(115vh);  opacity: 0; }
    }
    @keyframes fswing {
      0%   { transform: translateX(0)         rotate(var(--tp)); animation-timing-function: ease-out; }
      25%  { transform: translateX(var(--ap)) rotate(0deg);      animation-timing-function: ease-in;  }
      50%  { transform: translateX(0)         rotate(var(--tn)); animation-timing-function: ease-out; }
      75%  { transform: translateX(var(--an)) rotate(0deg);      animation-timing-function: ease-in;  }
      100% { transform: translateX(0)         rotate(var(--tp)); }
    }
  
  
  
  * { box-sizing: border-box; margin: 0; padding: 0; }


    a {
      text-decoration: none;
      color: #000000;
  }


  body {
     display: flex;
     overflow-y: visible;
     overflow-x: hidden;
     background-color: #ffffff;
     background-image: -webkit-radial-gradient(rgba(47, 0, 255, 0),rgba(220, 228, 255, 0),rgba(0, 0, 0, 0.068));
    }

.asidecont {
    flex: .33333
    }


  aside {
    margin-top: 200px;
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #1600dda4;
    align-items: flex-end;
    padding: .0rem;
    }

  .sidebar-top {
     padding: 1rem; 
     border-bottom: 1px solid #ddd;
     font-family: Georgia, 'Times New Roman', Times, serif;
     font-size: 30px;
     letter-spacing: 8px;
   }

  nav { 
    flex: 1; 
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.171);
    padding: 1rem 0;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
    }

  nav a { display: block;
    margin-top: 10px;
    margin-left: 15px;
    text-align: center;
     padding: 2rem .5rem;
     background-color: #dddddd59;
      cursor: pointer;
       border-left: 3px solid rgba(17, 26, 148, 0.514);
       border-top: 3px solid rgba(17, 26, 148, 0.514);
       border-bottom: 3px solid rgba(17, 26, 148, 0.514);
         border-top-left-radius: 15px;
         border-bottom-left-radius: 15px;
       }


  nav text {
    border-bottom: solid 10px #000000 ;


  }


  nav a:hover {
     border-color: #ffffffa4;
     font-weight: bold; 
    background-color:  rgba(197, 186, 255, 0.384);
    color: rgb(255, 255, 255);
    outline: solid 3px #5e20f07c;
    background-image: url(../../images/black-and-white-striped-abstract-background-overlay-motion-effect-graphic-illustration-with-transparent-background-png.png);
    background-size: 110%;
    


   }
  nav a.active { 
    border-color: #ffffffa4;
     font-weight: bold; 
    background-color: rgb(197, 186, 255);
    color: rgb(255, 255, 255);
    outline: solid 3px #5e20f07c;
    background-image: url(../../images/black-and-white-striped-abstract-background-overlay-motion-effect-graphic-illustration-with-transparent-background-png.png);
    background-size: 110%;
    
    }

  /* music player slot */
  .player { 
    padding: 1rem;
    border-top: 1px solid #ddd;
    margin-top: 300px;
    margin-bottom: 100px;
    margin-right: -50px;
     }


  main {
        flex: .33333;
         overflow: hidden; 
        background-color: #ffffff96;
        min-width: 700px;
        z-index: 2;
        }


  iframe { 
    width: 100%;
    height: 100%; 
    border: none; 
    display: block; 
    padding: 30px;

    }


    /* Music Player Starts here*/

        #musicplayer{ 
          z-index: 10;
          height:25px;
          width:80%;
          left:0;
          bottom:0;
          margin-bottom:80px;  
          display:flex;
          flex-direction: column;
          background-color: rgba(219, 95, 95, 0);
          align-items: center;
         
            .songtitle{ 
            display:block;
            padding:2px; /* padding around song title */
            margin-top:3px;
            margin-right: 1px; 
            font-size:15px;
            color:rgb(102, 102, 102);
            letter-spacing: 3px; 
            border-radius: 8px;
            background-image: url(../../images/black-and-white-striped-abstract-background-overlay-motion-effect-graphic-illustration-with-transparent-background-png.png);
              background-size: 120%;
            background-color: rgba(108, 142, 255, 0.178);/* background of song title */
            border: rgb(224, 224, 224) solid 2px;
            border-color: #5e20f07c;
            }
         
            .controls{
              font-size:12px; /* size of controls */
              text-align:center;
              width:100px;
              height:20px;
              text-decortation:none;
            }
         
            .controls td{
               padding-top:5px; /* padding around controls */
            }
         
            .seeking{
              width:100%;
              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; 
             
               
            }
         
            .total-duration{
              padding-left:5px;
      
            }
         
           .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: rgb(0, 0, 0); /* 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 */
                -webkit-appearance: none;
                margin-top: -10px;
                
            }
       
            
         input[type=range].volume_slider::-webkit-slider-thumb {
            background-size: 20px;
            height: 20px; /* height of volume seeking square */
            width: 20px; 
            margin-top: -8px;
           }
         
         
        .slider_container {  
          width: 80%;       /* width of volume seeker */
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #dbdbdb;
          border-radius: 100px;
          height: 3px;
        }    
      }