@import url('https://fonts.googleapis.com/css2?family=Honk&family=Nosifer&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --header-footer-bg-color: #ffffa0;
    --body-bg-color: #8effc1;
    --content-bg-color: white;
    --content-border: 1rem ridge #83e0ff;
    --main-border-color: #1d1d1d;
    --other-border-color: lightgrey;
    --header-text-color: black;
    --header-text-muted-color: #fafafa;
    --header-border-color: black;
    --main-text-color: black;
    --text-color-muted: #404040;
    --link-color: #00003d;
    --link-color-hover: #5340a7;
    --description-list-item-border-color: #0f0f0f;
    --description-list-item-border-left-color: #6a50e7;
    --max-width: 55rem;
    --width: 95%;
}

* {
    box-sizing: border-box;
}

.moon {
    width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    mask:  radial-gradient(circle at 75% 50%, #0000 33%, #000 0);
    -webkit-mask: radial-gradient(circle at 75% 50%, #0000 33%, #000 0);
    background: lightgrey;
    margin-right: .75rem;
    rotate: -26deg;
    float: right;
}

table {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    colgroup {
	display: none;
    }
    thead {
	display: flex;
	flex-direction: column;
	flex: 1 1 0px;
	tr {
	    display: flex;
	    flex-direction: row;
	    flex: 1 1 0px;
	    th {
		display: flex;
		flex-direction: column;
		flex: 1 1 0px;
	    }
	}
    }
    tbody {
	display: flex;
	flex-direction: column;
	flex: 1 1 0px;
	tr {
	    display: flex;
	    flex-direction: row;
	    flex: 1 1 0px;
	    td {
		display: flex;
		flex-direction: column;
		flex: 1 1 0px;		
	    }
	}
    }
    .org-left { text-align: left; }
}



/* Flex (grid/column/row styles) */
.flex {
    display: flex;
    flex-direction: row;
    flex: 1 1 0px;
    width: 100%;
    container-type: inline-size;
    container-name: flex;
    .row {
	display: flex;
	flex-direction: row;
	column-gap: 1rem;
	row-gap: 1rem;
	flex: 1 1 0px;
	.column {
	    display: flex;
	    flex-direction: column;
	    flex: 1 1 0px;
	}
    }
}

@container (max-width: 600px) {
    .flex, .flex .row, .flex .column, .flex .row .column {
	flex-direction: column;
	column-gap: 0;
    }
}

.indent-1 {
    text-indent: 1rem;
}
.indent-2 {
    text-indent: 2rem;
}
.mt-0 {
    margin-top: 0 !important;
}
h1 {
    font-size: 2.2rem;
    line-height: 2.2rem;
}
h2 {
    font-size: 1.5rem;
    line-height: 1.5rem;
    font-weight: 600;
}
h3 {
    font-size: 1.2rem;
    line-height: 1.2rem;
    font-weight: 500;
}
h4 {
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 400;
}
h5 {
    font-size: .9rem;
    line-height: .9rem;
    font-weight: 350;
}
h6 {
    font-size: .8rem;
    line-height: .8rem;
    font-weight: 300;
}
body {
    font-family: "Space Grotesk", Verdana, Arial, sans-serif;
    font-optical-sizing: auto;
    margin: 0;
    color: var(--main-text-color);
    min-height: 100dvh;
    background-color: var(--body-bg-color);
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    container-type: inline-size;
    .underline {
	text-decoration: underline;
    }
    img {
	max-width: 100%;
    }
    h1 {
	font-family: "Sour Gummy", Verdana, Arial, sans-serif;
    }
    p {
	font-size: 1rem;
	width: 100%;
	margin-top: 0;
	&:not(:has(.timestamp-wrapper)) {
	    text-indent: 2rem;	    
	}
    }
    div {
	display: flex;
	flex-direction: column;
    }
    
    #preamble {
	container-type: inline-size;
	container-name: preamble;
	width: 100%;
	border-bottom: var(--content-border);
	font-family: "Sour Gummy", Verdana, Arial, sans-serif;
	header {
	    width: 100%;
	    container-type: inline-size;
	    container-name: header;
	    padding: 2rem;
	    padding-bottom: 8rem;
	    border-bottom: 1px solid var(--other-border-color);
	    background-color: var(--header-footer-bg-color);
	    display: flex;
	    flex-direction: row;
	    justify-content: center;
	    /* Site Navigation */
	    nav {
		max-width: var(--max-width);
		width: 100%;
		ul {
		    list-style: none;
		    padding: 0;
		    margin: 0;
		    margin-top: 2rem;
		    display: flex;
		    flex-direction: row;
		    align-items: flex-end;
		    justify-content: space-between;
		    width: 100%;
		    li a::before {
			display: inline-flex;
			align-items: center;
			font-family: bootstrap-icons !important;
			font-style: normal;
			font-weight: 400 !important;
			font-variant: normal;
			text-transform: none;
			line-height: 1;
			vertical-align: -.125em;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		    }
		    #nav-home a::before {
			content: '\F776\00a0';
		    }
		    #nav-resume a::before {
			content: '\F3B9\00a0'
		    }
		    #nav-resources a::before {
			content: '\F467\00a0';
		    }
		    #nav-services a::before {
			content: '\F8F7\00a0';
		    }
		    #nav-blog a::before {
			content: '\F447\00a0';
		    }
		    #nav-contact ::before {
			content: '\F737\00a0';
		    }
		    /* The first list item contains the title and subtitle */
		    li:first-child {
			display: flex;
			flex-direction: column;
			flex: 1 1 0;
			h1 {
			    font-size: 2rem;
			    line-height: 2rem;
			    margin-bottom: .5rem;
			}
			h3 {
			    font-weight: normal;
			    
			    /* margin-left: calc(.75rem + 40px); */
			}
		    }
		    /* Everything besides the first list item is a nav-item */
		    li:not(:first-child) {
			list-style: none;
			display: flex;
			flex-direction: row;
			position: relative;
			a, a:visited, a:active {
			    position: relative;
			    display: flex;
			    flex-direction: row;
			    padding: .25rem .5rem;
			    &::after {
				position: absolute;
				content: ' ';
				bottom: 0;
				left: 0;
				width: 0%;
				display: inline-block;
				border-bottom: 1px solid var(--header-border-color);
				transition: width .2s ease-in-out;
			    }
			    &:hover {
				&::after {
				    /* Make the bottom border expand
                                           from 0% to 100% */
				    width: 100%;
				}
			    }
			}
		    }
		    a, a:visited, a:active {
			text-decoration: none;
			color: var(--header-text-color);
			display: flex;
			flex-direction: column;
		    }
		}
		h1, h2, h3, h4, h5, h6 {
		    color: var(--header-text-color);
		    margin-top: 0;
		    margin-bottom: 0;
		}
	    }
	}
    }
    #content {
	width: var(--width);
	max-width: var(--max-width);	
	margin: 2rem;
	container-type: inline-size;
	align-items: center;
	margin-top: -6rem;
	flex-grow: 1;
	#content-subcontainer {
	    width: 100%;
	    background-color: var(--content-bg-color);
	    border: var(--content-border);
	    border-left-width: 0;
	    border-right-width: 0;
	    border-radius: 2rem;
	    flex-grow: 1;
	    box-shadow: 5px -5px 5px 0px rgba(0, 0, 0, 0.23);

	    div {
		border: initial;
		border-left-width: initial;
		border-right-width: inital;
		border-radius: inital;
	    }
	    p:has(style) {
		display: none;
	    }
	    a, a:visited {
		transition: all .2s ease-in-out;
		color: var(--link-color);
		&:hover, &:active {
		    color: var(--link-color-hover);
		}
	    }
	    ul {
		margin-top: .5rem;
	    }
	    dl.card-descriptive-list {
		max-width: 100%;
		width: 100%;
		margin: 1rem 0;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		row-gap: 1rem;
		column-gap: 1rem;
		justify-content: left;
		.description-list-item {
		    border: 1px solid var(--description-list-item-border-color);
		    border-left: 4px solid var(--description-list-item-border-left-color);
		    transition: .2s ease-in-out;
		    padding: 2rem;
		    max-width: calc(50% - 1rem);
		    width: 100%;
		    dt {
			margin-bottom: 0.5rem;
			position: relative;
			a i.bi {
			    margin-left: .5rem;
			    position: absolute;
			    right: 0;
			}
		    }
		}
		dd {
		    margin-left: 0;
		    max-width: 20rem;
		}
	    }
	    /* Containers within the #content div */
	    & > div, & > p {
		padding-left: 2rem;
		padding-right: 2rem;
		padding-bottom: 2rem;
		margin-bottom: 0;
		width: 100%;
		max-width: var(--max-width);
	    }
	    /* First container should have top padding */
	    & > div:first-child, & > p:first-child, & > p:has(style) + div {
		padding-top: 2rem;
	    }
	    /* Main Content Header */
	    h1 {
		margin-bottom: 2rem;
		border-bottom: 1px solid var(--main-border-color);
		/* icons should float to the right within content title / main heading */
		i {
		    float: right;
		}
	    }
	    /* h2, h3, h4, h5, h6 { */
	    /* 	margin-top: 0; */
	    /* 	margin-bottom: 1rem */
	    /* } */
	    h4, h5, h6 {
		margin-top: 0;
	    }
	    img.content-image {
		aspect-ratio: 3/4;
		width: 80rem;
		max-width: 100%;
	    }
	    figure:has(img.content-image) {
		margin: 0;
	    }
	    /* Grab the first heading element in outline-2, if it has a timestamp wrapper */
	    .outline-2:has(.timestamp-wrapper) > * {
		display: flex;
		flex-direction: row;
		flex: 1 1 0px;
		align-items: flex-end;
		justify-content: space-between;
		& > a {
		    display: flex;
		    flex-grow: 1;
		}
		.timestamp-wrapper {
		    font-size: 1rem;
		    line-height: 1rem;
		}
	    }
	    p:has(+ .timestamp-pull-left) {
		margin-bottom: 0;
	    }
	    .timestamp-pull-left {
		display: inline-block;
		margin-left: -2rem;
	    }
	    .timestamp-wrapper {
		font-weight: normal;
		display: inline-block;
		padding: .5rem;
		border: var(--content-border);
		border-width: 2px;
		border-left-width: 1rem;
		border-top-right-radius: .5rem;
		border-bottom-right-radius: .5rem;
		border-top-color: black;
		border-right-color: black;
		border-bottom-color: black;
		border-top-style: solid;
		border-right-style: solid;
		border-bottom-style: solid;
		&::before {
		    content: '\F293';
		    margin-right: .5rem;
		    align-items: center;
		    font-family: bootstrap-icons !important;
		    font-style: normal;
		    font-weight: 400 !important;
		    font-variant: normal;
		    text-transform: none;
		    line-height: 1;
		    vertical-align: -.125em;
		    -webkit-font-smoothing: antialiased;
		    -moz-osx-font-smoothing: grayscale;		    
		}
	    }
	    figure {
		margin: 0;
		margin-bottom: 1rem;
		figcaption { display: none; }
	    }
	}
    }
    #postamble {
	width: 100%;
	background: var(--header-footer-bg-color);
	border-top: var(--content-border);
	footer {
	    width: 100%;
	    padding: 2rem;
	    text-align: center;
	    br {
		margin-bottom: .5rem;
	    }
	    a, a:visited {
		transition: all .2s ease-in-out;
		color: var(--link-color);
		&:hover, &:active {
		    color: var(--link-color-hover);
		}
	    }
	}
    }
}

