:root{--color1:#f3dc1a;--color2:#292929;}body{padding:50px 0;background-color:var(--color2);}.container.login{max-width:500px;}.header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;}.header .logo{display:inline-block;user-select:none;}.header .logo img{max-width:100%;}.header .logo a{color:inherit;text-decoration:none;display:block;}.header .logo b{color:#fff;margin-left:10px;}.header .logo b span{font-size:9px;vertical-align:super;color:#f3dd18;}.header .logo b.big{font-size:25px;margin-left:20px;}.header .addProject{color:#fff;transition:0.2s;}.header .addProject a{color:inherit;display:block;text-decoration:none;}.header .addProject i{margin-right:5px;}.header .addProject b{font-size:18px;}.header .addProject:hover{color:var(--color1);}.area{background-color:#fff;padding:15px 25px;border-bottom:5px solid var(--color1);}.projects .box{border-bottom:1px solid #f2f2f2;padding:15px 0;display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;user-select:none;}.projects .box .left-area .t{font-size:25px;font-weight:bold;}.projects .box .left-area .t a{margin-left:5px;text-decoration:none;color:inherit;font-size:13px;position:relative;top:-3px;}.projects .box .left-area .dt{font-size:13px;color:#989898;}.projects .box .right-area a{box-shadow:0 0 20px 12px rgba(0, 0, 0, 0.03);padding:10px 30px;margin-left:10px;color:var(--color2);text-decoration:none;display:inline-block;transition:0.2s;position:relative;z-index:1;font-size:14px;}.projects .box .right-area a i{margin-right:3px;}.projects .box .right-area a:hover{background-color:var(--color2);color:#fff;}.projects .box:last-of-type{border-bottom:0;}.demos{border:1px solid #f2f2f2;padding:0 25px;}.demos .demo{position:relative;border-bottom:1px solid #f2f2f2;}.demos .demo .t{padding:20px 0;font-size:15px;font-weight:bold;cursor:pointer;position:relative;opacity:0.5;transition:0.2s;}.demos .demo .t b{font-weight:bold;}.demos .demo .t a{text-decoration:none;color:inherit;pointer-events:none;opacity:0;transition:0.2s;}.demos .demo .t:after{content:'\f107';font-family:'Font Awesome 5 Pro';font-weight:lighter;position:absolute;top:50%;font-size:35px;right:0;transform:translateY(-50%);}.demos .demo .d{display:none;padding-bottom:25px;}.demos .demo .d ul{padding:0;padding-left:20px;margin:0;}.demos .demo .d ul li{margin-bottom:5px;}.demos .demo .d ul li:last-child{margin-bottom:0;}.demos .demo:hover .t a{opacity:1;pointer-events:auto;}.demos .demo.active .t{opacity:1;}.demos .demo.active .t:after{content:'\f106';}.demos .demo.active .d{display:block;}.demos .demo:last-child{border-bottom:0;}