:root{
--color-bg:#000;
--color-bge:#222;
}
@media (prefers-color-scheme: dark){
body{
--color-bg:#000;
--color-bge:#222;
}
} 
/* DARK MODE */
body.dark{
--color-bg:#000;
--color-bge:#222;
}
/* LIGHT MODE */
body.light{
--color-bg:#333;
--color-bge:#333;
}
body.light .theme{
border:1px solid #333;
background-color:rgba(0,0,0,.3);
}
body.light .theme:active .themeimg{ 
background-size:30px 30px;
}
body.light .themeimg{
background:url("../img/sun.png") no-repeat;
background-position:center;
background-size:28px 28px;
}
body.light .theme:active .themeimg{ 
background:url("../img/moon.png") no-repeat;
background-position:center;
background-size:30px 30px;
}
body.light .alphabet{
background-color:green;
}
body{
margin:0 !important;
background-color:#000;
font-size:16px;
font-weight:bold;
color:#ccc;
letter-spacing:1px;
text-shadow:1px 1px #000, 2px 2px #000;
transition:all .3s ease-in-out;	
}
body a{	
text-decoration:none;
color:#ccc;
}
#dbackground{
display:none;
}
#background{
display:none;
}
.bgimage{
height:auto;
width:100%;
position:fixed;
z-index:-10000;
left:0px;
min-height:938px;
min-width:1250px;
-webkit-filter:brightness(100%); 
filter:brightness(100%);
}
.container{
display:flex;
align-items:flex-start;
justify-content:center;
flex-wrap:wrap;
margin-left:auto;
margin-right:auto;
min-width:420px;
max-width:1250px;
padding-bottom:100px;
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ MENU BOX ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 
.box{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
width:95.5%;
border:2px solid #333;
background-color:var(--color-bg);
box-shadow:0 0px 20px 0px #000 inset;
border-radius:5px;
}
.stickybox{
width:95,5%;
max-width:1200px;
position:fixed;
margin-left:auto;
margin-right:auto;
top:0;
z-index:100;
}		
.menubox{
display:flex;
align-items:center;
justify-content:space-around;
width:100%;
}
.menubox a{
border-radius:10px;
}
.menu{
display:flex;
align-items:center;
justify-content:center;
width:80px;
height:50px;
}
.menus{
display:none;
}
.menushadow:active{
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
box-shadow:0 0px 10px 0px #fff;
}
.menushadow div{
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
border-radius:10px;
box-shadow:0 5px 10px 0px #000;
}
.menushadow div:active{
box-shadow:0 0px 10px 0px #fff;
}
.menushadow div div{
width:60px;
height:30px;
font-size:18px;
padding-left:1px;
border:2px solid #ccc;
background-color:var(--color-bge);
box-shadow:0 0px 30px 0px #000 inset;
border-radius:10px;
}
.menushadow div div:active{	
background-color:#222;
color:orange;
}
.menushadow div div:active{	
width:70px;
height:40px;
font-size:20px;
border:3px solid #eee;
background-color:green;
box-shadow:0 0px 20px 0px #000 inset;
color:#fff;
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ TOP BOX ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 
.topbox{
display:flex;
width:95.5%;
height:30px;
min-width:400px;
max-width:1200px;
}
.top{
display:flex;
align-items:center;
justify-content:flex-start;
width:50%;
}
.top2{
justify-content:flex-end;
}
.onlinebox{	
display:flex;
align-items:center;
justify-content:center;
cursor:default;	
height:20px;
margin-left:10px;
border:1px solid #333;
border-radius:5px;
transition:all .3s ease-in-out;	
background:rgba(0,0,0,.5);
}
.online{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
padding:0px 10px 0px 35px;	
font-size:12px;
background:url("../img/listenerg.png") 8px no-repeat;
background-size:15px 15px;
}
.onlinebox span{	
margin-left:3px;	
}
.onlinebox:hover{
color:fff;	
}
.topdata{
display:flex;
align-items:center;
justify-content:center;
width:50px;
height:100%;
margin-right:20px;
}
.topdata img{
width:30px;
}
.topdata img:hover{
width:32px;
-webkit-filter:brightness(130%); 
filter:brightness(130%);
}
.theme{
cursor:pointer;		
height:28px;
width:28px;
border:1px solid transparent;
background-color:transparent;
border-radius:10px;
}
.themeimg{
height:100%;
width:100%;
background:url("../img/moon.png") no-repeat;
background-position:center;
background-size:28px 28px;
}
.theme:active .themeimg{ 
background:url("../img/sun.png") no-repeat;
background-position:center;
background-size:30px 30px;
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ D TOOLTIP ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */
.dtp:hover{
position:relative;
display:inline-block;
}
.dtpbox{
visibility:hidden;
display:none;
align-items:center;
justify-content:center;
z-index:100;
width:10px;
position:absolute;
top:45px;
width:180px;
left:50%;
margin-left:-90px;
}
.dtp:hover .dtpbox{
visibility:visible;
}
.dtpboxs{
box-shadow:0 0px 10px 0px #000;
border-radius:5px;
}
.ldtpbox{
width:200px;
margin-left:-150px;
}	
.dtpt{
display:flex;
align-items:center;
justify-content:center;	
letter-spacing:2px;	
color:#fff;	
font-size:16px;
text-align:center;
padding:4px 8px 4px 10px;
border-radius:5px;
border:1px solid #999;
background-color:#000;
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ LOGO ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 	
.logo{
display:flex;
align-items:center;
justify-content:space-around;
width:95.5%;
min-width:400px;
max-width:1200px;
border:2px solid #333;
margin-bottom:10px;
background-color:var(--color-bg);
box-shadow:0 0px 10px 0px #000 inset;
border-radius:10px;
}
.logotitle{
display:flex;
align-items:center;
justify-content:center;	
min-width:200px;
height:40px;
}
.title{
display:flex;
align-items:center;
justify-content:center;	
max-width:196px;
max-height:36px;
border-radius:5px;
box-shadow:0 5px 10px 0px #000;
transition:all .3s ease-in-out;	
}
.title:active{
box-shadow:0 0px 10px 0px #fff;
}
.title div{
text-align:center;	
font-size:18px;
padding:3px 5px 3px 7px;
letter-spacing:2px;
border-radius:5px;
border:2px solid #ccc;
background-color:var(--color-bg);
box-shadow:0 0px 30px 0px #000 inset;
}
.title div:hover{	
background-color:#222;
color:orange;
}
.title div:active{	
background-color:green;
box-shadow:0 0px 20px 0px #000 inset;
color:#fff;
}
.logoimg{
display:flex;
align-items:center;
justify-content:center;		
min-width:50px;	
height:40px;
background:url("../img/set.png") no-repeat center;
background-size:30px 30px;
}
.logohome{
display:flex;
align-items:center;
justify-content:center;		
min-width:50px;	
height:40px;
}
.logohome img{
width:40px;	
border:2px solid #ccc;
border-radius:5px;	
box-shadow:0 5px 10px 0px #000;
transition:all .3s ease-in-out;	
}
.logohome img:hover{
border:2px solid #fff;
}	
.logohome img:active{
border:3px solid #fff;
box-shadow:0 0px 10px 0px #fff;
-webkit-filter:brightness(120%); 
filter:brightness(120%);
}		
#set{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
width:100%;	
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ CD BOX ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 	
.alphabet{
display:flex;
align-items:center;	
justify-content:center;
width:90%;
margin-top:10px;
margin-bottom:10px;
font-family:'Ribeye', sans-serif;
font-size:20px;
color:#fff;
background-color:#014203;
padding:0px 10px 0px 15px;
letter-spacing:5px;
text-shadow: 1px 1px #000, 2px 2px #000, 3px 3px #000;
box-shadow:0 0px 30px 0px #000 inset;
border-radius:15px;
border:2px solid #fff;
}
.alphabetbox{
display:flex;
align-items:center;	
justify-content:flex-end;
flex-wrap:wrap;
width:100%;
margin-right:10px;
}
.hidden{
position:relative;
width:220px;
height:220px;
box-sizing:border-box;
display:lime-block;
}	
.y{
width:220px;
height:110px;
}	
.hiddenimg{
position:relative;
overflow:hidden;
width:100%;
height:100%;
display:flex;
align-items:center;	
justify-content:center;
border-radius:10px;
}	
.hiddenimg img{
max-width:100%;	
transition:transform 2s;
}		
.yy img{
max-width:50%;	
transition:transform 2s;
}		
.fullcdbox:hover  .hiddenimg img{
transform:scale(1.2);
}	
.hiddendatabox{
position:absolute;
top:0px;
left:0px;	
bottom:0px;
right:0px;
transition:transform .6s;
border-radius:10px;
}
.fullcdbox:hover .hiddendatabox{
transform:scaleY(1);
}	
.hiddendata{	
display:flex;	
align-items: center;
justify-content:center;
width:100%;
height:100%;
border-radius:10px;	
} 	
.data{	
margin-left:-400px;
display:flex;
align-items:center;	
justify-content:center;
flex-wrap:wrap;	
width:160px;
height:160px;	
background:rgba(0,0,0,.6);
border-radius:10px;
} 	
.x{
width:80px;
height:80px;
}
.xx{
width:160px;
height:80px;
}
.fullcdbox{
display:flex;
align-items:center;	
justify-content:center;
flex-direction:column;
width:230px;
padding-bottom:5px;
background:var(--color-bge);
border-radius:15px;
margin:4px;
}
.cdname{
display:flex;
align-items:center;	
justify-content:center;	
padding:5px 10px 5px 10px;
text-align:center; 
line-height:20px;
color:#fff;
font-size:18px;
cursor:pointer;	
transition:all .3s ease-in-out;	
}
.fullcdbox:hover .cdname{
color:orange;
}
.fullcdbox .cdname:hover{
color:#33CC00;
}
.check{
display:flex;
align-items:center;
justify-content:center;	
width:80px;
height:80px;
}
.check a{
border-radius:10px;
}
.cdx{
width:160px;
}
.check div{
display:flex;
align-items:center;
justify-content:center;		
width:54px;
height:54px;
border-radius:10px;
box-shadow:0 5px 10px 0px #000;
}
.check div:active{
width:64px;
height:64px;
border-radius:10px;
box-shadow:0 0px 15px 3px red;
transition:all .0s ease-in-out;	
}
.listen div:active{
box-shadow:0 0px 15px 3px #9900cc;
}
.cd div:active{
box-shadow:0 0px 15px 3px orange;
}
.cdx div:active{
box-shadow:0 0px 15px 3px orange;
}
.loupe div:active{
box-shadow:0 0px 15px 3px #fff;
}
.fullcdbox:hover .check div div{ 
border:2px solid red;
}
.fullcdbox:hover .listen div div{
border:2px solid #9900cc;
}
.fullcdbox:hover .cd div div{
border:2px solid orange;
}
.fullcdbox:hover .cdx div div{
border:2px solid orange;
}
.fullcdbox:hover .loupe div div{
border:2px solid #fff;
}
.fullcdbox:hover .check div div img{
-webkit-filter:grayscale(0%);
filter:grayscale(0%);	
}
.check div div{
width:50px;
height:50px;
border:2px solid #999;
background-image:radial-gradient(ellipse at bottom, #444 10%, #000 130%);
box-shadow:0 0px 10px 0px #000 inset;
border-radius:10px;
}
.fullcdbox .check div div:active{
width:60px;
height:60px;
border:3px solid red;
background-image:radial-gradient(ellipse at bottom, #444 10%, #111 130%);
box-shadow:0 0px 20px 0px #000 inset;
}
.fullcdbox .check div div:active{
border:3px solid red;
}
.fullcdbox .listen div div:active{
border:3px solid #9900cc;
}
.fullcdbox .cd div div:active{
border:3px solid orange;
}
.fullcdbox .cdx div div:active{
border:3px solid orange;
}
.fullcdbox .loupe div div:active{
border:3px solid #fff;
}
.check div div img{
-webkit-filter:grayscale(100%);
filter:grayscale(100%);	
width:35px;
}
.fullcdbox .check div:active div img{
width:40px;
-webkit-filter:brightness(130%); 
filter:brightness(130%); 
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ SCROLL ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 	
#flbox{
z-index:-1000;	
height:10px;
width:100%;
margin-top:-200px;
}
#mpbox{
z-index:-1000;	
height:10px;
width:100%;
margin-top:-200px;
}
#qzbox{
z-index:-1000;	
height:10px;
width:100%;
margin-top:-200px;
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ SCROLL UP ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 
.scrollup{	
display:none;	
align-items: center;
justify-content:center;
position:fixed;	
z-index:1000;	
width:80px;
height:80px;	
right:0px;
bottom:0px;
} 
.scrollupbox{	
display:flex;	
align-items: center;
justify-content:center;
width:100%;
height:100%;	
} 
.scrollupbox div{
display:flex;	
align-items: center;
justify-content:center;
border-radius:10px;
box-shadow:0 10px 20px 0px #000;
cursor:pointer;
}
.scrollupbox div:active{
box-shadow:0 0px 20px 5px #fff;
}
.scrollupbox div div{
display:flex;
align-items:center;
justify-content:center;	
cursor:pointer;	
width:45px;
height:45px;
border:2px solid #ccc;
background-image:radial-gradient(ellipse at bottom, #444 10%, #000 130%);
box-shadow:0 0px 10px 0px #000 inset;
border-radius:10px;
}
.scrollupbox div div:active{
width:50px;
height:50px;
border:3px solid #fff;
background-image:radial-gradient(ellipse at bottom, #444 10%, #111 130%);
box-shadow:0 0px 20px 0px #000 inset;
}
.scrollupbox div div img{
width:60%;
}
.scrollupbox div div:active img{
-webkit-filter:brightness(130%); 
filter:brightness(130%);
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ 630PX ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 	
@media screen and (min-width:630px){
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ SCROLL UP ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 	
.scrollup{	
width:76px;
height:76px;	
right:5px;
bottom:5px;
border-radius:15px;
} 
.scrollupbox div{
border-radius:15px;
box-shadow:0 10px 20px 0px #000;
}
.scrollupbox div:active{
box-shadow:0 0px 20px 5px #fff;
}
.scrollupbox div div{
width:60px;
height:60px;
border-radius:15px;
}
.scrollupbox div div:active{
width:70px;
height:70px;
}
.scrollupbox div div img{
width:60%;
}
.scrollupbox div div:active img{
-webkit-filter:brightness(130%); 
filter:brightness(130%);
}
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ 1500PX ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 	
@media screen and (min-width:1500px){
.scrollup{		
width:86px;
height:86px;	
right:15px;
bottom:15px;
} 
.scrollupbox div div{
width:70px;
height:70px;
}
.scrollupbox div div:active{
width:80px;
height:80px;
}
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ 1700PX ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 
@media screen and (min-width:1700px){
.scrollup{		
width:96px;
height:96px;	
right:25px;
bottom:25px;
} 
.scrollupbox div div{
width:80px;
height:80px;
}
.scrollupbox div div:active{
width:90px;
height:90px;
}
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ 630PX ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 	
@media screen and (min-width:630px){
body.light .theme:hover .themeimg{ 
background-size:40px 40px;
}
body.light .themeimg{
background:url("../img/sun.png") no-repeat;
background-position:center;
background-size:36px 36px;
}
body.light .theme:hover .themeimg{ 
background:url("../img/moon.png") no-repeat;
background-position:center;
background-size:40px 40px;
}
.dtpbox{
display:flex;
}	
body{
font-size:20px;
}	
.logotitle{
min-width:400px;
height:50px;
}
.title{
max-width:396px;
max-height:46px;
border-radius:5px;
}
.title:hover{
box-shadow:0 0px 10px 0px #fff;
}
.title div{	
font-size:22px;
padding:5px 7px 5px 9px;
letter-spacing:2px;
transition:all .3s ease-in-out;	
}
.title div:active{	
border:3px solid #fff;
font-size:24px;
}
.topbox{
height:40px;
}
.onlinebox{	
height:30px;
margin-left:20px;
border:2px solid #333;
border-radius:10px;
}
.online{
font-size:18px;	
padding:0px 10px 0px 35px;	
background:url("../img/listenerg.png") 8px no-repeat;
background-size:20px 20px;
}
.topdata img{
width:40px;
}
.topdata img:hover{
width:43px;
}
.theme{
height:36px;
width:36px;
border-radius:10px;
border:2px solid transparent;
}
.themeimg{
background:url("../img/moon.png") no-repeat;
background-position:center;
background-size:36px 36px;
}
.theme:hover .themeimg{ 
background:url("../img/sun.png") no-repeat;
background-position:center;
background-size:40px 40px;
}
.ldtpbox{
width:200px;
margin-left:-100px;
}	
.menu{
width:90px;
height:60px;
}
.menushadow:hover{
border-radius:10px;
box-shadow:0 0px 10px 0px #fff;
}
.menushadow div div{
letter-spacing:2px;
padding-left:2px;
font-size:22px;
width:70px;
height:40px;
}
.menushadow div div:hover{	
color:orange;
}
.menushadow div div:active{	
color:fff;
font-size:24px;
width:80px;
height:50px;
}
.alphabet{
font-size:22px;
color:#fff;
border:3px solid #fff;
padding:5px 10px 5px 15px;
}
.cdname{
line-height:25px;
font-size:22px;
}
.check div:hover{
box-shadow:0 0px 15px 0px red;
}
.listen div:hover{
box-shadow:0 0px 15px 0px #9900cc;
}
.cd div:hover{
box-shadow:0 0px 15px 0px orange;
}
.cdx div:hover{
box-shadow:0 0px 15px 0px orange;
}
.loupe div:hover{
box-shadow:0 0px 15px 0px #fff;
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ SCROLL ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 	
#flbox{
z-index:-1000;	
height:10px;
width:100%;
margin-top:-240px;
}
#mpbox{
z-index:-1000;	
height:10px;
width:100%;
margin-top:-240px;
}
#qzbox{
z-index:-1000;	
height:10px;
width:100%;
margin-top:-240px;
}

}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ 430PX ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 	
@media screen and (min-width:430px){
.alphabetbox{
display:flex;
align-items:center;	
justify-content:center;	
flex-wrap:wrap;
width:100%;
margin-right:0px;
}
.hiddendatabox{
transform:scaleY(0);
}
.data{	
margin-left:-0px;
width:200px;
height:200px;	
} 
.x{
width:100px;
height:100px;
}
.xx{
width:200px;
height:100px;
}
.check{
width:100px;
height:100px;
}
.cdx{
width:200px;
}
.check div{
width:64px;
height:64px;
}
.check div:hover{
width:74px;
height:74px;
}
.check div div{
width:60px;
height:60px;
}
.fullcdbox .check div div:hover{
width:70px;
height:70px;
}
.check div div img{
width:45px;
}
.fullcdbox .check div:hover div img{
width:50px;
}
.fullcdbox .check div:active div img{
-webkit-filter:brightness(130%); 
filter:brightness(130%); 
}
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ 930PX ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 	
@media screen and (min-width:930px){
.logoimg{	
min-width:100px;	
height:50px;
background:url("../img/set.png") no-repeat center;
background-size:40px 40px;
}	
.logohome{
min-width:100px;	
height:50px;
}
.logohome img{
width:55px;	
}	
.logohome img{
width:55px;	
}	
.logohome img:hover{
border:3px solid #fff;
box-shadow:0 0px 10px 0px #fff;
-webkit-filter:brightness(120%); 
filter:brightness(120%);
}	
	
}	

/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ 1200PX IFRAME ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 	
@media screen and (max-width:1200px){
.ldtpbox{
width:200px;
margin-left:-150px;
}	
}

/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ 1180PX IFRAME ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 	
@media screen and (min-width:1180px){
body.light #background{
display:flex;	
height:auto;
width:100%; 
position:fixed; 
z-index:-1000; 
left:0px; 
min-height:938px; 
min-width:1250px;
}
#dbackground{
display:flex;
height:auto;
width:100%; 
position:fixed; 
z-index:-1000; 
left:0px; 
min-height:938px; 
min-width:1250px;
}
#background{
display:none;
}
	
}