@container (max-width: 1200px) {
    body {
	#preamble {
	    header {
		padding-top: 0;
		padding-bottom: 7rem;
		nav {
		    position: relative;
		    .moon {
			margin-right: 0;
			margin-left: 1rem;
			position: absolute;
			right: 0;
		    }
		}
	    }
	}
	#content {
	    dl.card-descriptive-list {
		.description-list-item {
		    padding: 1rem;
		    dd {
			max-width: 100%;
		    }
		}
	    }

	}
    }
}

/* Mobile View - max-width of 700px */
@container (max-width: 600px) {
    body {
	h1, h2, h3, h4, h5, h6 {
	    margin-bottom: .5rem;
	    &:first-child {
		margin-top: 0;
	    }
	}
	#preamble {
	    header {
		nav {
		    ul {
			flex-direction: column;
			align-items: flex-start;
			li:first-child {
			    width: 100%;
			    margin-bottom: .5rem;
			    h1 {
				width: 100%;
				span, .moon {
				    display: block;
				    float: right;
				}
				margin-bottom: .25rem;
			    }
			    h3 {
				margin-left: 0;
			    }
			}
			li:not(:first-child) {
			    margin-left: 0;
			    &:not(:last-child) {
				margin-bottom: .5rem;
			    }
			    a {
				min-width: 5rem;
			    }
			}
		    }
		}
	    }
	}
	#content {
	    #content-subcontainer {
		/* Content Sections that aren't last */
		& > div:not(:last-child) {
		    margin-bottom: 0;
		}
		/* all Content Sections */
		& > div {
		    padding: 1rem;
		    padding-top: 1rem;
		    padding-bottom: 1rem;
		    p:not(:last-child) {
			margin-bottom: .5rem;
		    }
		}
		/* First container should have reduced top padding */
		& > div:first-child {
		    padding-top: 1rem;
		}
		dl.card-descriptive-list {
		    row-gap: 0;
		    column-gap: 0;
		    .description-list-item {
			max-width: 100%;
		    }
		}
		img.content-image {
		    display: block;
		    width: 100%;
		    margin-right: initial;
		}
		.timestamp-pull-left {
		    margin-left: -1rem;
		}
	    }
	}
    }
}