@font-face {
    font-family: "IBM Plex Sans";
    src: url("./IBMPLEXSANSJP-EXTRALIGHT.TTF");
}
@font-face {
    font-family: "Julius Sans One";
    src: url("./JULIUSSANSONE-REGULAR.TTF");
}
@font-face {
    font-family: "MontserratLight";
    src: url("./MONTSERRAT-EXTRALIGHT.TTF");
}
@font-face {
    font-family: "Montserrat";
    src: url("./MONTSERRAT-REGULAR.TTF");
}
@keyframes showmodal {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes hidemodal {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@keyframes color1hide {
    0%{ top: 0;
        left: 0;
    }
    100%{
        left: -100%;
    }
}
@keyframes color2hide {
    0%{ top: -100%;
        right: 0;
    }
    100%{
        right: -100%;
    }
}

@keyframes movemusic {
    0%{
        top: unset;
        left: unset;
    }
    100%{
        top: 50%;
    left: 50%;
    height: 75%;
    width: 768px;
    transform: translate(-50%,-50%);
    margin: 0;
        background-color: #03a7eb
    }
}

@keyframes movemusicimg {
    0%{
        top: unset;
        left: unset;
        height: 70px;
    }
    100%{
        top: 16px;
    left: 50%;
    height: 50%;
    transform: translate(-50%,0);
    margin: 0;
    }
}

@keyframes movemusictitle {
    0%{
        top: unset;
        left: unset;
    }
    100%{
        top: 60%;
    width:  100%;
    margin: 0;
    }
}

@keyframes movemusicdiff {
    0%{
        top: unset;
        left: unset;
    }
    100%{
        top: 60%;
    margin: 8px;
    }
}

@keyframes movemusicdetails {
    0%{
        top: unset;
        left: unset;
    }
    100%{
        bottom: 0;
    }
}

::-webkit-scrollbar{
    height: 0;
    width: 5px;
}
::-webkit-scrollbar-thumb{
    background-color: #03a7eb;
}

*{
    transition: 0.3s;
    outline: none;
}
body{
    background-color: rgb(20,20,30);
    color: whitesmoke;
    margin: 0;
    font-family: "IBM Plex Sans";
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    cursor:url("./src/cursor/Pulse_Glass.png"),default;
}
h1,h2,h3,h4,h5,h6{
    margin: 0;
}
hr{
	height:1px;
	background-color:whitesmoke;
	border:none;
}
input{
    cursor: url('./src/cursor/Pulse\ Glass\ Text.cur') default;
}
canvas{
    height: calc(100vh - 122px)!important;
    width: 100vw!important;
    position: absolute;
    margin: 0!important;
    top: 73px!important;
    left: 0!important;
    inset: unset;
    display: none;
}

header{
    background-color: rgb(100, 100, 100);
    -webkit-app-region:drag;
        height: 24px;
}
header img{
    height: 24px;
    float: right;
    -webkit-app-region:no-drag;
}
header span{
    margin-left: 2px;
}
header img:hover{
    background-color: rgb(80, 80, 80);
}
header img[onclick="closeWindow()"]:hover{
    background-color: red;
}
#headeritem{
	background-color:rgb(65,64,64);
	position: absolute;
	height: 40px;
	width: calc(15em + 72px + 96px);
	top: 0;
	right: 16px;
	padding: 2px 8px;
	border-radius:0 0 4px 4px;
	font-size:1.25em;
	z-index:9999;
	font-weight:bold;
}
#headeritem:hover{
	background-color:#03a7eb;
	box-shadow:0 0 8px 0px whitesmoke;
	padding-top:8px;
	height:48px;
}
#headeritem * {
	margin:0 8px;
}
#headeritem img{
	height:36px;
	vertical-align:sub;
}
#headercontent{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 24px;
}

/* .version{
    background-color: rgb(100, 100, 100);
} */
.main{
    position: absolute;
    height: calc(100vh - 24px);
    width: 100vw;
    overflow: hidden;
}
#stats{
    position: fixed;
    bottom: 0;
    left: 0;
}
#topbar{
    position: absolute;
    height: 1px;
    top: 48px;
    width: 100vw;
    margin: 0;
}
#bottombar{
    position: absolute;
    height: 1px;
    bottom: 48px;
    width: 100vw;
    margin: 0;
}
#topframe{
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    height: 48px;
    width: 100vw;
}
#mainframe{
    position: absolute;
    top: 49px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 120px);
        overflow: auto;
}
#mainframe>div{
    position: absolute;
    top:0;
    left: 0;
    width: 100vw;
    height: 100%;
}
#bottomframe{
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    height: 48px;
    width: 100vw;
}
#topframe * ,#bottomframe * {
    display: inline-block;
}

