:root {
     	--light: #faf8f8;
     	--dark: #141021;
     	--navy: #284b63;
     	--olive: #84a59d;
     	--salmon: #f28482;
     	--gray: #4e4e4e;
     	--lightgray: #747474;
     	--outlinegray: #dadada;
     	--lt-colours-light: var(--light) !important;
     	--lt-colours-lightgray: var(--lightgray) !important;
     	--lt-colours-dark: var(--navy) !important;
     	--lt-colours-secondary: var(--olive) !important;
     	--lt-colours-gray: var(--outlinegray) !important;
     	--invert-filter: invert(0) hue-rotate(0)
     }

     [saved-theme=dark] {
     	--light: #1c1b22 !important;
     	--dark: #fbfffe !important;
     	--navy: #75a1bf !important;
     	--olive: #84a59d !important;
     	--salmon: #f58382 !important;
     	--gray: #c4c4c4 !important;
     	--lightgray: #292633 !important;
     	--outlinegray: #343434 !important;
     	--invert-filter: invert(97%) hue-rotate(195deg) grayscale(0.4) !important;
     }

     html {
     	scroll-behavior: smooth;
     }

     body {
     	margin: 0;
     	height: 100vh;
     	width: 100vw;
     	overflow-x: hidden;
     	background-color: var(--light);
     }

     h1 {
     	font-family: source sans pro;
     	font-size: 4em;
     	color: var(--dark);
     	margin-bottom: 0;
     }

     h2 {
     	font-family: source sans pro;
     	font-size: 3em;
     	color: var(--dark);
     }

     h3 {
     	font-family: roboto mono;
     	margin: 0;
     	font-size: 1em;
     	color: var(--dark);
     }

     a {
     	color: var(--olive);
     	transition: all .2s ease;
     }

     ul {
     	font-family: source sans pro, sans-serif;
     	margin-top: 0;
     	padding-left: 1.5em;
     }

     p,
     ul {
     	display: block;
     	color: var(--gray);
     	font-family: source sans pro, sans-serif;
     	font-size: 1.1em;
     	line-height: 1.2;
     }

     .lt-card {
     	margin: 0 !important;
     	padding: 0 0 0 1em !important;
     }
     
     .mt-15 {
        margin-top: 15px;
     }

     .hover {
     	color: var(--dark);
     	text-decoration: none;
     	opacity: .6;
     	z-index: 1;
     	transition: 300ms;
     }

     .hover::after {
     	transition: 300ms;
     	height: 18px;
     	content: "";
     	position: absolute;
     	background-color: var(--olive);
     	opacity: .5;
     	z-index: -1;
     	width: 0%;
     	right: 5px;
     	bottom: 5px
     }

     #landing-container {
     	position: relative;
     	width: 100vw;
     	height: 100vh
     }

     #landing-container>#landing-overlay {
     	position: absolute;
     	z-index: 9999 !important;
     	background-color: #0000 !important;
     	top: 30%;
     	height: 60%
     }

     @media all and (max-width:450px) {
     	#landing-container>#landing-overlay {
     		overflow: hidden;
     		left: 10vw !important;
     		padding: 0;
     	}
     }

     #landing-container>canvas {
     	position: absolute;
     	width: 100vw;
     	height: 100vh;
     }

     #main-landing>h1 {
     	animation: fadeIn ease .6s;
     	opacity: 0;
     	animation-fill-mode: forwards;
     	animation-delay: .4s;
     }

     @media all and (max-width:450px) {
     	#main-landing>h1:nth-child(2) {
     		margin-top: 15vh;
     	}
     }

     #main-landing>ul>li:nth-child(1) {
     	animation: fadeIn ease .6s;
     	opacity: 0;
     	animation-fill-mode: forwards;
     	animation-delay: 1.3s;
     }

     #main-landing>ul>li:nth-child(2) {
     	animation: fadeIn ease .6s;
     	opacity: 0;
     	animation-fill-mode: forwards;
     	animation-delay: 1.4s;
     }

     #main-landing>ul>li:nth-child(3) {
     	animation: fadeIn ease .6s;
     	opacity: 0;
     	animation-fill-mode: forwards;
     	animation-delay: 1.5s;
     }

     #main-landing>ul>li:nth-child(4) {
     	animation: fadeIn ease .6s;
     	opacity: 0;
     	animation-fill-mode: forwards;
     	animation-delay: 1.6s;
     }

     #start-button {
       background-color: #7EC0EE;
       border: none;
       border-radius: 4px;
       color: white;
       font-size: 24px;
       padding: 15px 70px;
       text-align: center;
       display: inline-block;
       cursor: pointer;
       margin-top: 20px;
       animation: fadeIn ease .6s;
       opacity: 0;
       animation-fill-mode: forwards;
       animation-delay: 1.8s;
     }

     @keyframes fadeIn {
     	0% {
     		opacity: 0;
     	}
     	100% {
     		opacity: 1;
     	}
     }

     #sub-nav {
     	list-style: none;
     	padding-left: 0;
     	margin: 0;
     }

     #sub-nav>li {
     	display: inline-block;
     	font-family: roboto mono, monospace;
     	font-size: 1em;
     	padding-top: .5em;
     	font-weight: 400;
     	color: var(--dark);
     }

     #sub-nav>li>a {
     	padding-right: .5em;
     }

     .col1 {
     	color: var(--dark);
     }

     .col2 {
     	color: var(--navy);
     }

     .col3 {
     	color: var(--olive);
     }

     .col4 {
     	color: var(--salmon);
     }

     .rotating-text {
     	overflow: hidden;
     	animation: fadeIn ease .6s;
     	opacity: 0;
     	animation-fill-mode: forwards;
     	animation-delay: .8s;
     }

     @media all and (max-width:450px) {
     	.rotating-text {
     		height: 2em;
     	}
     }

     .rotating-text>h1 {
     	display: inline-flex;
     	margin: 0;
     	vertical-align: top;
     }

     .rotating-text>h1>.word {
     	position: absolute;
     	display: flex;
     	opacity: 0;
     	overflow: hidden;
     	padding-bottom: .12em;
     }

     .rotating-text>h1>.word>.letter {
     	transform-origin: center center .8em;
     }

     .rotating-text>h1>.word>.letter.out {
     	transform: rotateX(90deg);
     	transition: .32s cubic-bezier(0.6, 0, 0.7, 0.2);
     }

     .rotating-text>h1>.word>.letter.in {
     	transition: .32s ease;
     }

     .rotating-text>h1>.word>.letter.behind {
     	transform: rotateX(-90deg);
     }

     .ext-ref {
     	display: block;
     	margin-left: 1.5em;
     	font-weight: 700;
     	font-family: roboto mono;
     }

     ul.lt-hl {
     	font-family: source sans pro;
     	margin-bottom: 1em;
     }

     #contact_buttons a {
     	font-family: roboto mono;
     	font-weight: 700;
     	font-size: 1em;
     	color: var(--navy);
     	padding: 0 .5em 3em;
     }

     .img-container {
     	position: relative;
     	margin-top: 2em;
     	margin-left: 3em;
     	min-height: 256px;
     }

     @media all and (max-width:450px) {
     	.img-container {
     		margin-left: 0;
     	}
     }

     .img-container>.me {
     	filter: grayscale(40%);
     	max-height: 240px;
     	max-width: 100%;
     	border-radius: 5px;
     	position: absolute;
     	left: 130px;
     	top: -40px;
     	z-index: 999;
     }
     
     .img-container>.me2 {
     	filter: grayscale(40%);
     	max-height: 180px;
     	max-width: 100%;
     	border-radius: 5px;
     	position: absolute;
     	background: none;
     	left: 330px;
     	top: 0px;
     	z-index: 999;
     }

     .img-container>.deco {
     	background-color: var(--olive);
     	-webkit-mask: url(res/deco.svg)no-repeat center mask: url(res/deco.svg)no-repeat center;
     	-webkit-mask-size: contain;
     	mask-size: contain;
     	position: absolute;
     	width: 180px;
     	height: 240px;
     	top: -50px;
     	left: 115px;
          border-radius: 5px;
     }
     
     .img-container>.deco2 {
         background-color: var(--navy);
     	mask-size: contain;
     	position: absolute;
     	width: 249px;
     	height: 180px;
     	top: -10px;
     	left: 344px;
          border-radius: 5px;
     }

     @media all and (max-width:450px) {
     	.img-container>.deco {
     		width: 210px;
     		height: 150px;
     		left: 140px;
     	}
     }

     .img-container>div>.highlight {
     	z-index: 5;
     	position: absolute;
     	top: 100px;
     	left: 300px;
     }

     @media all and (max-width:450px) {
     	.img-container>div>.highlight {
     		left: 0;
     		width: 100%;
     		top: 220px;
     	}
     	.img-container>div>.highlight code {
     		font-size: .6em !important;
     	}
     }

     .img-container>div>.highlight>div {
     	padding: .2em 1em;
     	border-radius: 4px;
     }

     .img-container>div>.highlight code {
     	font-family: Roboto Mono;
     	font-size: .8em;
     }

     #about:hover .me,
     #about:hover .deco,
     #about:hover .highlight-container {
     	filter: grayscale(0%);
     }

     #about p:first-of-type {
     	margin-top: 0;
     }

     body[data-aos-easing=custom] [data-aos],
     [data-aos][data-aos][data-aos-easing=custom] {
     	transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
     }

     .gh-chart {
     	filter: var(--invert-filter);
     	width: 100%;
     	margin-bottom: 2em;
     }

     .lt-content-column:hover h2 .hover {
     	opacity: 1;
     }

     .lt-content-column:hover h2 .hover::after {
     	width: 100%;
     }

     .lt-content-column:hover .side-header::before {
     	width: 180px;
     }

     .side-header-container {
     	margin-top: 2em;
     }
    

     .side-header {
     	position: absolute;
     	opacity: .3;
     	font-size: .8em;
     	transition: opacity 2s cubic-bezier(0.25, 0.8, 0.25, 1);
     	transform-origin: top left;
     	transform: translateX(-2em)rotateZ(90deg)rotateZ(180deg)translateX(-100%);
     }

     /*.side-header::before {*/
     /*	height: 100%;*/
     /*	position: absolute;*/
     /*	width: 0;*/
     /*	display: inline-block;*/
     /*	transform: translateY(-0.5em);*/
     /*	border-bottom: 3px solid var(--gray);*/
     /*	color: var(--gray);*/
     /*	transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1);*/
     /*	transition-delay: .3s;*/
     /*	content: '';*/
     /*	right: calc(100% + 0.5em);*/
     /*}*/

     .lt-card {
     	padding: .25em 1em;
     	margin: .5em 0;
     	border-radius: 5px;
     	background-color: var(--lt-colours-light);
     	border: 1px solid var(--lt-colours-gray);
     }

     .lt-hover {
     	transition: all .5s cubic-bezier(0.25, 0.8, 0.25, 1);
     }

     .lt-hover:hover {
     	box-shadow: 0 14px 28px rgba(27, 33, 48, .18), 0 10px 10px rgba(27, 33, 48, .16) !important;
     }

     .lt-shadow {
     	box-shadow: 0 14px 28px rgba(27, 33, 48, .06), 0 10px 10px rgba(27, 33, 48, .02);
     }

     ul.lt-hl {
     	list-style: none;
     	padding: 0;
     }

     ul.lt-hl>li {
     	display: inline-block;
     	border-style: none;
     	font-size: .9em;
     	margin-right: 3px;
     	padding: .3rem;
     	border-radius: 2px;
     	color: var(--lt-colours-light);
     	background-color: var(--lt-colours-secondary);
     	margin-bottom: .2em
     }

     .lt-flex-col {
     	display: flex;
     	flex-direction: column
     }

     .lt-flex-row {
     	display: flex;
     	flex-direction: row
     }

     .lt-content-column {
     	padding: 20px 20vw
     }
     
     .test-content-column {
         padding: 20px 20vw
     }

     .lt-centre {
     	text-align: center
     }

     .lt-flex-50 {
     	flex: 0 0 50%
     }

     .lt-flex-25 {
     	flex: 0 0 25%
     }

     .lt-flex-33 {
     	flex: 0 0 33%
     }

     .lt-flex-66 {
     	flex: 0 0 66%
     }

     .lt-flex-centre {
     	justify-content: center
     }
     
     .example-images, .side-by-side {
         text-align: center;
         margin-top: 15px;
     }
     
     .example-images img {
         width: 60%;
         border-radius: 5px;
         border: var(--outlinegray) solid 1px;
     }
     
     .side-by-side img {
         width: 45%;
         border-radius: 5px;
         border: var(--outlinegray) solid 1px;
     }
     
     .separator-div {
         height: 15px;
     }

     @media screen and (max-width:1440px) {
     	.short-desc {
     		display: None
     	}
     	#bio .lt-flex-row {
     		flex-direction: column!important
     	}
     }

     .lang_bar {
     	position: relative;
     	flex: 0 0 .8em;
     	float: right
     }

     @media all and (max-width:450px) {
     	.lang_bar {
     		flex: 0 0 .6em!important
     	}
     }

     .lang_bar>.bar_container {
     	border-top-right-radius: 4px;
     	border-bottom-right-radius: 4px;
     	overflow: hidden;
     	height: 100%;
     	z-index: 10
     }

     .lang_bar>.tooltiptext {
     	font-family: source sans pro, sans-serif;
     	white-space: nowrap;
     	visibility: hidden;
     	opacity: 0;
     	color: var(--dark);
     	text-align: center;
     	border-radius: 3px;
     	writing-mode: vertical-rl;
     	text-orientation: mixed;
     	position: absolute;
     	top: 50%;
     	transform: translate(5em, -50%);
     	z-index: 1;
     	transition: all .2s ease
     }

     @media all and (max-width:450px) {
     	.lang_bar>.tooltiptext {
     		display: None
     	}
     }

     .lang_bar:hover>.tooltiptext {
     	visibility: visible;
     	opacity: 1;
     	margin-left: -2em
     }

     ul.project_list {
     	padding: 0
     }

     .accordion {
     	margin: 1rem 0;
     	padding: 0;
     	list-style: none
     }

     .accordion .accordion-arrow {
     	float: right;
     	height: 7px;
     	min-width: 7px;
     	margin-right: 1rem;
     	margin-left: auto;
     	vertical-align: middle;
     	border-right: 2px solid;
     	border-bottom: 2px solid;
     	border-color: var(--dark);
     	transform: rotate(45deg)translateY(0.25em);
     	transition: transform .2s ease-in-out
     }

     .accordion .accordion_body.is-active .accordion-arrow {
     	transform: rotateX(180deg)rotateZ(45deg)translateY(-3.5px)translateX(-7px)
     }

     .accordion .accordion_body {
     	width: 100%;
     	padding: 1.3em .5em
     }

     @media all and (max-width:450px) {
     	.accordion .accordion_body {
     		padding: .8em!important
     	}
     }

     .accordion .accordion_body>.accordion-panel {
     	display: none
     }

     .accordion .accordion_body>.accordion-panel ul.lt-hl {
     	margin: 0
     }

     .accordion .accordion_body>.proj_desc>.accordion-arrow {
     	margin-left: .5em
     }

     .accordion .accordion_body>.proj_desc>a {
     	font-family: roboto mono;
     	font-weight: 700;
     	font-size: .9em;
     	color: var(--navy);
     	padding-right: 1em
     }

     @media all and (max-width:450px) {
     	.accordion .accordion_body>.proj_desc>a {
     		padding-right: .5em!important;
     		font-size: .7em!important;
     		transform: translateY(0.15em)
     	}
     }

     .accordion .accordion_body>.proj_desc>.project-title {
     	white-space: nowrap;
     	font-family: source sans pro;
     	font-weight: 600;
     	padding-right: .3em
     }

     .accordion .accordion_body>.proj_desc>.short-desc {
     	width: auto!important;
     	white-space: nowrap;
     	margin: 0
     }

     .accordion .accordion_body>.proj_desc>.spacer {
     	flex: 25%
     }

     .accordion .accordion_body>.job-info>.company-logo {
     	width: 40px;
     	height: 40px;
     	border-radius: 3px;
     	margin-right: 1em
     }

     @media all and (max-width:450px) {
     	.accordion .accordion_body>.job-info>.company-logo {
     		width: 30px!important;
     		height: 30px!important
     	}
     }

     .accordion .accordion_body>.job-info>.accordion-arrow {
     	margin-top: 1em
     }

     @media all and (max-width:450px) {
     	.accordion .accordion_body>.job-info>.accordion-arrow {
     		margin-top: .5em
     	}
     }

     .accordion .accordion_body>.job-info h2 {
     	font-weight: 600;
     	font-size: 1.2em;
     	font-family: source sans pro;
     	margin: 0
     }

     @media all and (max-width:450px) {
     	.accordion .accordion_body>.job-info h2 {
     		font-size: 1em;
     		transform: translateY(0.2em)
     	}
     }

     .accordion .accordion_body>.job-info p {
     	font-weight: 400;
     	color: var(--gray);
     	font-size: .9em;
     	font-family: roboto mono;
     	margin: 0
     }

     @media all and (max-width:450px) {
     	.accordion .accordion_body>.job-info p {
     		display: none
     	}
     }

     .mobile-only {
     	display: None
     }

     @media all and (max-width:450px) {
     	.mobile-only {
     		display: inline-block!important
     	}
     	h1 {
     		font-size: 2em!important;
     	}
     	h3 {
     		font-size: 1em!important;
     	}
     	p {
     		font-size: 1em!important;
     	}
     	.mobile-hide {
     		display: none !important;
     	}
     	#about,
     	#experience,
     	#projects,
     	#otherprojects{
     		padding: 0 5vw 30px!important;
     	}
     }

     .darkmode {
     	text-align: right;
     	padding: 2em;
     	animation: fadeIn ease .6s;
     	opacity: 0;
     	animation-fill-mode: forwards;
     	animation-delay: 2s;
     }

     .darkmode>.toggle {
     	display: none;
     	box-sizing: border-box;
     }

     .darkmode>.toggle:checked+.toggle-button:after {
     	left: 50%;
     }

     .darkmode>.toggle+.toggle-button {
     	box-sizing: border-box;
     	outline: 0;
     	display: inline-block;
     	width: 3em;
     	height: 1.5em;
     	position: relative;
     	cursor: pointer;
     	border: 2px solid var(--gray);
     	user-select: none;
     	padding: 2px;
     	transition: all .2s ease;
     	border-radius: 2em;
     }

     .darkmode>.toggle+.toggle-button:after,
     .darkmode>.toggle+.toggle-button:before {
     	position: relative;
     	display: block;
     	box-sizing: border-box;
     	content: "";
     	width: 50%;
     	height: 100%;
     }

     .darkmode>.toggle+.toggle-button:before {
     	display: none;
     }

     .darkmode>.toggle+.toggle-button:after {
     	left: 0;
     	transition: all .2s ease;
     	background: var(--gray);
     	content: "";
     	border-radius: 1em;
     }

     .darkmode #dayIcon {
     	position: relative;
     	width: 20px;
     	height: 20px;
     	top: -1.5px;
     	margin: 0 7px;
     	fill: var(--gray);
     }

     .darkmode #nightIcon {
     	position: relative;
     	width: 18px;
     	height: 18px;
     	top: -2px;
     	margin: 0 7px;
     	fill: var(--gray);
     }