:root {
			--light-color: #f1f1ef;
			--dark-color: #0e212f;
			--dark-bg: #234157;
			--viewer-container-height: 0;
			--pdfViewer-padding-bottom: 0;
			--page-margin: 1px auto -8px;
			--page-border: 9px solid transparent;
			--spreadHorizontalWrapped-margin-LR: -3.5px;
			--loading-icon-delay: 400ms
		}

		@font-face {
			font-family: FineArtSansSerifRegular;
			font-style: normal;
			font-weight: 400;
			src: url(FineArtSansSerifRegular.woff2) format("woff2"), url(FineArtSansSerifRegular.woff) format("woff");
			font-display: swap
		}

		@font-face {
			font-family: Francesca;
			font-style: normal;
			font-weight: 400;
			src: url(Francesca.woff2) format("woff2"), url(Francesca.woff) format("woff");
			font-display: swap
		}

		@font-face {
			font-family: EvolveSans;
			font-style: normal;
			font-weight: 400;
			src: url(EvolveSans.woff2) format("woff2"), url(EvolveSans.woff) format("woff");
			font-display: swap
		}

		html {
			margin: 0;
			padding: 0;
			font-family: FineArtSansSerifRegular, Arial, sans-serif;
			text-align: center;
		}
		html .home {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		.logo {
			margin: 30px 0;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			height: 100%;
		}

		.logo img {
			width: 200px;
		}

		h1 {
			font-weight: 400;
			font-size: 32px;
			line-height: 2;
			font-family: FineArtSansSerifRegular;
		}
		h2 {
			font-weight: 400;
			font-size: 26px;
			line-height: 2;
			font-family: FineArtSansSerifRegular;
		}
		h3 {
			font-weight: 400;
			font-size: 22px;
			line-height: 2;
			font-family: FineArtSansSerifRegular;
		}
		h4 {
			font-weight: 400;
			font-size: 32px;
			line-height: 1;
			font-family: Francesca;
			margin: 0 0 24px 0;
		}
		h5 {
			font-weight: 400;
			font-size: 28px;
			line-height: 1;
			font-family: Francesca;
		}
		h6 {
			font-weight: 400;
			font-size: 24px;
			line-height: 1;
			font-family: Francesca;
		}

		a {
			font-weight: 400;
			font-size: 26px;
			line-height: 1.25;
			font-family: EvolveSans;
			text-decoration: underline;
    		text-decoration-thickness: 1px;
		}

		.dark-mode a {
			color: var(--light-color);
		}

		.dark-mode a:hover{
			color:var(--dark-color);
		}
		.light-mode a {
			color: var(--dark-color);
		}

		.light-mode a:hover{
			color:var(--light-color);
		}

		table {
			border-collapse: collapse;
		}

		th {
			font-weight: 400;
			font-size: 28px;
			line-height: 1;
			font-family: Francesca;
		}

		td {
			font-weight: 400;
			font-size: 18px;
			line-height: 1.25;
			font-family: EvolveSans;
			padding: 5px;
		}

		.dark-mode th {
			border: 1px solid var(--light-color);
		}

		.dark-mode td {
			border: 1px solid var(--light-color);
		}
		.light-mode th {
			border: 1px solid var(--dark-color);
		}

		.light-mode td {
			border: 1px solid var(--dark-color);
		}

		p,li {
			font-weight: 400;
			font-size: 18px;
			line-height: 1.25;
			font-family: EvolveSans;
		}

		.logo-nav {
			position: fixed;
			top: 20px;
			left: 20px;
			display: flex;
			align-items: center;
			gap: 10px;
			text-decoration:none;
		}
		.logo-nav a{
			display: flex;
			align-items: center;
		}

		.toggle-container {
			position: fixed;
			top: 20px;
			right: 20px;
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.toggle-icon {
			font-size: 24px;
			cursor: pointer;
		}

		.sticky-toggle {
			position: fixed;
			bottom: 0;
			right: 0;
			width: 100%;
			height: auto;
		}

		#webpage-icon {
			margin: 2em;
		}

		.light-mode .button{
			background: var(--dark-color);
			color: var(--light-color);
		}

		.light-mode .button:hover{
			background: var(--light-color);
			color: var(--dark-color);
		}

		.dark-mode .button {
			background: var(--light-color);
			color: var(--dark-color);
		}
		.dark-mode .button:hover {
			background: var(--dark-color);
			color: var(--light-color);
		}

		.button {
			padding: 20px;
			text-decoration: none;
		}


		.docs {
			margin-top: 3em;
			display: flex;
			flex-direction: column;
			justify-content: center;
			spa
		}

		.docs a{
			margin: 1em;
		}

		.docs, .testimonials, .timeline, .portfolio {
			max-width:700px;
			margin: 6em auto 10em auto;
		}

		.testimonials hr {
			max-width: 50%;
			margin: 3em 0 3em;
		}
		.timeline hr{
			max-width: 50%;
			margin: 3em auto;
		}

		.dark-mode hr {
			border: .25px solid var(--light-color);
		}
		.light-mode hr {
			border: .25px solid var(--dark-color);
		}

		@media (max-width: 700px) {
			.docs, .testimonials, .timeline {
				margin: 6em 2em;
			}
		}

		html .testimonials, html .portfolio {
			text-align: left;
		}

	.dark-mode blockquote {
		border-left: 1px solid var(--light-color);
		padding-left: 20px;
	}
	.light-mode blockquote {
		border-left: 1px solid var(--dark-color);
		padding-left: 20px;
	}

	.el-p img {
		width: 100%;
	}