/* :root
{
    --color1: #00f7ff;
    --color2: #0e1525;
    
    --color1: hsl(40 16% 27% / 1);
    --color2: hsl(40 100% 86% / 1);
} */




@media (prefers-color-scheme: light) {
	:root
	{
		--color1: hsl(220 16% 27% / 1);
		--color2: hsl(220 100% 86% / 1);
		--border-width: 1px; /*6px*/
	}
}

@media (prefers-color-scheme: dark)
{
	:root
	{
		--color1: hsl(236 100% 86% / 1);
		--color2: hsl(236 16% 27% / 1);
	}

}

:root
{
    --border-width: 1px; /*6px*/
}


*{
    font-family: sans-serif;
    color: var(--color1);
}

body
{
    display:flex;
    align-items: center;
    justify-content: center;
    margin:0px;
    background: var(--color2);
}

div#content
{
    /* border: 3px solid black; */
    width: 80vw;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

div.inner-content>h1
{
	user-select:none;
}

div.inner-content
{
    display:flex;
    flex-direction: row;
    flex-grow: 1;
    width: 100%;
    justify-content: center;
}

div#left
{
    height: 100%;
    width: 10%;
    border-top: var(--border-width) solid var(--color1);
    /* border-right: 1px solid transparent; */
    padding-right: 0;
    /* display: flex; */
    display: grid;
}

div#right
{
    height: 100%;
    width: 90%;
    border-left:var(--border-width) solid var(--color1);
    border-top:var(--border-width) solid var(--color1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1
{
    margin: 0;
    align-self: end;
    color: var(--color1);
    margin-left: auto;
    font-weight: normal;
}

ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

div#left a
{
    border:var(--border-width) solid var(--color1);
    padding:10px;
    /* width: 100%; */
    min-width: max-content;
    flex-grow: 1;
    color:var(--color1);
    text-decoration: none;
    background: var(--color2);
    /* transition: all 0.3s cubic-bezier(1, 0, 0, 1); */
    user-select:none;
}

div#left a:hover, a:hover
{
    background: var(--color1);
    color: var(--color2);
}
div#left a.active
{
	background: var(--color1);
	color: var(--color2);
	/* outline: solid var(--color1); */
	outline-offset: 10px;
	outline-width: 1px;
	/* padding-right: 0px; */
}

div.top a
{
    border:var(--border-width) solid var(--color1);
    padding:10px;
    /* width: 100%; */
    min-width: max-content;
    flex-grow: 1;
    color:var(--color1);
    text-decoration: none;
    background: var(--color2);
    /* transition: all 0.3s cubic-bezier(1, 0, 0, 1); */
    user-select:none;
}

div.top a:hover, a:hover
{
    background: var(--color1);
    color: var(--color2);
}
div.top a.active
{
	background: var(--color1);
	color: var(--color2);
	/* outline: solid var(--color1); */
	outline-offset: 10px;
	outline-width: 1px;
	/* padding-right: 0px; */
}



li
{
    /* margin: 10px; */
    display: flex;
    padding: 10px;
    transform: translateX(0.5px);
}


div.spacer
{
    width: 10%;
    border-right:var(--border-width) solid var(--color1);
    /* height: 100%; */
    min-width: 10%;
}

div.top
{
    flex-grow: 0;
    justify-content: left;
    /* padding-bottom: 0px; */
}

p
{
    max-width: 50%;
}


*.small
{
	font-size:small;
}

hr
{
border:none;

border-top:var(--border-width) solid var(--color1);

}

div#left li:has(.active) {
    border: 1px solid var(--color1);
    border-right-color: var(--color2);
    margin-right: -0.5px;
    /* outline: 1px solid var(--color2); */
    /* outline-offset: -1px; */
    margin-top: -1px;
    margin-left: -1px;
    margin-bottom: -1px;
    z-index: 9;
    border-right: 0px;
    background: var(--color2);
}

div.top li:has(.active) {
    border: 1px solid var(--color1);
    border-bottom-color: var(--color2);
    margin-bottom: -1px;
    /* outline: 1px solid var(--color2); */
    /* outline-offset: -1px; */
    margin-top: -1px;
    margin-left: -1px;
    margin-right: -1px;
    z-index: 9;
    border-bottom: 0px;
    background: var(--color2);
}

p.indent {
    max-width: none;
    padding-left: 26px;
    /*border-left: 1px solid;*/
    /*border-bottom: 1px solid;*/
    margin-top: 0px;
    margin-bottom: 0px;
}

div#right li {
    border-left: 1px solid;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid;
}

/*ul#projects a
{
margin-left:8px;
}*/

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

.footer
{
      margin-top: auto;
    margin-bottom: 10px;
}


div#left>h1 {
  
  text-orientation: upright;
  writing-mode: sideways-lr;
  }

div.top>ul {
    flex-direction: row;
    margin-left: -1px;
}



@media only screen and (orientation: portrait)
{
div#left>ul{display: none;}
div.top>h1{display: none;}
}

@media only screen and (orientation: landscape)
{
div.top>ul{display: none;}
div#left>h1{display: none;}
}

div#right {
}

ul#projects {
    max-width: 80%;
}