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;
  --cl5:#000;
  --cl6:#aaa;
  --clP:#777;
  --clBorder:#ccc;
  --clBorder2:#eaeaea;
  --clBorder3:#ccc;
  --clBorder4:#ddd;
  --clLink:blue;
  --bg1:/*#fcdca5*/#fff;
  --bg2:#fff;
  --bg3:#ddd;
  --bg4:#eee;
  --bg5:#fafafa;
  --bgRGB:rgb(246,245,244);
  --grad1:rgba(255,249,34);
  --grad2:rgba(255,0,128);
}
[data-theme=dark] {
  --cl1:#fff;
  --cl2:#ddd;
  --cl3:#c0c0c0;
  --cl4:#777;
  --cl5:#ccc;
  --cl6:#555;
  --clP:#909090;
  --clBorder:#3a3a3a;
  --clBorder2:#333;
  --clBorder3:#4a4a4a;
  --clBorder4:#404040;
  --clLink:#efffaa;
  --bg1:#222;
  --bg2:#333;
  --bg3:#111;
  --bg4:#222;
  --bg5:#222;
  --bgRGB:rgb(12,11,10);
  --grad1:rgba(120,120,120);
  --grad2:rgba(100,100,100);
}

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;*/
	font-family:'Segoe UI','Roboto',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size:15px;
	width:100%;
	text-align:center;
	color:var(--cl5);
	background-color:var(--bg5);
}

h2{margin:0;padding:6px 8px;font-size:120%;text-transform:uppercase;color:var(--cl5);padding:10px 0;margin:0;letter-spacing:0.12em;}

header{
    width:100%;
    background:var(--bg2);
	padding:12px 0;
	font-size:26px;
    height:48px;
    border-bottom:1px solid var(--clBorder);
}

#logo img{
    width:48px;
    height:48px;
    vertical-align:middle;
}

#page{
    display:flex;
    justify-content: center;
    max-width:1200px;
	text-align:left;
	margin:20px auto 0 auto;
	padding:0;
}

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

.tippy-tooltip.x-theme{color:#26323d;box-shadow:0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(36,40,47,.25),0 4px 4px -2px rgba(91,94,105,.15);background-color:#fff;border-radius:16px;padding:16px;}
.tippy-tooltip.x-theme[x-placement^=top] .tippy-arrow{border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent}
.tippy-tooltip.x-theme[x-placement^=bottom] .tippy-arrow{border-bottom:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent}
.tippy-tooltip.x-theme[x-placement^=left] .tippy-arrow{border-left:8px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.tippy-tooltip.x-theme[x-placement^=right] .tippy-arrow{border-right:8px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.tippy-tooltip.x-theme .tippy-backdrop{background-color:#fff}
.tippy-tooltip.x-theme .tippy-roundarrow{fill:#fff}
.tippy-tooltip.x-theme[data-animatefill]{background-color:initial}

.bio{}
.bio h1{font-size:28px;color:var(--cl1);}
.bio_pic{border-radius:50%;margin-bottom:12px;width:160px;}

.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);
}

#cmenu{display:block;padding:30px;margin:0 auto;font-size:20px;font-weight:bold;text-align:left;max-width:560px;}
#cmenu_profile{width:100%;font-weight:normal;display:flex;gap:50px;}

.projects-section{display:flex;flex-wrap:wrap;justify-content:center;margin:10px auto 50px auto;max-width:780px;}
.claimed{display:flex;max-width:320px;margin:20px;padding:10px;background:var(--bg2);border-radius:8px}
.claimed-og{display:flex;justify-content:center;align-items:center;border-radius:8px;width:100%;max-height:160px;aspect-ratio:2/1;object-fit:cover;margin-bottom:8px;background:var(--bg3);color:var(--cl6);font-weight:600;}

.socials{display:flex;margin:20px 0 10px 0;}
.socials a{margin-right:8px;}
.socials svg{width:24px;height:24px;}
.socials svg .cls-1{fill:var(--cl2);}
.socials svg .cls-1,.socials svg .cls-2{fill-rule:evenodd;}
.socials svg .cls-2{fill:var(--bg1);}

footer{clear:both;position:relative;/*margin-top:-48px;*/border-top:1px solid var(--clBorder);font-size:15px;background:var(--bg2);height:60px}
footer div{margin:20px 0;}
footer span{color:var(--cl5);}
footer a, footer span{display:block;float:left;margin:0 10px;}
footer .footer_main{display:flex;flex-wrap:wrap;justify-content:center;}

@media (max-width:580px){
    .bio_pic{width:100px;}
    #cmenu_profile{gap:30px}
}
@media (max-width:500px){
    body{font-size:14px}
    footer div{margin:12px 0;}
    footer a,footer span{margin:0 8px;}
}
/* ---- static pages (about, privacy, terms) ----
   additive only: new class names, no existing rule is touched */
.doc{flex:0 1 840px;max-width:840px;margin:20px 20px 60px 20px;padding:34px 38px 40px 38px;background:var(--bg2);border:1px solid var(--clBorder4);border-radius:10px;text-align:left;font-size:15.5px;line-height:1.65;color:var(--cl2);}
.doc h1{font-size:26px;color:var(--cl1);margin:0 0 6px 0;padding:0;}
.doc .sub{color:var(--cl3);font-size:14px;margin:0 0 24px 0;}
.doc h2{font-size:15px;text-transform:uppercase;letter-spacing:.08em;color:var(--cl1);font-weight:600;margin:28px 0 10px 0;padding:0 0 6px 0;border-bottom:1px solid var(--clBorder2);}
.doc h3{font-size:15.5px;color:var(--cl1);margin:18px 0 6px 0;padding:0;font-weight:600;text-transform:none;letter-spacing:0;}
.doc p{margin:0 0 12px 0;}
.doc ul{margin:0 0 12px 20px;padding:0;}
.doc li{margin:0 0 6px 0;}
.doc a{color:var(--clLink);}
.doc strong{color:var(--cl1);}
.doc table{border-collapse:collapse;width:100%;margin:0 0 16px 0;font-size:15px;}
.doc th,.doc td{text-align:left;padding:8px 12px 8px 0;border-bottom:1px solid var(--clBorder2);vertical-align:top;}
.doc th{width:200px;color:var(--cl4);font-weight:600;text-transform:uppercase;font-size:13px;letter-spacing:.04em;padding-top:10px;}
.doc .avatar{width:150px;height:150px;border-radius:50%;margin:0 0 16px 0;display:block;}
.doc .note{color:var(--cl4);font-size:13px;margin-top:10px;}
@media (max-width:680px){
    .doc{margin:12px 10px 40px 10px;padding:22px 18px 26px 18px;font-size:15px;}
    .doc th{width:130px;}
    .doc h1{font-size:22px;}
}