#mainframe>.Settingspage>div>h1{
    margin-top: 8px;
    margin-bottom: 8px;
    display: inline-block;
    width: 30%;
    text-align: center;
}
#mainframe>.Settingspage img{
    height: 48px;
    vertical-align: text-bottom;
}
#bottomframe>div img{
    height: 40px;
    margin-top: 4px;
}
#bottomframe>div span{
    vertical-align: bottom;
    font-size: 36px;
}
.valuesetting img{
    margin: 0 1em;
}
#reset{
    left:8px;
    box-sizing: border-box;
}
#reset *{
    line-height: 44px;
}
#reset img{
    vertical-align: top!important;
}
#reset:hover{
    border: 2px solid #03a7eb;
    border-radius: 4px
}
.Settingspage{
    display: none;
    overflow: auto
}
.Settingspage>div{
	margin-top: 100px; width: 100vw;
}
.music{
    background-color: #36393f;
    border-radius: 8px;
    margin:32px 64px;
    padding: 4px;
    height: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.music img{
    height: 70px;
}
.music span.title{
    font-weight: bold;
    font-size: 48px;
    vertical-align: top;
}
.music span.details{
    float: right;
}
.music span.diff{
    line-height: 62px;
    font-size: 48px;
    vertical-align: top;
    float: right;
    margin-left: 16px;
    padding: 4px;
    border-radius: 8px;
    width: 2em;
    text-align: center;
}

.music:hover{
    background-color: #03a7ebbb;
    backdrop-filter: blur(15px);
}

.music span.master{
    background-color: rgb(45, 9, 206);
}
.music span.expert{
    background-color: rgb(224, 48, 4);
}
.music span.advanced{
    background-color: rgb(202,155,7);
}
.music span.basic{
    background-color: rgb(48, 206, 9);
}

.music span.ozma{
    background: linear-gradient(31deg, rgba(236,20,20,1) 0%, rgba(255,227,0,1) 17%, rgba(37,255,0,1) 25%, rgba(29,253,170,1) 41%, rgba(26,138,250,1) 59%, rgba(138,23,248,1) 81%, rgba(244,61,204,1) 100%);
}

@media screen and (max-width: 900px){
    .music span.details,.music span.diff{
        display: none;
    }
}

#result{
height: calc(100vh - 122px)!important;
    width: 100vw!important;
    position: absolute;
    margin: 0!important;
    top: 73px!important;
    left: 0!important;
    background-color: #36393f90;
    color: whitesmoke;
    backdrop-filter: blur(30px);
    padding: 32px;
    box-sizing: border-box;
    display: none;
    z-index: 9998;
    overflow: auto;
    font-size: 2em;
}

#result>div>span{
    display: inline-block;
    width: 100%;
    background-color: #03a7eb;
    
}
#result>div>h1{
    font-size: 96px;
        line-height:  calc(calc(100vh - 122px - 64px)*0.5 - 0.5em);
}
#result-details>div{
	display:inline-block;
	width:calc(50% - 8px);
}
#resuit-details{
	display:flex;
	flex-wrap:wrap;
}
.button{
    border-radius: 8px;
    background-color: #03a7eb;
    display: inline-block;
    width: 30%;
    text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
}


.modal{
    height: 60%!important;
    width: 60%!important;
    position: absolute;
    margin: 0!important;
    top: 50%!important;
    left: 50%!important;
    background-color: #36393fbb;
    color: whitesmoke;
    backdrop-filter: blur(45px);
    border-radius: 8px;
    box-shadow: 0px 0px 15px 5px black;
    box-sizing: border-box;
    display: none;
    transform: translate(-50%,-50%);
    z-index: 9999;
    font-size: 1.5em;
}
.modal .windowtitle{
    display:block;
    background-color:rgba(20,20,30,0.8);
    margin-bottom:16px;
    padding:8px;
    border-radius: 8px 8px 0 0;
    text-align: center
}

.cp_iptxt {
    position: relative;
    width: 80%;
    margin: 40px 10%;
}
.cp_iptxt input {
    font-family: "IBM Plex Sans";
    font-size: 1em;
    box-sizing: border-box;
    width: 100%;
    letter-spacing: 1px;
    padding-left: 4em;
    color: whitesmoke
}
.cp_iptxt input[type='text']:focus {
    outline: none;
}
.ef {
    padding: 4px 0;
    border: 0;
    border-bottom: 1px solid #1b2538;
    background-color: transparent;
}
.ef ~ .focus_line {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    transition: 0.4s;
    background-color: #03a7eb;
}
.ef ~ .focus_line {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    transition: 0.4s;
    background-color: #03a7eb;
}
.ef:focus ~ .focus_line,
.cp_iptxt.ef ~ .focus_line {
    left: 0;
    width: 100%;
    transition: 0.4s;
}
a{
    color: #03a7eb;
    text-decoration: none;
    font-weight: bold;
}

.headertext{
    color: #03a7eb;
    text-decoration: none;
    font-weight: bold;
    margin-left: 32px
}


#color1{
    clip-path: polygon(0 0, 15% 0%, 85% 100%, 0% 100%);
    background: radial-gradient(ellipse farthest-corner at 0 0,
         rgba(15, 28, 46,0.8), rgb(2,2,15), #01284eb0,rgba(20,20,30,0.8) );
    height: 100%;
    position: relative;
    left: 0;
    top: 0;
    z-index: 10;
}

