@font-face{
    font-family:"vcr-osd-mono";
    src:url(fonts/VCR-OSD-Mono.ttf)
}


*{
    box-sizing: border-box;
    font-family:"vcr-osd-mono";
    cursor:url('cursor/cursor1.png'),default;
    animation-name:cursor ;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    }
@keyframes cursor {

    100%{

        cursor:url('cursor/cursor2.png'),auto;
    }
    
}

    



body{
    margin:0;
    padding:0;
    min-width:500px; 
    max-width:100%; 
    min-width: 200px;
    position: fixed;
    
    background-color: black;
}

.icons{
    background-color: rgb(0, 0, 0);
    width:20vw;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    
  
    
}

.background{
    background-color: rgb(15, 15, 15);
    width:51vw;
    height:100%;
    position:fixed;
    top:0;
    left:20vw;
    background:  url("Images/bgi.jpeg");
    background-size: 50vw 100% ;
   background-repeat: no-repeat;
   /* cursor:url('cursor/cig-1.png'),auto; */
  
}

.music{

    background-color: rgb(0, 0, 0);
    width:29vw;
    position:fixed;
    background-attachment: fixed;
    top:0;
    right:0;
    height:100vh;
    margin-bottom: 30%;
    border-bottom: solid black thick;
    overflow-y: auto;
    min-height: 100%;
    padding-left:2%;

}

.icons div{
    width:auto;
    height:auto;
   
    
}

a{text-decoration: none;}

.icons p{
    font-size: 0.8vw;
    color:white;
    text-align:center;

}


.icon1,.icon3,.icon5,.icon7{

    position:absolute;
}
.icon2,.icon4,.icon6{

    position:absolute;
   
   
    
}
.icon1{
    top:2.6vw;
    left: 2vw;

}

.icon1 img{
    width:6vw;
    height:3.4vw;

}



.icon2{
    top:2vw;
    left:8.5vw;
   
}

.icon2 img{
    width:7vw;
    height:4vw;

}
.icon3{
    top:9vw;
    left:1vw;
}

.icon3 img{
    width:8vw;
    height:4vw;

}
.icon4{
    top:9.3vw;
    left:9.9vw;
    
}

.icon4 img{
    width:4vw;
    height:4vw;

}
.icon5{
    top:16vw;
    left:2vw;
    
    
}

.icon5 img{
    width:4vw;
    height:4vw;

}

.icon6{
    top:15.6vw;
    left:8vw;
    
 
}

.icon6 img{
    width:8vw;
    height:4.5vw;
}

.icon7{
    top:23vw;
    left:2vw;
}

.icon7 img {
    width:4vw;
    height:5vw;
    

}


.outer{
    width:24.5vw;
    margin-top: 15%;
    position: relative;
    right:8%;
    background-color: rgba(0, 0, 0, 0.748);
    border-radius: 4vw;
    border: solid  rgb(192, 185, 185) 4px;
    box-shadow: 1px 1px 6px  rgb(192, 185, 185);
    height:auto;
    

}

.inner{
 width:96%;
 margin-top: 2%;
 margin-left: 2%;
 margin-bottom: 2%;
 height:auto;
 border-radius: 3vw;
 border: solid rgb(192, 185, 185) 2px;
}






.cover{
    width:20vw;
    height:auto;
    border-radius: 3vw;
    border: solid  rgb(192, 185, 185) 2px;
    box-shadow: 1px 1px 8px  rgb(192, 185, 185);
    margin-top: 5%;
    margin-left: 5%;

}

.albumname{
    width:20vw;
    height:auto;
    border-radius: 4vw;
    border: solid  rgb(192, 185, 185) 2px;
    box-shadow: 1px 1px 8px  rgb(192, 185, 185);
    color: rgb(192, 185, 185);
    font-size: 0.9vw;
    text-align: center;
    padding: 0.8vw;
    margin-top: 5%;
    margin-left: 5%;
}


.control{
    width:20vw;
    height:3vw;
    border-radius: 4vw;
    border: solid  rgb(192, 185, 185) 2px;
    box-shadow: 1px 1px 8px  rgb(192, 185, 185);
    background-color: rgb(192, 185, 185);
    font-size: 1.35vw;
    margin-top: 5%;
    margin-left: 5%;
   
}


.list{
    width:20vw;
    height:auto;
    border-radius: 2vw;
    margin-top: 5%;
    margin-left:5%;
    margin-bottom: 5%;
    border: solid  rgb(192, 185, 185) 2px;
    box-shadow: 1px 1px 8px  rgb(192, 185, 185);
    font-size: 1.1vw;
    padding-left: 1.2vw;
    background-image: linear-gradient(rgb(6, 95, 111), rgb(164, 69, 164) , rgb(129, 38, 65),rgb(229, 147, 147)
    )   
}

.list a {
    text-decoration: none;
    color:  rgb(192, 185, 185) ;
   
}


