@charset "UTF-8";

* {
    box-sizing: border-box;
}

/* FONTS */

/* dm-mono-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 300;
  src: url('../assets/fonts/dm-mono-v16-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../assets/fonts/dm-mono-v16-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* dm-mono-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Mono';
  font-style: italic;
  font-weight: 300;
  src: url('../assets/fonts/dm-mono-v16-latin-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../assets/fonts/dm-mono-v16-latin-300italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* dm-mono-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/dm-mono-v16-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../assets/fonts/dm-mono-v16-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* dm-mono-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Mono';
  font-style: italic;
  font-weight: 400;
  src: url('../assets/fonts/dm-mono-v16-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../assets/fonts/dm-mono-v16-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* dm-mono-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  src: url('../assets/fonts/dm-mono-v16-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../assets/fonts/dm-mono-v16-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* dm-mono-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Mono';
  font-style: italic;
  font-weight: 500;
  src: url('../assets/fonts/dm-mono-v16-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../assets/fonts/dm-mono-v16-latin-500italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

:root {

    /* solarized */
    --base03:    #002b36;
    --base02:    #073642;
    --base01:    #586e75;
    --base00:    #657b83;
    --base0:     #839496;
    --base1:     #93a1a1;
    --base2:     #eee8d5;
    --base3:     #fdf6e3;
    --yellow:    #b58900;
    --orange:    #cb4b16;
    --red:       #dc322f;
    --magenta:   #d33682;
    --violet:    #6c71c4;
    --blue:      #268bd2;
    --cyan:      #2aa198;
    --green:     #859900;

	/* colours */
	--colorBackground: var(--base3);
    --colorBackgroundHighlight: var(--base2);

    --colorBorder: var(--base00);
    --colorBorderLight: var(--base1);
    --colorBorderDark: var(--base01);

    --colorText: var(--base00);
    --colorTextComment: var(--base1);
    --colorTextHighlight: var(--base01);
    --colorTextAccent: var(--cyan);

    --colorLink: var(--blue);

    /* colours dark */
	--colorBackgroundDark: var(--base03);
    --colorBackgroundDarkHighlight: var(--base02);

    --colorTextDark: var(--base0);
    --colorTextDarkComment: var(--base01);
    --colorTextDarkHighlight: var(--base1);

	/* fonts */
	--fontText: 'DM Mono', monospace;

    /* sizes */
    --gapSize: 16px;
    --sidebarWidth: 160px;
    --sidebarCalc: calc(var(--gapSize) + var(var(--sidebarWidth)))
}

body {
    margin: 0px;
	height: 100vh;
    
	display: flex;
	flex-flow: column;
	justify-content: space-between;

	font-family: var(--fontText);

	background-color: var(--colorBackground);
	color: var(--colorText);
}

#container-flex {
    margin: var(--gapSize);
    gap: var(--gapSize);
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.mobile-only {
	display: none;
}

a {
    color: var(--colorLink)
}

b {
    color: var(--colorTextAccent);
}

img {
    max-width: 100%;
    display:block;
}

details summary {
    list-style-type: '';
}

details[open] summary {
    list-style-type: '';
}

summary::after {
    content: ' +';
    right: 0px;
}
    
details[open] summary::after {
    content: " -";
}

span.email > span:nth-child(1){
	display: none;
}

header { 
    background-color: var(--colorBackgroundHighlight);
    margin:0px;
}

#sidebar {
    @media (max-width:600px) {
        width: 100%;
        order: 2;
    }
    margin: 0px;
	min-width: var(--sidebarWidth);
}

nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

nav summary, nav .navlink {
    background-color: var(--colorBackgroundHighlight);
    border: 1px solid;
    border-color: var(--colorBorder);
    padding: 0.2em 0.4em;
}

nav summary:hover, nav .navlink:hover {
    background-color: var(--colorBackground);
    cursor: pointer;
}

nav a {
    display: block;
    text-decoration: none;
    color: var(--colorText);
}

nav ul {
    margin: 0px;
}

nav ul > li {
    margin-left:-24px;
    list-style-type: 'ㄴ';
    margin-top: 8px;
}

nav li > a {
    padding: 3px 6px;
}

nav li > a:hover {
    background-color: var(--colorBackgroundHighlight);
}

main {
    @media (max-width:600px) {
        width: 100%;
    }
    margin: 0px auto;
    width: calc(100% - var(--sidebarCalc));
}

#about-me {
    display: flex;
    width: 100%;
}