@font-face {
	font-family: 'iconFont';
	src: url('./fontello/font/fontello.eot') format('embedded-opentype'),
            url('./fontello/font/fontello.ttf') format('truetype'),
            url('./fontello/font/fontello.woff') format('woff'),
            url('./fontello/font/fontello.svg') format('svg');
}
@font-face {
	font-family: 'NotoSans';
	src: url('./NotoSansDisplay-VariableFont_wdth,wght.ttf') format('truetype');
}
@font-face {
    font-family: 'MPlus';
    src: url('./M_PLUS_1/MPLUS1-VariableFont_wght.ttf') format('truetype');
}
@font-face {
    font-family: 'Genshin';
    src: url('./ja-jp.ttf') format('truetype');
}
icon, .iconFont {
    font-family: iconFont;
    display: inline;
    margin: 5px;
    font-size: 1.0em;
}
/*------------------------------------------------------------------------------------*/
html {
    width: 100%; height: 100%;
    margin: 0px;
    padding: 0px;
    font-family: Genshin, MPlus;
}

body {
    width: 100%; height: 100%;
    max-width: 460px;
    margin: 0px auto;
    position: relative;
    background-color: #1D2630;
    /* color: #e17055; */
    color: white;
}

#bg {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    background-color: rgb(100, 100, 100);
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    filter: blur(4px);
    margin: -4px;
    z-index: -1;
}

.bg.blur {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: cover;
    background-position: center;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    filter: blur(4px);
    z-index: -1;
}

#main {
    width: 100%;
    margin: 0px;
}

/*------------------------------------------------------------------------------------*/
 img.icon.large {
    width: 64px;
 }