@charset "utf-8";

@media screen and (pointer: fine) {
	a:hover{text-decoration: none !important;}
	.text a:hover{color: var(--c-primary-alt);}
	#cookie_alert .button:hover{color: var(--c-primary-dark) !important;background: var(--c-primary-light) !important;}
	.checkbox + label:hover, .radio + label:hover{color: var(--c-primary-dark);background: var(--c-primary-light);}
	.checkbox:not(:checked) + label:hover:after, .radio:not(:checked) + label:hover:after{background: var(--c-primary);transform: scale(1.25);}
	.checkbox:checked + label:hover:after, .radio:checked + label:hover:after{transform: scale(0.85);}
	
	input[type=file]+label:hover{background: var(--c-grey-light-alt);}
	
	.-alt:hover{color: var(--c-primary-dark) !important;background: var(--c-primary-light) !important;}
	.-red:hover{background: var(--c-red-alt) !important;}
	.-grey:hover, .-facebook:hover, .-twitter:hover, .-discord:hover, .-light:hover{color: var(--c-primary-dark) !important;background: var(--c-primary-light) !important;}

	a.bar:hover{color: var(--c-primary-dark) !important;background: var(--c-primary-light) !important;}
	#projects a.bar:hover{color: var(--c-primary-dark) !important;}
	#projects a.bar.-name:hover{color: var(--c-primary-dark) !important;background: var(--c-white) !important;}

	.menu_b:hover .title{transform:scale(1);opacity: 1;visibility: visible;}	
	.menu_b:hover:after{width: calc(100% - 2.5rem);margin: 0 1.25rem;background: #777777;}
	.menu_b.-active:hover:after{width: calc(100% - 3rem);margin: 0 1.5rem;background: var(--c-primary);}
	#goodies_check ~ #goodies_b:hover:after, #wall_check ~ #wall_b:hover:after, #login_check ~ #login_b:hover:after{width: calc(100% - 2.5rem);margin: 0 1.25rem;background: var(--c-grey);}
	#goodies_check:checked ~ #goodies_b:hover:after, #wall_check:checked ~ #wall_b:hover:after, #login_check:checked ~ #login_b:hover:after{width: calc(100% - 3rem);margin: 0 1.5rem;background: var(--c-primary);}
	.-vocaloid:hover .img{border-radius: 50%;animation: rotate 5s infinite cubic-bezier(0, 0, 1, 1);}
	@keyframes rotate{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}
	.toggler + label:hover{color: var(--c-primary-dark);background: var(--c-primary-light);}

	#forgotten_password .title:hover, #reg_info .title:hover{text-decoration: none;}
	header:hover{height: var(--headerHhover);}
	.h2:hover{color: var(--c-primary-dark) !important;background: var(--c-primary-light) !important;}

}

@media screen and (max-width: 991px){
	.-title, .-join{font-size: 125%;}
	.-join:before{width: 4rem !important;}
}

@media screen and (min-width: 992px){
	:root {
		--content: 692px;
		--headerH: 162px;
		--headerHhover: 194px;
		--panel: 350px !important;
	}
	body::-webkit-scrollbar{width: 0.25rem;height: auto;}
	body::-webkit-scrollbar-thumb{background: var(--c-grey);border-radius: 0.25rem;}
	body::-webkit-scrollbar-track{background: transparent;}
}

@media screen and (min-width: 992px) and (max-width: 1199px){
}
@media screen and (min-width: 1200px) and (max-width: 1399px){
}
@media screen and (min-width: 1400px) and (max-width: 2559px){
}
@media screen and (min-width: 1550px){
	:root {
		--panel: 350px !important;
		--panel-pos:
		calc(50% - (var(--content) / 2) - var(--panel) - var(--panel-m));
	}
}
@media screen and (min-width: 1920px) {
	:root {
		--content: 744px !important;
		--headerH: 175px !important;
		--headerHhover: 210px !important;
		--panel: 376px !important;
	}
}
@media screen and (min-width: 1550px) and (max-width: 1649px){
	:root {
		--panel-m: 2rem;
		--panel-pos: calc(50% - (var(--content) / 2) - var(--panel) - var(--panel-m));
	}
}
@media screen and (min-width: 1550px) and (max-width: 2559px){
	:root {
		--panel-m: 4rem;
	}
}
@media screen and (min-width: 2560px){
	:root {
		--content: 744px !important;
		--headerH: 175px !important;
		--headerHhover: 210px !important;
		--panel: 374px !important;--panel-m: 8rem !important;
	}
}

/* TABLET */
@media screen and (min-width: 768px) and (max-width: 991px){
	:root {
		--content:
		calc(768px - 2rem);
		--headerH: 173px;
		--headerHhover: 208px;
	}
	body{/* font-size: 1.8vw; *//* line-height: 2.2vw; */}
	main{margin-bottom: 7.5rem;}
	#goodies_check:checked ~ #goodies_panel{left: 2vw;}
	#wall_check:checked ~ #wall_panel{left: 73vw;}
	#team_img{width: 40%;margin: 0 -15% 0 0;}
	#the_rules_img{width: 30%;}
	#vocaloid_img{width: 50%;margin: -4rem -3rem 0 0;}
	iframe{width: calc(89vw - 4rem);height: calc(50.0625vw - 2.25rem);}
	.-p{width: 88px;height: 112px;}
	.-p:after{/* width: 9vw; *//* height: calc(9vw - 2rem); */}
}
/* MOBILE */
@media screen and (max-width: 767px){
:root {
	--content: 100vw;
	--headerH: 29vw;
	--headerHhover: 29vw;
	}

@keyframes error{0%{height: 0;opacity: 0;margin: 0;}100%{height: max-content;opacity: 1;margin: 1rem 0 0 0;}}

#cookie_alert > div{margin-bottom: 1rem;}
	
#bg{background-image: url('../images/site/bg_m.webp');filter: blur(0.15rem);background-image: none !important;}

body{background: var(--c-white);}

body, textarea, input, select, input[type="submit"], input[type="button"], button, .pm_button{font-size: 3.6vw;}

h1, h2, .h2{font-size: 130%;}

.name_result{top: -0.5rem;}
.reg_error{padding: 0.5rem 1rem;}
	
.flex.-small.-links .button{width: 100%;}
	
header{margin: 0;border-radius: 0;}

#logo{width: 60%;margin: 0.5rem 20%;}
#banner{display: none;}

main{padding: 0 1rem;}

.-p, .-p.-big.-not.-pro{width: calc((var(--content) - 4rem) / 3 - 0.5rem) !important;height: calc((var(--content) - 4rem) / 3 + 1rem) !important;}
.-p.-big{width: calc((var(--content) - 4rem) / 3 * 2 - 0.5rem) !important;}
.-p:after{height: calc((var(--content) - 3rem) / 3 - 1rem) !important;}

.new_message{left: 2rem;margin: 0.25rem 0 0 0;}

.img{width: 100%;padding-bottom: 56.25%;margin-left: 0;margin-right: 0;}
	
/* MENU */
nav, .menu_bar{width: 100%;height: 5rem;margin: 0;padding: 0.5rem;border-radius: 0;justify-content: space-around !important;align-items: center;display: flex;}
.menu_bar{top: 0;}
.menu_bar.-pm {justify-content: space-between !important;}
.menu_bar.-pm h1{/* text-align: left; *//* justify-content: flex-start; */}
.menu_b{margin: 0;display: flex;flex-wrap: wrap;width: 3.5rem;height: 3.5rem;padding: 0;}
.menu_b:after{bottom: -0.375rem;}
.menu_b .title, .menu_bar .title{/* visibility: hidden !important; *//* display: none !important; */width:100%;position: relative;opacity: 1;visibility: visible;background: transparent !important;order: 12;top: 0;font-size: 80%;line-height: 120%;text-align: center;height: 1rem;padding: 0;display: flex;align-items: center;justify-content: center;transform: scale(1);}
#menu_b, #p_menu_b{display: flex !important;}

#profile_menu, #menu_mobile{width: calc(100% - 3rem);height: 4rem;justify-content: space-around;position: absolute;bottom: 6rem;border-radius: var(--br-lg);}
#profile_menu{right:1rem;}

#menu_mobile{left: 0;margin: 0 1rem;padding: 0.5rem;display: flex;align-items: center;background: var(--c-white);filter: var(--bsh);overflow: hidden;opacity: 0;visibility: hidden;transform: scale(0.9);transition: all 0.3s cubic-bezier(0.4, -0.1, 0.6, 1.8);}
#menu_mobile .menu_b{margin: 1rem 0.5rem;}
#menu_check:checked ~ #menu_mobile{opacity: 1;visibility: visible;transform: scale(1);}
#goodies_check ~ #goodies_b:after, #wall_check ~ #wall_b:after, #login_check ~ #login_b:after,  #profile_check ~ #p_menu_b:after{
    width: calc(100% - 3.5rem);
	margin: 0 1.75rem;
}
	
/* CONTENT */
main .box input{width: calc(100% - 2rem);margin: 0 0 1rem;}
.box{margin: 0 0 1rem;padding: 1rem;}
iframe{width: calc(100vw - 4rem);height: calc(56.25vw - 2.25rem);}
	
/* POSTS */
#posts{margin: 1rem 0 0;}
#posts .box{margin: 0 0 1rem;}
.-page .button{width: calc(50% - 2.5rem);margin: 0;}
.-page .button span:not(.m){display: none;}
.-page .button span.m{display: block;}
#posts .box .-p.-date{order: 12;}

/* PROJECTS */
#projects .menu_bar{width: calc(100% + 4rem);height: auto;flex-wrap: wrap;}
#projects .search{margin: 1.25rem 0 0;padding: 0 0.5rem;}
#projects .search_input{}
#projects .result{width: calc(100% - 1rem);max-height: 13rem;top: 3.5rem;left: 0.5rem;}
#projects .result .content{max-height: 10rem;}

#pCon .box .info_bar, #pCon .toggler + label{width: calc(100% - 2rem);margin: 1rem 0 0;}
.fixed{margin: 0 !important;border-radius: 0 !important;}
#online_videos .box{margin: 1rem 4% 0 4% !important;}
.video_box{width: 100%;padding: 0;}

.-project .content{flex-wrap: wrap;}
.-project .img{
    width: 100%;
    padding-bottom: 137.25%;
    }
.-project .info{width: 100%;margin: 1rem 0 0 0;}
.-project.-list {width: 100%;margin: 1rem 0 0;}
.-project.-list .content{padding-bottom: 12rem;}

.-project .links > *{order: 12;}
.-project .links .-yellow{order: 1;}
.-project .links .-episode{order: 2;}
.-project .links .-date{/* order: 3; */}
	
/* PANELS */
.panel_img{display: none;}
aside{width: 100%;left: 0 !important;right: 0 !important;background: var(--c-white);}
.panel_box{padding: 1rem 1rem 4.5rem !important;}
#goodies_panel{margin: 0 0 1rem 0;}
#login_panel{width: 15rem;}
#login_panel .box{margin: 0 auto;}	
#recommended{display: none;}

/* VOCALOID */
#vocaloid_img{display: none;}
.v_box{margin-top: 4rem;}
.v_box .img{padding-bottom: 100%;}

/* TEAM */
#team{padding: 1rem;}
#team_img{display: none;}

/* PARTNERS */
.partners .box{margin-top: 4rem;}
.partners .flex:not(.-m0){width: calc(100% - 2rem);margin: 0 1rem -1rem;}
.p_button{width: 3rem;height: 3rem;}
.p_button:after{font-size: 1.5rem;}
	
/* UNLIMITED RULEBOOK */
#the_rules{padding: 1rem;}
#the_rules_img{display: none;}

/* PRIVATE MESSAGES */
#pm_box .text{width: calc(100% - 3.5rem) !important;word-break: break-word;}
.pm_username, .pm_subject{width: 80%;}
#pm_box{max-height: calc(100vh - 23rem);overflow: hidden;}
#pm_list{max-height: calc(100vh - 36.5rem);}
#pm_box form.pm_box{width: 100%;margin: 1rem 0 0 0;}
#pm_box .see{bottom: 0.75rem;}
#messages .menu_bar .avatar{margin: 0 0.5rem 0 0.5rem;}
#messages .menu_bar .button{margin: 0 0.25rem 0 0 !important;}
}
@media screen and (max-width: 339px){
	html{font-size: 4vw;}
}