.yt{
  
    width:25vw;
    height:15vw;
    border: solid red 3px;
     margin-top: 5vw;
     margin-bottom: 10vw;
     position: relative;
     right:8%
    
 }

 .footer{
    width:100%;
    height: 40px;
    position: fixed;
    bottom:0;
    left:0;
    background-color:rgb(192, 185, 185)  ;
 }


.start{
    position: absolute;
    left:10px;
    bottom:1px;
    border: solid black 2px;
    width:130px;
    height:34px;
    padding-top: 4px;
    padding-right: 4px;
    border-top:2px rgb(241, 241, 241) solid;
    border-left:2px rgb(232, 219, 219) solid;
    
    font-size: 23px;
    color: #000;
}

.start a{
    color: black;
}

.btimg1{
    width:30px;

}

.btimg2{
    width:25px;
    height: 29px;
    position: absolute;
    left:150px;
    bottom:5px;

}

.btimg3{
    width:25px;
    height: 29px;
    position: absolute;
    left:186px;
    bottom:4px;

}





.time{

    position: fixed;
    right:2vw;
    bottom:1px;
    border: solid black 2px;
    width:135px;
    height:34px;
    padding-top: 4px;
    border-top:2px rgb(241, 241, 241) solid;
    border-left:2px rgb(232, 219, 219) solid;
    text-align: center;
    font-size: 18px;

   

}


/* BLOG PAGE */


.images{

   
    width:30vw;
    height:100%;
    position:fixed;
    top:0;
    right:0;
    overflow-y: auto;
    height:100vh;
    margin-bottom: 30%;
   
 
}

.r1{
    width:20vw;
    height:383.3vw;
    position:relative;
    right:-5vw;
    top:2vw;
    z-index:1;
    background-image:url('Images/reel6.png');
    background-size: 100% 4% ;
    border: solid rgb(80, 64, 64) 3px;
    border-top: solid rgb(15, 14, 14) 20px;
    border-radius: 2vw;
   background-repeat: repeat-y;
   box-shadow: 2px 2px 10px rgb(87, 86, 85);
   animation: moveSlideshow 20s infinite linear alternate;
   

    

}
.r1 img{
    width:14vw;
    height:16vw;
    margin-left:2.8vw;
    margin-top: -2px;
    border: solid rgb(15, 14, 14) 7px;
    border-top: solid rgb(176, 175, 175) 2px;
    border-left: solid rgb(157, 153, 153) 2px;
   
   
}

@keyframes moveSlideshow {
    100% { 
      transform: translateY(-280vw);  
    }
  }







/* album PAGE */
.merchicons{

    background-color:rgb(0, 0, 0);
    
}

.merchimages{
    background-color:rgb(0, 0, 0);
    width:80vw;
    height:100%;
    position:fixed;
    top:0;
    left:20vw;
    background-size: 80vw 100% ;
    background-repeat: no-repeat;
    overflow-y: auto;
    border-bottom-right-radius:40vw;
    border-bottom: solid rgb(245, 244, 244) 2px;
    
}

  .media{
    width:75vw;
    height:100vh;
    background-color:rgb(35, 33, 33);
    position: absolute;
    right:0;
    top:0;
    overflow-y: auto;
    border-top: solid rgb(245, 244, 244) 2px;

    border-bottom:0 ;
    border-top-left-radius:46vw;
    border-left: solid rgb(245, 244, 244) 1px ;

   }

   .media::-webkit-scrollbar { 
    display: none; 
}


  video{
    width:25vw;
    height:15vw;
    margin-top: 3vw; 
    border-top: 4px solid rgb(151, 148, 148);
    border-left: 4px solid rgb(121, 118, 118);
    border-bottom: 4px solid rgb(2, 2, 2);
    border-right: 4px solid rgb(0, 0, 0);
    border-radius: 2vw;
    margin-bottom: 3vw;
    
    
  }

  .vid1{
    position: absolute;
    right:5vw;
    top:2vw;
  }

  .vid2{
    position: absolute;
    left:14vw;
    top:12vw;
  }

  .vid3{
    position: absolute;
  
    right:5vw;
    top:29vw;

  }

  .vid4{
    position: absolute;
    left:14vw;
    top:49vw;
  }

  .vid5{
    position: absolute;
    left:14vw;
    top:30vw;
  }

  .vid6{
    position: absolute;
  
    right:5vw;
    top:45vw;

  }

.pic7{
    position: absolute;
    right:5vw;
    top:65vw;
    width:25vw;
    height:15vw;
    margin-top: 3vw; 
    border-top: 4px solid rgb(151, 148, 148);
    border-left: 4px solid rgb(121, 118, 118);
    border-bottom: 4px solid rgb(2, 2, 2);
    border-right: 4px solid rgb(0, 0, 0);
    border-radius: 2vw;
    margin-bottom: 3vw;
}

.vid7{
    position: absolute;
  
    left:14vw;
    top:67vw

  }

  .morevideos{
    width:3vw;
    height:3vw;
    position: absolute;
    left:15vw;
    top:99vw;

  }



  /* MESSAGE PAGE */

