html, body, div, span, object, h1, h2, h3, p, blockquote, pre,
em, img, strong, b, i, ol, ul, li, fieldset, article, section, form, label {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

[data-theme=light] {
  --cl1:#000;
  --cl2:#222;
  --cl3:#555;
  --cl4:#888;
  --clHomeH1:#e0e0e0;
  --clP:#777;
  --bg1:#eee;
  --bg2:#fff;
  --bg3:#ddd;
}
[data-theme=dark] {
  --cl1:#fff;
  --cl2:#ddd;
  --cl3:#c0c0c0;
  --cl4:#888;
  --clHomeH1:#405264;
  --clP:#909090;
  --bg1:#131a2b;
  --bg2:#223054;
  --bg3:#111;
}

html{width:100%;height:100%;}

* {
        scrollbar-width: thin;
        scrollbar-color: var(--bg1) var(--bg2);
    }

    /* Works on Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
        width: 12px;
    }

    *::-webkit-scrollbar-track {
        background: var(--bg2);
    }

    *::-webkit-scrollbar-thumb {
        background-color: var(--bg1);
        border-radius: 20px;
        border: 3px solid var(--bg2);
    }

*::-webkit-scrollbar-button {
    display:none;
   height: 0;
   width: 0
}

::-moz-scrollbar-button, ::-webkit-scrollbar-button {
  width: 0px;
}

a{color:var(--cl3);text-decoration:none;}
a:hover{color:var(--cl1);}
.dmode{color:var(--cl3);cursor:pointer;}
.dmode:hover{color:var(--cl1);}

body{
	font-family:'Segoe UI','Roboto',arial,sans-serif;
	width:100%;
	text-align:center;
	background-color:var(--bg1);
}

body::-webkit-scrollbar {
  display: none;
}

h1{font-size:200%;margin-bottom:10px;}
.index h1{padding-top:6px;text-transform:lowercase;font-style:italic;letter-spacing:0;text-align:center;margin:0 30px;font-size:80px;color:var(--clHomeH1);}

h2{margin:0;padding:6px 8px;font-size:120%;text-transform:uppercase;color:#000;padding:30px 10px;margin:0 40px;letter-spacing:0.15em;}

header{
	margin:0 0 10px 0;
	padding:12px 20px 20px 20px;
	font-size:26px;
    height:80px;
}

#navlogo{position:fixed;right:216px;top:-4px;z-index: 2;height:60px;width:60px;}
#bmenu{position:fixed;display:none;right:50px;top:10px;}

#searchingBox{padding:0;margin:10px auto;max-width:210px;background-color:var(--bg1);border-radius:30px;}
#searchingBox input{font-size:20px;width:55%;height:40px;border:none;background-color:var(--bg1);color:var(--cl2);}
#searchingBox input:focus{outline:none;color:var(--cl2);}

.open {
    display:flex !important;
}

#logo{
    display:block;
    margin:0 auto;
    background:url(/assets/500tools.png) no-repeat top left;
    background-size:contain;
    width:60px;
    max-width:100%;
    height:60px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    color:transparent !important;
    vertical-align:middle;
}

#page{
    max-width:1680px;
	text-align:left;
	margin:0 240px 0 0;
	padding:52px 0 0 0;
}

img {
    aspect-ratio: attr(width) / attr(height);
}

.boxes{clear:both;display:flex;flex-wrap:wrap;justify-content:center;margin:10px 40px;}
.box{display:block;float:left;width:18%;max-width:340px;margin:10px 2% 30px 2%;padding:20px 1.5%;background:var(--bg2);height:64px;border-radius:8px;}
.shadow{
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.shadow:hover{
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.box_pic{float:left;text-align:left;width:80px;}
.box_pic img{width:64px;height:64px;margin:0 auto;border-radius:16px;}
.box_txt span{display:block;height:26px;overflow:hidden;font-weight:bold;}
.box_txt p{color:var(--clP);font-size:80%;height:50px;overflow:hidden}
.box_info{position:absolute;margin-top:12px;font-size:10px;color:var(--clP);}

.cselected{border-bottom: 3px solid #555;}
#hmenu{display:flex;flex-direction:column;width:240px;position:fixed;background:var(--bg3);right:0;top:0;bottom:0;}
#hmenu #hdiv{/*display:flex;flex-direction:row;flex-wrap:wrap;*/margin-top:20px;padding:0 20px;direction:rtl;}
#hmenu #hdiv a{display:block;margin:0 1% 0 0;/*width:14%;*/color:var(--cl3);text-transform:uppercase;padding:6px 2%;font-size:80%;text-align:left;}
#hmenu #hdiv a.selected{color:var(--cl2);font-weight:bold}
#hmenu #hdiv a:hover{color:var(--cl2);font-weight:bold}

#submitBtn{display:flex;justify-content:center;width:180px;height:40px;margin-left:20px;margin-top:10px;}
#submitBtn a{height:40px;width:180px;font-size:18px;line-height:37px;border-radius:20px;color:#eee;background:#333;}
#submitBtn a:hover{background:#000;}
#submitBtn a p{font-size:14px;margin-top:5px;color:var(--clP);}

footer{clear:both;position:fixed;bottom:0;border-top:1px solid var(--clHomeH1);font-size:14px;width:100%;height:48px;background-color:var(--bg1);}
footer div{margin:14px 10px;}
footer a{color:var(--cl3);}
footer span{color:var(--clP);}
#dmenu{display:flex;flex-wrap:nowrap;justify-content:space-between;margin:10px 10px 10px 35px;}
#dmenu a, #dmenu span{display:block;float:left;margin:10px;}

#plus{display:flex;flex-wrap:wrap;flex-direction:column-reverse;}

@media (max-width:1600px){
    .index h1{font-size:70px;}
    .box{width:25%;margin:10px 2% 30px 2%;padding:20px 2%;height:64px;}
}
@media (max-width:1300px){
    .box{width:42%;margin:10px 2% 30px 2%;padding:20px 2%;height:64px;}
}
@media (max-width:1000px){
    #page{margin-right:auto;padding-top:80px;}
    #dmenu{margin:10px 12px;}
    #hmenu{display:none;}
    #navlogo{left:40px;}
    #bmenu{display:block;}
    .boxes{margin:10px 20px;}
    .index h1{font-size:50px;}
    #page{min-height:calc(100vh - 155px);}
}
@media (max-width:600px){
    #navlogo{left:20px;}
    #bmenu{right:35px;}
    .box{width:90%;margin:10px 0 20px 0;padding:20px 5%;height:64px;}
}