/* 
by lisheng741@qq.com 
转载请保留作者信息，谢谢~
*/

body {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgb(22, 22, 22);
    color: rgb(233, 233, 233);
}

footer {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

.console {
    position: absolute;
    z-index: 5000;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgb(22, 22, 22);
    color: rgb(233, 233, 233);
    padding: 5px;
}

.cursor {
    -webkit-animation: cursorTwinkle 1s infinite;
    animation: cursorTwinkle 1s infinite;
}

.page,
.code {
    display: none;
}

.show {
    display: block;
}

.shadow {
    display: none;
    position: absolute;
    z-index: 6000;
    background: transparent;
    top: calc( 50% - 48px);
    left: calc( 50% - 48px);
    width: 96px;
    height: 96px;
    border-radius: 50%;
}

.program {
    position: absolute;
    z-index: 200;
    top: calc( 50% - 44px);
    width: 88px;
    height: 88px;
    left: calc( 50% - 44px);
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.page,
.main {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
}

.code {
    background: rgb(55, 55, 55);
    color: rgb(233, 233, 233);
    border: solid 1px #96c21e;
    position: absolute;
    z-index: 500;
    right: 25px;
    width: 46%;
    height: calc( 50% - 45px);
    overflow: hidden;
}

.code-title {
    background: rgb(155, 155, 155);
    color: rgb(233, 233, 233);
    position: relative;
    height: 24px;
    width: 100%;
    padding-left: 16px;
}

.code-html,
.code-css {
    color: rgb(233, 233, 233);
    overflow: auto;
    position: absolute;
    top: 24px;
    left: 0;
    bottom: 0;
    right: 0;
    margin-bottom: 0;
    padding: 10px;
}

.code-html::-webkit-scrollbar,
.code-css::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.code-html::-webkit-scrollbar-thumb,
.code-css::-webkit-scrollbar-thumb {
    border-radius: 6px;
    box-shadow: inset 0 0 5px rgba(222, 222, 222, 0.2);
    background: rgb(155, 155, 155);
}

.code-html::-webkit-scrollbar-track,
.code-css::-webkit-scrollbar-track {
    background: rgb(66, 66, 66);
    box-shadow: inset 0 0 5px rgba(222, 222, 222, 0.2);
}


/* hightline */

.html-label {
    color: rgb(25, 140, 248);
}

.html-str {
    color: rgb(231, 116, 7);
}

.css-annotation {
    color: rgb(5, 185, 30);
    display: block;
}

.css-selector {
    color: rgb(225, 165, 40);
}

.css-key {
    color: rgb(35, 176, 219);
}

.css-value {
    color: rgb(222, 222, 155);
}


/* 动画 */


/* 光标闪烁 */

@keyframes cursorTwinkle {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1.0;
    }
}

@-webkit-keyframes cursorTwinkle {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1.0;
    }
}


/* 载入背景变化 */

@keyframes bodyBackground {
    0% {
        background: rgb(255, 255, 255);
        transform: scale(7);
        opacity: 0;
        overflow: hidden;
    }
    50% {
        opacity: 1;
        overflow: hidden;
    }
    100% {
        background: rgb(13, 58, 100);
        transform: scale(1);
        overflow: hidden;
        opacity: 1;
    }
}

@-webkit-keyframes bodyBackground {
    0% {
        background: rgb(255, 255, 255);
        transform: scale(7);
        opacity: 0;
        overflow: hidden;
    }
    50% {
        opacity: 1;
        overflow: hidden;
    }
    100% {
        background: rgb(13, 58, 100);
        transform: scale(1);
        overflow: hidden;
        opacity: 1;
    }
}


/* 阴影扩散 */

@keyframes shadowSpread {
    0% {
        background: rgb(0, 195, 255);
    }
    50% {
        top: calc( 50% - 1000px);
        left: calc( 50% - 1000px);
        width: 2000px;
        height: 2000px;
        opacity: 0.4;
    }
    100% {
        background: transparent;
        top: calc( 50% - 48px);
        left: calc( 50% - 48px);
        width: 96px;
        height: 96px;
        opacity: 1;
    }
}

@-webkit-keyframes shadowSpread {
    0% {
        background: rgb(0, 195, 255);
    }
    50% {
        top: calc( 50% - 1000px);
        left: calc( 50% - 1000px);
        width: 2000px;
        height: 2000px;
        opacity: 0.4;
    }
    100% {
        background: transparent;
        top: calc( 50% - 48px);
        left: calc( 50% - 48px);
        width: 96px;
        height: 96px;
        opacity: 1;
    }
}


/* 模拟程序点击效果 click */

@keyframes programClick {
    0% {
        background: transparent;
    }
    100% {
        background: #96c21e;
    }
}

@-webkit-keyframes programClick {
    0% {
        background: transparent;
    }
    100% {
        background: #96c21e;
    }
}


/* program 退出动画 */