.message{
    
    width:80vw;
    height:100vh;
    position:fixed;
    top:0;
    left:20vw;
    background-size: 80vw 100% ;
    overflow-y: auto;
    background-image: linear-gradient(to bottom, rgb(55, 53, 53) , rgb(80, 80, 70),rgb(114, 109, 109) , black)
} 

.msgicon{
    height:100%;
    background-color: black;
    background-image: linear-gradient(to bottom, rgb(55, 53, 53) , rgb(80, 80, 70),rgb(114, 109, 109) , black);
}


 .msg1{
   
   border: 5px solid silver;
   border-left: 7px solid rgb(121, 113, 113);
   border-right: 7px solid rgb(121, 113, 113);
    position: absolute;
    top:20%;
    left: 20vw;
    width:34.95vw;
    height:auto;
    color: white;
    padding-left: 0.4vw;
    padding-right: 0.8vw;
    padding-bottom: 0.4vw;
    background-image: linear-gradient(to right, rgb(0, 0, 0),rgb(154, 148, 148) , rgb(242, 238, 238));
    overflow: hidden;
    
  
  

 }
 .bioimg{
    border-radius: 50vw;
    height:15vw;
    width:15vw;
    margin-top: 0.1vw;
    margin-bottom: 0.4vw;
    margin-left: 8vw;
    border: solid rgb(219, 215, 215) 4px;

 }

 .msg2{
     background-color: silver;
     border: solid rgb(219, 215, 215) 1px;
    padding: 10px;
    width:33vw;
    margin-right: 3vw;
    height:auto;
    color: black;
    font-size: 1vw;
    overflow-y: auto;
    padding: 1vw;

}

.msg2::-webkit-scrollbar { 
    display: none; 
}

*::-webkit-scrollbar { 
    display: none; 
}

.bio1{
   
    border: 5px solid silver;
    border-left: 7px solid rgb(121, 113, 113);
    border-right: 7px solid rgb(121, 113, 113);
    margin-left: 15vw;
   
    position: absolute;
    top:18%;
     width:42.7vw;
     height:19vw;
     color: white;
     background-image: linear-gradient(to right, rgb(33, 32, 32),rgb(154, 148, 148) , rgb(191, 185, 185));
 }
  .bioimg{
     border-radius: 50vw;
     height:17vw;
     width:17vw;
     border: solid rgb(219, 215, 215) 4px;
     float:left;
     margin:0;
     margin-top: 0.8vw;
     margin-left: 0.8vw;
  }
 
  .bio2{
      background-color: silver;
      border: solid rgb(219, 215, 215) 1px;
     
     width:22vw;
     height:auto;
     color: black;
     font-size: 1vw;
     overflow-y: auto;
     padding: 1vw;
     float:left;
     margin-top: 0.8vw;
     margin-left: 0.3vw;
 
 }
 .bio2::-webkit-scrollbar { 
    display: none; 
}

.merch{
    
    width:80vw;
    height:100vh;
    position:fixed;
    top:0;
    left:20vw;
    background-size: 80vw 100% ;
    overflow-y: auto;
   
} 

.merch h1{
    color: red;
    text-align: center;
    font-size: 9vw;
    margin-top: 20%;
}

@media screen  and (width<=600px){


    .outer{
         margin-top: 60%;
        right:8%;
        height:auto;
        
    }




    .icons div{

    
        width:15vw;
        height:14vw;
        
    

        
        
    }
    
    .icons img{
        width:13vw;
        height:8vw;
       
    }
    

    .icons p{
        font-size: 2.4vw;
        color:white;
        text-align: center;

    
    }

    .icon1{
        left: 3vw;
        top:3%;
    
    }
    
    .icon2{
        left: 3vw;
        top:14%;
    }
    
    .icon3{
        left: 3vw;
        top:26%;
    }
    .icon4{
        left: 2vw;
        top:38%;
    }
    .icon5{
        left: 2vw;
        top:52%;
    }
    .icon6{
      
        left: 1.2vw;
        top:61%;

    }

    .icon6 img {
        width:16vw;
        height:13vw;
        
    }
   
    .icon7{
      
        left: 4vw;
        top:76%;
    }

    .icon7 img {
        width:10vw;
        height:10vw;
        
    }
    

    .bio1{
   
       
        position: absolute;
        top:18%;
         width:57vw;
         height:29vw;
        
        }
      .bioimg{
         border-radius: 50vw;
         height:26vw;
         width:26vw;
         border: solid rgb(219, 215, 215) 1vw;
         float:left;
         margin:0;
         margin-top: 0.8vw;
      }
     
      .bio2{
         height:25.5vw;
         width:25.7vw;
         font-size: 1.6vw;
         padding: 1.1vw;
         float:left;
         margin-top: 0.8vw;
         margin-left: 0.3vw;
        
        
     
     }


     .merch h1{
        color: red;
        text-align: center;
        font-size: 9vw;
        margin-top: 50%;
    }



    
}