@font-face {src: url("font/open-sans.ttf"); font-family: "Open sans";}
@font-face {src: url("font/open-sans-bold.ttf"); font-family: "Open sans bold";}
@font-face {src: url("font/inter.otf"); font-family: "Inter";}

body {background: #192149;background-image:url("../image/background.png");background-repeat: repeat;font-size: 15px;font-family: "Open sans";margin:auto;}
a{text-decoration: none;}
b{font-family: "Open sans bold";}
li{list-style-type: none;}
ul{margin:0; padding:0;}
input,textarea{outline: none;}
input{}
textarea{font-size: 15px;font-family: "Open sans";resize: none;}
.tab-block.two,.tab-block.three{display: none;}
.top-message{background: #000000;color: #b0bdff;width: 100%;line-height: 45px;font-family: 'Open sans bold';text-align: center;position: fixed;top: -45px;z-index: 1;transition: .5s;cursor: pointer;}
.top-message.active{top: 0;}

.sidebar{width: 260px;margin-left: 450px;position: absolute;top: 20px;left: 50%;transform: translateX(-50%);}
.sidebar .item{background: #222b59;border-bottom: 1px solid #192149;display: flex;transition: .1s;}
.sidebar .item:hover{background: #273061;}
.sidebar .item.active{background: #273061;}
.sidebar .item .icon{background-size:cover;width: 40px;height: 40px;margin-top: 5px;margin-left: 5px;}
.sidebar .item .icon.main{background-image: url("../image/icon/sidebar/main.png");}
.sidebar .item .icon.spartan{background-image: url("../image/icon/sidebar/spartan.png");}
.sidebar .item .icon.grandfather{background-image: url("../image/icon/sidebar/grandfather.png");}
.sidebar .item .icon.cc{background-image: url("../image/icon/sidebar/cc.png");}
.sidebar .item .icon.year{background-image: url("../image/icon/sidebar/year.png");}
.sidebar .item .icon.goal{background-image: url("../image/icon/sidebar/goal.png");}
.sidebar .item .icon.diary{background-image: url("../image/icon/sidebar/diary.png");}
.sidebar .item .icon.note{background-image: url("../image/icon/sidebar/note.png");}
.sidebar .item .icon.video{background-image: url("../image/icon/sidebar/video.png");}
.sidebar .item .icon.meme{background-image: url("../image/icon/sidebar/content.png");}
.sidebar .item .icon.message{background-image: url("../image/icon/sidebar/message.png");}
.sidebar .item .icon.statistics{background-image: url("../image/icon/sidebar/statistics.png");}
.sidebar .item .icon.reality{background-image: url("../image/icon/sidebar/reality.png");}
.sidebar .item .icon.review{background-image: url("../image/icon/sidebar/review.png");}
.sidebar .item .icon.user{background-image: url("../image/icon/sidebar/user.png");}
.sidebar .item .icon.help{background-image: url("../image/icon/sidebar/help.png");}
.sidebar .item .icon.sg{background-image: url("../image/icon/sidebar/sg.png");}
.sidebar .item .icon.whatsnew{background-image: url("../image/icon/sidebar/whatsnew.png");}
.sidebar .item .name{color: #9da7db;line-height: 50px;font-family: 'Open sans bold';flex-grow: 1;}
.sidebar .item .total{color: #9da7db;line-height: 50px;margin-right: 15px;font-family: 'Open sans bold';}
.sidebar .divider{background: #192149;height: 10px;}

/*
    Not found
*/
.not-found{height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.not-found .number{color: #5968b1;font-size: 100px;font-family: "Open sans bold";}
.not-found .name{color: #5968b7;font-size: 30px;}

.logo{background-image: url("../image/logo.png");background-size: cover;width: 221px;height: 55px;margin: auto auto 20px;display: flex;align-items: center;justify-content: center;}
.content{color: white;width: 600px;margin: 20px auto;}
.tabs.standard{background: #1d254b;display: flex;}
.tabs.standard .tab{color: #6f7dbf;line-height: 45px;padding: 0 15px;font-family: 'Open sans bold';cursor: pointer;}
.tabs.standard .tab.active{color: #ffffff;}
.list.standard.default .item{cursor: default;}
.list.standard .header{background: #334081;color: #7d8bd3;line-height: 50px;font-family: 'Open sans bold';text-align: center;cursor: default;}
.list.standard .item{background: #252f61;padding: 15px;border-top: 1px solid #192149;}
.list.standard .item .left{display: flex;align-items: center;}
.list.standard .item .left .colon{color: #9da9e5;margin-right: 5px;font-family: "Open sans bold";}
.list.standard .item .left .total{color: #6a79c7;font-family: "Open sans bold";}
.list.standard .item .name{color: #9da9e5;font-family: "Open sans bold";}
.list.standard .item .text{color: #9da9e5;line-height: 23px;}
.list.standard .item .date{color: #7583c5;margin-top: 3px;font-size: 13px;}

.page .title{background: #222b59;color: #9da7db;line-height: 50px;font-family: 'Open sans bold';text-align: center;cursor: default;}
.page .marquee{background: #222a55;overflow: hidden;}
.page .marquee .ticker{color: #7886cd;line-height: 40px;font-size: 14px;font-family: 'Open sans bold';white-space: nowrap;animation: marquee 15s linear infinite;cursor: default;}
.page .audio-title{background: #222b59;color: #9da7db;line-height: 50px;font-family: 'Open sans bold';text-align: center;cursor: pointer;}
.page .audio-block{background: #151c3b;display: none;}
.page .audio-block .item{padding: 15px;border-bottom: 1px solid #11162f;cursor: default;}
.page .audio-block .item .name{color: #7f8fd9;font-family: 'Open sans bold';}
.page .audio-block .item .text{color: #7f8fd9;line-height: 25px;margin-top: 10px;font-size: 14px;}

/*
    Welcome
*/

.page.welcome{height: 100vh;display: flex;align-items: center;justify-content: center;}
.page.welcome form{width: 400px;display: flex;margin: auto;}
.page.welcome form input{background: #ffffff;padding: 0 15px;margin-right: 15px;font-size: 15px;flex-grow: 1;border: none;border-radius: 15px;}
.page.welcome form .send{background: #2e42a5;color: #859aff;width: 120px;line-height: 50px;font-family: 'Open sans bold';text-align: center;border-radius: 15px;cursor: pointer;}

/*
    Main
*/

.page.main{}
.page.main .list{}
.page.main .list .category{background: #334081;color: #7d8bd3;line-height: 50px;font-family: 'Open sans bold';text-align: center;cursor: default;}
.page.main .list .item{background: #222b59;color: #9da7db;line-height: 45px;padding: 0 15px;font-family: 'Open sans bold';border-bottom: 1px solid #192149;}

/*
    CC
*/
.page.cc{}
.page.cc .center{background: #252f61;padding: 15px 0;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.page.cc .center .image{background-image: url("../image/cc.png");background-size: cover;width: 100px;height: 100px;margin-bottom: 10px;animation: ccAnimate 1s ease-in forwards;animation-delay: 2s;}
.page.cc .center .rating{display: flex;}
.page.cc .center .rating .star{background-image: url("../image/star.png");background-size: cover;width: 25px;height: 25px;}
.page.cc .center .rating .star:nth-child(1){animation: starAnimate 1s ease-in forwards;}
.page.cc .center .rating .star:nth-child(2){animation: starAnimate 1s ease-in forwards;animation-delay: 1s;}
.page.cc .audio-block .item .name{font-size: 16px;}
.page.cc .audio-block .item .audio,.page.cc .audio-block .item .audio-2{margin-top: 15px;}

@keyframes ccAnimate {
    100% {
        background-image: url("../image/cc_active.png");
    }
}

@keyframes starAnimate {
    100% {
        background-image: url("../image/star_active.png");
    }
}

/*
    Grandpa
*/
.page.grandpa{}
.page.grandpa .center{background: #252f61;position: relative;}
.page.grandpa .center .image{background-image: url("../image/grandpa.png");background-size:cover;width: 300px;height: 300px;margin: auto;animation: scAnimate 1s linear infinite;}
.page.grandpa .center .power{position: absolute;top: 60px;right: 10px;}
.page.grandpa .center .power .item{color: #d1d9ff;line-height: 18px;font-size: 11px;font-family: 'Open sans bold';opacity: 0;cursor: default;}
.page.grandpa .center .power .item:nth-child(1){color: #ffee00;animation: grandpaAnimate 1.5s linear infinite;opacity: 1;}
.page.grandpa .center .power .item:nth-child(2){color: #7ea4ff;text-shadow: 0 0 20px #1c57e8;}
.page.grandpa .center .power .item:nth-last-child(-n+7){animation: kindAnimate 7s linear infinite;animation-delay: calc(.5s * var(--i));}
.page.grandpa .audio-block .item .audio,.page.grandpa .audio-block .item .audio-2,.page.grandpa .audio-block .item .audio-3,.page.grandpa .audio-block .item .audio-4{margin-top: 15px;}

@keyframes grandpaAnimate {
    50% {
        text-shadow: 0 0 20px #bfc11b;
    }
}

@keyframes kindAnimate {
    50% {
        opacity: 1;
    }
}

@keyframes scAnimate {
    20% {
        opacity: 1;
    }
    70% {
        opacity: .87;
    }
}

/*
    26
*/
.page.twenty-six{}
.page.twenty-six .center{background: #252f61;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.page.twenty-six .center .pulse{background: #29346a;width: 120px;height: 120px;margin: 80px 0;border-radius: 50%;position: relative;transition: .3s;}
.page.twenty-six .center .pulse.active{background: #4356b4;}
.page.twenty-six .center .pulse .sc{color: #242e5d;font-size: 50px;font-family: "Inter";position: absolute;z-index: 2;top: 50%;left: 50%;transform: translate(-50%,-50%);transition: .3s;cursor: default;}
.page.twenty-six .center .pulse .sc.active{color: white;text-shadow: 0 0 30px #499aff;}
.page.twenty-six .center .pulse span{background: inherit;width: 100%;height: 100%;border-radius: inherit;position: absolute;opacity: .8;}
.page.twenty-six .center .pulse span.active{animation: pulseAnimate 4s ease-out infinite;animation-delay: calc(1s * var(--i));}
.page.twenty-six .center .buttons{margin-bottom: 15px;display: flex;}
.page.twenty-six .center .buttons .button{background: #1c244b;color: #5265bd;line-height: 45px;padding: 0 20px;margin: 0 10px;font-size: 14px;font-family: 'Open sans bold';border-radius: 15px;transition: .3s;cursor: pointer;}
.page.twenty-six .center .buttons .button.active{background: #3a51bf;color: white;}
.page.twenty-six .center .buttons .button.active:nth-child(1){background: #095aed;color: #9abeff;}
.page.twenty-six .center .buttons .button.active:nth-child(2){background: #edd209;color: #695f16;box-shadow: 0 0 15px;}
.page.twenty-six .center .motto{color: #7a8bdf;margin-bottom: 15px;font-family: 'Open sans bold';transition: .5s;cursor: default;}
.page.twenty-six .center .motto.active{color: white;text-shadow: 0 0 15px #838dbf;}

/*
    Year
*/
.page.year{}
.page.year .tabs{display: flex;justify-content: center;}
.page.year .tabs .tab{background: #0f1533;color: #6f7dbf;line-height: 45px;padding: 0 15px;margin: 0 15px;font-family: 'Open sans bold';text-align: center;border-radius: 10px;cursor: pointer;}
.page.year .tabs .tab.active{background: #303e85;color: #a0afff;}
.page.year .statistics{margin-top: 20px;display: flex;flex-wrap: wrap;}
.page.year .statistics .item{width: 30%;padding: 10px;margin-bottom: 15px;text-align: center;cursor: default;}
.page.year .statistics .item .total{color: #ffffff;margin-bottom: 3px;font-size: 20px;font-family: 'Open sans bold';}
.page.year .statistics .item .name{color: #7685d1;font-family: 'Open sans bold';}
.page.year .memo{color: #8796dd;line-height: 30px;padding: 15px;margin-top: 5px;margin-bottom: 30px;font-family: 'Open sans bold';border: 2px dashed #5e85c7;cursor: default;}
.page.year .years{display: flex;justify-content: center;}
.page.year .years .item{background: #3b4787;color: #8f9ce3;line-height: 35px;padding: 0 15px;font-family: 'Open sans bold';cursor: pointer;}
.page.year .occupation{}
.page.year .list{}
.page.year .list .month{background: #3f4fa5;color: #a4b2ff;line-height: 50px;padding: 0 15px;font-size: 16px;font-family: 'Open sans bold';cursor: default;}
.page.year .list .item{background: #2a3679;padding: 10px 15px;display: flex;align-items: center;cursor: default;}
.page.year .list .item.crash{background: #212b61;border-left: 5px solid #932727;}
.page.year .list .item .day{color: #ffffff;margin-right: 10px;font-family: 'Open sans bold';}
.page.year .list .item .center{flex-grow: 1;flex-basis: fit-content;}
.page.year .list .item .center .text{color: #bdc7ff;cursor: pointer;}
.page.year .list .item .center .text .red{color: #ff7979;font-family: 'Open sans bold';display: contents;}
.page.year .list .item .center .text .blue{color: #768cff;font-family: 'Open sans bold';display: contents;}
.page.year .list .item .center .column{margin-top: 10px;display: flex;}
.page.year .list .item .center .column .brain, .page.year .list .item .center .column .mood, .page.year .list .item .center .column .dream, .page.year .list .item .center .column .dd{background-size: cover;width: 30px;height: 30px;}
.page.year .list .item .center .column .brain{background-image: url("../image/icon/action/brain.png");margin-right: 5px;}
.page.year .list .item .center .column .brain.one{background-image: url("../image/icon/action/brain_1.png");}
.page.year .list .item .center .column .brain.two{background-image: url("../image/icon/action/brain_2.png");}
.page.year .list .item .center .column .brain.three{background-image: url("../image/icon/action/brain_3.png");}
.page.year .list .item .center .column .mood{background-image: url("../image/icon/action/mood.png");margin-right: 5px;}
.page.year .list .item .center .column .mood.one{background-image: url("../image/icon/action/mood_1.png");}
.page.year .list .item .center .column .mood.two{background-image: url("../image/icon/action/mood_2.png");}
.page.year .list .item .center .column .mood.three{background-image: url("../image/icon/action/mood_3.png");}
.page.year .list .item .center .column .mood.four{background-image: url("../image/icon/action/mood_4.png");}
.page.year .list .item .center .column .mood.five{background-image: url("../image/icon/action/mood_5.png");}
.page.year .list .item .center .column .dream{background-image: url("../image/icon/action/dream.png");margin-right: 5px;}
.page.year .list .item .center .column .dream.one{background-image: url("../image/icon/action/dream_2.png");}
.page.year .list .item .center .column .dream.two{background-image: url("../image/icon/action/dream_1.png");}
.page.year .list .item .center .column .dd{background-image: url("../image/icon/action/dd.png");}
.page.year .list .item .center .column .dd.active{background-image: url("../image/icon/action/dd_active.png");}
.page.year .list .item .cc{background-image:url("../image/icon/action/cc.png");background-size: cover;width: 40px;height: 40px;margin-left: 10px;}
.page.year .list .item .cc.active{background-image:url("../image/icon/action/cc_active.png");}

/*
    Video
*/
.page.video{}
.page.video .list{}
.page.video .list .item{display: flex;}
.page.video .list .item video{width: 200px;border-radius: 10px;}
.page.video .list .item .text{color: white;margin-left: 15px;}

/*
    Meme
*/
.page.meme{}
.page.meme .list{background: #252f61;padding: 15px;display: flex;flex-wrap: wrap;justify-content: space-between;}
.page.meme .list .item{width: calc(50% - 8px);height: 400px;margin-bottom: 15px;border-radius: 10px;overflow: hidden;}
.page.meme .list .item:nth-child(odd){margin-right: 15px;}
.page.meme .list .item img{background-size: cover;width: 100%;height: 400px;}

/*
    Message
*/
.page.message .list .item .year{color: #7583c5;margin-top: 3px;font-size: 13px;}

/*
    Review
*/
.page.review .list .item .text{margin-top: 3px;}
.page.review .list .item .century{color: #7583c5;margin-top: 3px;font-size: 13px;}

/*
    Statistics
*/
.page.statistics{}
.page.statistics .list{background: #252f61;display: flow-root;}
.page.statistics .list .item{background: #1e264f;height: 40px;line-height: 40px;margin: 15px;font-family: 'Open sans bold';position: relative;display: flex;border-radius: 10px;overflow: hidden;cursor: default;}
.page.statistics .list .item .width{background: #141729;height: 40px;position: absolute;top: 0;left: 0;}
.page.statistics .list .item .name{color: #9da9e5;margin-left: 15px;position: relative;}
.page.statistics .list .item .total{color: #6a79c7;margin-left: 5px;position: relative;}
.page.statistics .list .item .percent{color: #9da9e5;position: absolute;right: 15px;}

/*
    Help
*/
.page.help .list .item .text{margin-top: 3px;}

/*
    SG
*/
.page.sg .text{background: #252f61;color: #9da9e5;line-height: 23px;padding: 15px;border-top: 1px solid #192149;cursor: default;}

/*
    Material
*/
.material .title{background: #222b59;}
.material .title .back{background-image: url("../image/icon/action/back.png");background-size: cover;width: 50px;height: 50px;position: absolute;cursor: pointer;}
.material .title .name{color: #9da7db;line-height: 50px;font-family: 'Open sans bold';text-align: center;cursor: default;}
.material .text.standard{background: #252f61;color: #9da9e5;line-height: 23px;padding: 15px;border-top: 1px solid #192149;cursor: default;}

/*
    Goal material
*/
.material.goal{}
.material.goal .tabs{}
.material.goal .tabs .tab{text-align: center;flex-grow: 1;}
.material.goal .progressbar{background: #2d376b;height: 5px;}
.material.goal .progressbar .width{background: #44a5f9;height: 5px;}
.material.goal .list.delay .item{padding: 15px;position: relative;transition: .2s;}
.material.goal .list.delay .item.gray{background: #252525;}
.material.goal .list.delay .item.gray .text{color: #7d7d7d;}
.material.goal .list.delay .item.red{background: #ba3939;}
.material.goal .list.delay .item.red .text{color: #ff9393;}
.material.goal .list.delay .item.yellow{background: #c7a128;}
.material.goal .list.delay .item.yellow .text{color: #ffeeb7;}
.material.goal .list.delay .item.green{background: #3d723d;}
.material.goal .list.delay .item.green .text{color: #a1c5a1;}
.material.goal .list.delay .item.blue{background: #202c6b;}
.material.goal .list.delay .item.blue .text{color: #6f7ecf;}
.material.goal .list.delay .item .text{font-family: "Open sans bold";cursor: default;}

@keyframes pulseAnimate {
    100% {
        opacity: 0;
        transform: scale(2);
    }
}

@keyframes marquee {
    0% {
        transform: translate3d(100%, 0%, 0px);
    }
    100% {
        transform: translate3d(-100%, 0%, 0px);
    }
}