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:#333;
  --clP:#909090;
  --bg1:#222;
  --bg2:#333;
  --bg3:#111;
}

html{overflow-y:scroll;width:100%;height:100%;}

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

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:30px;font-size:64px;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{float:left;height:60px;width:60px;margin:10px;}
#navmenu{float:right;padding:10px 0 15px 20px;font-size:80%}
#navmenu div{padding:8px;width:32px;height:32px;border-radius:24px;color:#888;background:transparent;margin-right:20px;}
#navmenu div a{color:#888;}
#navmenu div:hover{color:#888;background:var(--bg2);cursor:pointer;}

#searchingBox{position:absolute;padding:0;margin:20px auto;top:0;left:0;right:0;max-width:400px;background-color:var(--bg2);border-radius:30px;}
#searchingBox input{font-size:20px;width:70%;height:40px;border:none;background-color:var(--bg2);color:var(--cl2);}
#searchingBox input:focus{outline:none;color:var(--cl2);}

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

#page{
    min-height: calc(100vh - 133px);
	max-width:1600px;
	text-align:left;
	margin:0 auto;
	padding:0;
}

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

.boxes{clear:both;margin:10px 40px;}
.box{display:block;float:left;width:18%;margin:10px 2% 30px 2%;padding:20px 1.5%;background:var(--bg2);height:64px;}
.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);}

#cmenu{display:block;position:absolute;padding:20px;margin:0 auto;font-size:20px;letter-spacing:0.15em;text-transform:uppercase;font-weight:bold;text-align:center;top:0;left:0;right:0;max-width:400px;background:var(--bg3);border-radius:0 0 24px 24px;}
.cselected{border-bottom: 3px solid #555;}
#hmenu{display:none;margin:0 auto;width:90%;max-width:1500px;background:var(--bg3);/*border:1px solid #777;*/}
#hmenu #hdiv{/*display:flex;flex-direction:row;flex-wrap:wrap;*/columns:6;width:100%;padding:20px;}
#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{text-align:center;margin:20px 0;}
#submitBtn a{padding:5px 18px 7px 18px;font-size:18px;border-radius:16px;color:#eee;background:#333;}
#submitBtn a:hover{background:#000;}

footer{clear:both;position:relative;margin-top:-48px;border-top:1px solid var(--clHomeH1);font-size:14px;height:48px;display:flex;justify-content:space-between;flex-wrap:wrap;}
footer div{margin:14px 10px 0 10px;}
footer a{color:var(--cl3);}
footer span{color:var(--clP);}
footer a, footer span{display:block;float:left;margin:0 10px;}


@media (max-width:1200px){
    .box{width:25%;margin:10px 2% 30px 2%;padding:20px 2%;height:64px;}
    #cmenu{margin-top:80px;border-radius:24px;}
    #hmenu #hdiv{columns:5;}
}
@media (max-width:900px){
    .not-mobile{display:none}
    header{padding:10px;height:110px;}
    .index h1{font-size:50px;}
    .boxes{margin:10px 20px;}
    .box{width:42%;margin:10px 2% 30px 2%;padding:20px 2%;height:64px;}
    #cmenu{font-size:18px;padding:15px;margin-top:100px;}
    /*#hmenu #hdiv a{width:19%;}*/
    #hmenu #hdiv{columns:4;}
    #searchingBox{margin-top:80px;}
    #page{min-height:calc(100vh - 140px);}
}
@media (max-width:700px){
    #hmenu #hdiv{columns:3;}
}
@media (max-width:500px){
    header{padding:5px 10px;}
	#logo{width:48px;height:48px;}
	#navlogo{height:48px;width:48px;margin:6px 0 0 6px;}
	#navmenu{padding:3px 0 0 0;}
	#navmenu div{margin-right:5px;}
    #cmenu{letter-spacing:0.06em;margin:100px 20px 0 20px;}
    .box{width:90%;margin:10px 0 20px 0;padding:20px 5%;height:64px;}
    #hmenu{margin:30px auto 0 auto;}
    #hmenu #hdiv{padding:10px;columns:2;}
    /*#hmenu #hdiv a{width:27%;}*/
}