#color2{
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 85% 100%);
     background: radial-gradient(ellipse farthest-corner at 0 0,
    rgba(16, 63, 30, 0.8),#014e14b0, rgb(4, 19, 3),rgba(15, 28, 46,0.8));
    height: 100%;
    position: relative;
    top: -100%;
    right: 0;
    z-index: 10;
}
#startdisplay{
    height: 100%;
}


#startdisplaytext{
    font-family:'Julius Sans One';
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:9999;
    font-style:italic;
    font-weight:100;
}

#musicbg{
    height: 100%!important;
    width: 100%!important;
    position: fixed;
    margin: 0!important;
    top: 50%!important;
    left: 50%!important;
    background-color: #36393fbb;
    color: whitesmoke;
    backdrop-filter: blur(45px);
    box-sizing: border-box;
    display: none;
    transform: translate(-50%,-50%);
    z-index: 9998;
}



video{
    display: none;
    height:calc(100vh - 122px);
    width: 100vw;
    position: absolute;
    margin: 0!important;
    top: 73px!important;
    left: 0!important;
    object-fit: contain;
    color: whitesmoke;
    box-sizing: border-box;
    z-index: 9999;
    text-align: center;
}

#videobackground{
    display: none;
    height:calc(100vh - 122px);
    width: 100vw;
    position: absolute;
    margin: 0!important;
    top: 73px!important;
    left: 0!important;
    background-color: rgb(20,20,30);
    color: whitesmoke;
    box-sizing: border-box;
    z-index: 9998;
}

.modal p{
    padding: 4px;
    padding-left: 32px;
    border-radius: 4px;
}
.modal p>svg{
    margin-right: 16px;
}
.modal p:hover{
    background-color: #03a7eb;
}

#characterstatus{
    font-size: 2em;
    padding: 8px;
    margin-left: 50%;
    transform: translate(-50%,0);

}

#cover{
	position:fixed;
	top:0;
	left:0;
	height:100vh;
	width:100vw;
	background-color:rgba(20,20,30,0.75);
	backdrop-filter:blur(30px);
	z-index:9999;
}
#login-username-error,#login-password-error{
	color:red;
	margin-left:10%;
}
.notification{
	position:fixed;
	background-color:rgba(10,10,15,0.8);
	backdrop-filter:blur(30px);
	bottom:16px;
	right:-20%;
	width:20%;
	border-radius:4px;
	box-shadow:0 0 2px 2px #03a7eb;
	border:1px solid #03a7eb;
	z-index:9999;
}

@keyframes notificationshow{
	0%{
		right:-20%
	}
	100%{
		right:16px
	}
}

@keyframes notificationhide{
	0%{
		right:16px
	}
	100%{
		right:-20%
	}
}

#ratingdiff,#expdiff{
	position:absolute;
	top:-125%;
	left:0;
	height:inherit;
	width:inherit;
	background-color:inherit;
	padding:inherit;
	border-radius:inherit;
	backdrop-filter:blur(30px);
	margin:0;
	transition-delay:0
}
#expdiff{
	transition:1s;
    background-image: linear-gradient(to right, #838304, #838304);
    background-repeat: no-repeat;
}
#ratingdiff * ,#expdiff *{
	line-height:40px;
}

@keyframes shownametip{
	0%{
		top:-100%;
	}
	100%{
		top:0
	}
}
@keyframes hidenametip{
	0%{
		top:0;
	}
	100%{
		top:-100%
	}
}
.rating{
	background-clip: text!important;
	-webkit-background-clip: text!important;
	color:transparent;
}

#loginmodal-second{
	display:none;
}

.acd-check{
    display: none;
}
.acd-label{
    background: #333;
    color: #fff;
    display: block;
    width: calc(100% - 128px);
    margin: 8px auto;
    border-radius: 4px;
    margin-bottom: 1px;
    padding: 16px;
    font-size: 1.5em;
	font-weight:bold;
}
.acd-content{
    background-color: #36393fa2;
    width: calc(100% - 128px);
    margin: 0 auto;
    height: 0;
    opacity: 0;
    padding: 0;
    transition: 0.3s;
    max-height: 70%;
    overflow: auto;
    position: relative;
    top: -1px;
    border-radius: 0 0 4px 4px;
	font-size:1.25em;
}
.acd-content::-webkit-scrollbar{
    height: 4px;
    width: 4px;
    background-color: transparent;
}
.acd-content::-webkit-scrollbar-thumb{
    background-color: #03a7eba2;
    border-radius: 8px;
}
.acd-check:checked + .acd-label{
    border-radius: 4px 4px 0 0;
}
.acd-check:checked + .acd-label + .acd-content{
    padding: 16px;
    height: auto;
    opacity: 1;
    margin-bottom: 32px;
}

#keyconfig-content>span{
	display:inline-block;
	width:15em;
}
.keyconfiginput{
	padding:4px;
	margin:4px;
	border-radius:8px;
	border:4px solid #03a7eb;
	background-color:#36393f;
	color:whitesmoke;
	font-family:"IBM Plex Sans";
	font-size:1.2em;
	font-weight:bold;
	text-align:center;
}
.keyconfiginput:focus{
	border:4px solid darkorange;
}