:root{--btn-nav-background-color:var(--btn-background-color,color-mix(in srgb,ButtonFace,#000));}
html,body{width:100%;  height:100%; background-color:Canvas; color:CanvasText; color-scheme:light dark;}
*, *::before, *::after{box-sizing:border-box;  margin:0; font-weight:normal;}
img,svg{-o-object-fit:contain;  object-fit:contain;  -o-object-position:center;  object-position:center;}
.no-fill{fill:none !important;}
.no-stroke{stroke:none !important;}
.btn.btn-nav{border:1px solid var(--btn-border-color,#919191);  cursor:pointer;  display:inline-block;  position:relative;  max-height:100%;  	max-width:100%; 	overflow:hidden; height:var(--btn-nav-height,1.3em);  width:var(--btn-nav-width,-moz-fit-content);  width:var(--btn-nav-width,fit-content);  padding:var(--btn-nav-padding,2%);  background-color:var(--btn-nav-background-color,ButtonFace);}
.btn{cursor:pointer;  display:inline-block;  position:relative;  box-sizing:border-box;}
.btn.btn-nav > svg{-o-object-fit:contain;  object-fit:contain;  -o-object-position:center;  object-position:center;  max-height:100%;  max-width:100%; overflow:hidden; width:100%; height:100%; vertical-align:top;}
.btn.square,.btn.square > *{aspect-ratio:1/1;  max-width:1.1rlh;max-height:1.1rlh;}
.btn.active{background-color:color-mix(in srgb, var(--btn-background-color,ButtonFace), rgba(100,150,100,0.5));}
.btn:focus-visible{z-index:2;  outline:1px solid rgb(110,110,255);  outline-offset:-2px;}
@media (pointer:fine){.btn:hover{background-color:color-mix(in srgb, var(--btn-background-color,ButtonFace), rgb(100,100,100));}
}
.btn:active{background-color:color-mix(in srgb, var(--btn-background-color,ButtonFace), rgb(150,150,150)) !important;}
table{border-collapse:collapse;}
div#projects > table :is(th,td){padding:0 !important;}
details summary{cursor:pointer;}
textarea{background-color:var(--vt-c-black);  color:var(--vt-c-text-dark-1);}
select{min-width:5ch;  background-color:var(--vt-c-black);  color:var(--vt-c-text-dark-1);}
input{background-color:var(--vt-c-black);  color:var(--vt-c-text-dark-1);}
textarea,input,select{border-color:rgba(153, 153, 153, 0.425);}
iframe{flex-grow:1;  border:none;}
.button, button{cursor:pointer;  border:0.1ch solid blue;  border-radius:0.5ch;  background-color:rgba(0, 0, 0, 0.5);  padding:2px 5px;  font-weight:bold;  white-space:nowrap;  box-sizing:border-box;  padding-block:1px;  padding-inline:6px;  align-items:flex-start;  text-align:center;}
.button:not(:hover), button:not(:hover){color:rgb(136, 212, 113);  box-shadow:0 1px 2px #5e5d5b;}
.button:hover, button:hover{color:yellow;  box-shadow:1ch;}
body{font-family:Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;  text-rendering:optimizeLegibility;  -webkit-font-smoothing:antialiased;  -moz-osx-font-smoothing:grayscale;}
a:link{color:rgb(187, 187, 187);}
a:visited{color:rgb(119, 119, 119);}
a:hover{color:hotpink;  box-shadow:1ch;}
a:active{color:blue;}
#hard-table tr th{background-color:teal;}
.clearfix:before, .clearfix:after{content:'';  display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
a{background-color:transparent;}
.hide{display:none !important;}
.img-mirror-vertical{transform:scaleX(-1);}
body, body#portfolio{position:relative;  display:grid !important;  grid-template-areas:'nav nav nav' 'sidebar-left main sidebar-right' 'sidebar-left main sidebar-right' 'footer footer footer';  grid-template-rows:min-content 1fr 1fr max-content;  grid-template-columns:max-content 1fr max-content;  max-width:100%;  max-width:100vw;  max-width:100dvw;  max-height:100%;  max-height:100vh;  max-height:100dvh;  overflow:hidden;}
:is(body,body#portfolio) > nav{border:none;  border-bottom:1px solid rgba(200,200,200,0.6);  padding:0 1ch;  background-color:rgba(0, 5, 80, 0.37);  position:relative;  grid-area:nav;  display:grid;  grid-template-columns:1fr 0 minmax(2rem,max-content);  grid-auto-columns:max-content;  grid-auto-flow:row;  width:100%;  max-width:100%;  overflow:hidden;  height:1.3em;  height:1.1lh;}
:is(:is(body,body#portfolio) > nav) > .nav-left,:is(:is(body,body#portfolio) > nav) > .nav-mid,:is(:is(body,body#portfolio) > nav) > .nav-right{position:relative;  display:flex;  flex-direction:row;  height:100%;  max-height:100%;  overflow:hidden;}
:is(:is(:is(body,body#portfolio) > nav) > .nav-left,:is(:is(body,body#portfolio) > nav) > .nav-mid,:is(:is(body,body#portfolio) > nav) > .nav-right) > *{height:100%;}
:is(:is(body,body#portfolio) > nav) > .nav-left{grid-column:1;  width:100%;}
:is(:is(body,body#portfolio) > nav) > .nav-mid{grid-column:2;  width:-moz-fit-content;  width:fit-content;}
:is(:is(body,body#portfolio) > nav) > .nav-right{grid-column:3;  margin-right:0;  margin-left:auto;  width:-moz-fit-content;  width:fit-content;}
:is(body,body#portfolio) > main{grid-area:main;  position:relative;  width:100%;  height:100%;  max-width:100%;  max-height:100%;  overflow:auto;}
:is(body,body#portfolio) > .sidebar-left{position:relative;  grid-area:sidebar-left;  display:grid;  grid-template-columns:repeat(10,max-content);}
:is(body,body#portfolio) > .sidebar-right{position:relative;  height:100%;  grid-area:sidebar-right;}
.absolute:is(:is(body,body#portfolio) > .sidebar-right){width:-moz-fit-content;  width:fit-content;  position:absolute;  right:0;  top:0;  z-index:9;}