@keyframes programExit {
    0% {
        transform: rotate(0deg);
        top: -webkit-calc( 50% - 44px);
        top: calc( 50% - 44px);
    }
    10% {
        transform: rotate(5deg);
        top: -webkit-calc( 50% - 42px);
        top: calc( 50% - 42px);
    }
    25% {
        transform: rotate(10deg);
        top: -webkit-calc( 50% - 40px);
        top: calc( 50% - 40px);
    }
    50% {
        transform: rotate(30deg);
        top: -webkit-calc( 50% - 30px);
        top: calc( 50% - 30px);
    }
    100% {
        transform: rotate(720deg);
        top: -webkit-calc( 100% + 88px);
        top: calc( 100% + 88px);
    }
}

@-webkit-keyframes programExit {
    0% {
        transform: rotate(0deg);
        top: -webkit-calc( 50% - 44px);
        top: calc( 50% - 44px);
    }
    10% {
        transform: rotate(5deg);
        top: -webkit-calc( 50% - 42px);
        top: calc( 50% - 42px);
    }
    25% {
        transform: rotate(10deg);
        top: -webkit-calc( 50% - 40px);
        top: calc( 50% - 40px);
    }
    50% {
        transform: rotate(30deg);
        top: -webkit-calc( 50% - 30px);
        top: calc( 50% - 30px);
    }
    100% {
        transform: rotate(720deg);
        top: -webkit-calc( 100% + 88px);
        top: calc( 100% + 88px);
    }
}


/* html 程序窗口启动 */

@keyframes programOpenHtml {
    0% {
        top: calc( 50% - 32px);
        width: 72px;
        height: 64px;
        left: calc( 50% - 36px);
        background: rgb(0, 0, 0);
    }
    80% {
        background: rgb(55, 55, 55);
        top: 10px;
        left: calc( 50% - 36px);
        width: 46%;
        height: calc( 50% - 45px);
        overflow: hidden;
    }
    100% {
        left: calc( 54% - 25px);
    }
}

@-webkit-keyframes programOpenHtml {
    0% {
        top: calc( 50% - 32px);
        width: 72px;
        height: 64px;
        left: calc( 50% - 36px);
        background: rgb(0, 0, 0);
    }
    80% {
        background: rgb(55, 55, 55);
        top: 10px;
        left: calc( 50% - 36px);
        width: 46%;
        height: calc( 50% - 45px);
        overflow: hidden;
    }
    100% {
        left: calc( 54% - 25px);
    }
}


/* css 程序窗口启动 */

@keyframes programOpenCss {
    0% {
        bottom: calc( 50% - 32px);
        width: 72px;
        height: 64px;
        left: calc( 50% - 36px);
        background: rgb(0, 0, 0);
    }
    80% {
        background: rgb(55, 55, 55);
        left: calc( 50% - 36px);
        bottom: 30px;
        width: 46%;
        height: calc( 50% - 45px);
        overflow: hidden;
    }
    100% {
        left: calc( 54% - 20px);
    }
}

@-webkit-keyframes programOpenCss {
    0% {
        bottom: calc( 50% - 32px);
        width: 72px;
        height: 64px;
        left: calc( 50% - 36px);
        background: rgb(0, 0, 0);
    }
    80% {
        background: rgb(55, 55, 55);
        left: calc( 50% - 36px);
        bottom: 10px;
        width: 46%;
        height: calc( 50% - 45px);
        overflow: hidden;
    }
    100% {
        left: calc( 54% - 20px);
    }
}

.show-shadow-spread {
    display: block;
    -webkit-animation: shadowSpread 1s linear 0s backwards;
    animation: shadowSpread 1s linear 0s backwards;
}

.show-body-background {
    -webkit-animation: bodyBackground 2s linear 0s forwards;
    animation: bodyBackground 2s linear 0s forwards;
    background: rgb(13, 58, 100);
}

.show-program-click {
    -webkit-animation: programClick 0.5s linear 0s backwards;
    animation: programClick 0.5s linear 0s backwards;
}

.show-program-exit {
    -webkit-animation: programExit 4s ease-in 0s forwards;
    animation: programExit 4s ease-in 0s forwards;
}

.show-html-open {
    -webkit-animation: programOpenHtml 2s linear 0s backwards;
    animation: programOpenHtml 1.8s linear 0s backwards;
}

.show-css-open {
    -webkit-animation: programOpenCss 2s linear 0s backwards;
    animation: programOpenCss 1.8s linear 0s backwards;
}

.main p::before {
    content: "";
}


/* 样式变更 

.main {
    overflow: hidden;
    position: relative;
    background: #BBFFEE;
    color: rgb(0, 25, 155);
    box-shadow: 5px 5px 100px rgb(99 155 175);
    width: 650px;
    padding: 22px;
    margin: 22px 10px 45px 22px;
    background-image: linear-gradient(45deg, #BBFFEE, #FFFFBB, #00B7DD);
}

.main h1 {
    font-size: 1.8rem;
    border-bottom: solid 1px rgb(0, 25, 155);
}

.main h3 {
    font-size: 1.5rem;
    padding-left: 12px;
    border-left: solid 3px rgb(0, 25, 155);
}

.main p {
    position: relative;
    left: 26px;
}
*/


/* 伪选择器无效，所以这个css 不能备注 */

.main p::before {
    content: "";
    position: absolute;
    left: -14px;
    top: calc( 50% - 3px);
    width: 6px;
    height: 6px;
    background: rgb(0, 25, 155);
    border-radius: 50%;
}