@import url('//ui.gg/lib/font/font.css');

.subject {display: flex;height: 100%;}

.sider {width: 260px;background: var(--f7);height: 100%;display: flex;flex-direction: column;}
.sider x {position: absolute;top: 0;display: none;cursor: pointer;background: var(--sapphire);color: var(--fff);}

.logo {display: flex;align-items: center;justify-content: center;padding: 20px 0;}
.logo em {width: 20%;margin-right: 10px;}
.logo span {font-family: 'montserrat' !important;text-transform: uppercase;font-size: 34px;}

fold {height: 100%;flex: 1;overflow: auto;}
fold::-webkit-scrollbar {width: 5px;}
fold::-webkit-scrollbar-thumb {background: var(--eee);}
fold-cont a {display: block;text-transform: capitalize;line-height: 35px;padding: 0 20px;}
fold-cont a:hover,
fold-cont a.active {background-color: var(--eee);}

.contant {flex: 1;min-width: 0;height: 100%;overflow: auto;padding: 30px;}
.contant h2 {padding: 20px 0;font-size: 40px;font-weight: normal;display: flex;align-items: center;}
.contant h2 i {font-size: 48px;float: left;margin: 0 10px 0 0;}

.absolute-logic {width: 300px;display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 10px;}
.absolute-logic a {height: 100px;background-color: var(--f7);display: flex;align-items: center;justify-content: center;font-size: 40px;color: var(--ddd);}

.wide-logic a {display: block;background-color: var(--f7);padding: 10px;margin: 10px 0;}


@media(max-width:640px){
    .sider {width: 60%;z-index: 3;transform: translateX(-100%);position: fixed;}
    .sider x {right: -.6rem;width: .6rem;height: .6rem;line-height: .6rem;display: block;}
    .sider.active {transform: translateX(0);}

    .logo {padding: .2rem 0;}
    .logo em {margin-right: .1rem;}
    .logo span {font-size: .42rem;}

    fold {height: calc(100% - 3rem);overflow: auto;}
    fold a {padding: 0 .1rem;height: .5rem;line-height: .5rem;font-size: .2rem;}

    .contant {padding: .2rem;}
    .contant h2 {padding: .2rem 0;font-size: .5rem;}
    .contant h2 i {font-size: .48rem;margin: 0 .1rem 0 0;}

    .absolute-logic {width: 3rem;grid-gap: .1rem;}
    .absolute-logic a {height: 1rem;font-size: .4rem;}

    .wide-logic a {padding: .1rem;margin: .1rem 0;}
}