* {
    box-sizing: border-box;
}

.centering {
    width: 900px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

body {
    font-family: 'Product Sans', sans-serif;
    font-size: 21px;
    color: #914642;
    background-color: #FBEDEA;
    padding: 0;
    margin: 0;
}

::selection {
    background: #ffb7b7;
    color: #000000;
}

.about {
    padding-top: 0px;
    font-size: 22px;
    margin-block-start: 3em;
    margin-block-end: 1em;
}

@media (min-width: 768px) {
    .about {
        padding-top: 70px;
    }
}

.about p {
    line-height: 1.52em;
    margin-top: 14px;
}

.about h1 {
    margin-top: 8px;
    margin-bottom: 8px;
}

.about a {
    color: #512725;
    text-decoration: none;
    border-bottom: 2px solid #512725;
    transition: border-bottom-width 150ms ease;
}

a:hover {
    border-bottom-width: 3px;
}

.boldened {
        font-weight: 900;
}

@font-face{font-family:product sans;
    font-style:normal;
    font-weight:400;
    src:local('Product Sans'),url(https://fonts.cdnfonts.com/s/13998/ProductSans-Regular.woff) format('woff')
}

.links {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* Align items to the start of the container */
    justify-content: flex-start; /* Align content to the start of the container */
    margin-bottom: 46px;
    user-select: none;
}

.links a {
    background-color: #FBDEAC;
    padding: 12px 24px;
    border-radius: 24px;
    margin-right: 12px;
    margin-bottom: 8px;
    text-decoration: none;
    font-size: 16px;
    font-family: 'Roboto Mono', monospace;
    font-weight: 900;
    color: #512725;
    transition: all 300ms linear;
    box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.0);
}

#arxiv {
    background-color: #8FEBD1;
}

#cv {
    background-color: #FED7E2;
}

#github {
    background-color: #CBCC58;
}

#linkedin {
    background-color: #8FD7D8;
}

.links a:hover {
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.1);
    filter: brightness(103%);
}

h1 {
    font-size: 50px;
}

.masonry-grid {
    display: block; /* Stack columns on small screens */
}

.column {
    margin-right: 0;
    margin-left: 0;
    padding: 0;
}

.paper {
    color: #512725;
    margin-bottom: 24px; 
    padding: 28px;
    border-radius: 36px;
    transition: all 300ms;
    box-shadow: 0px 10px 22px rgba(0, 0, 0, 0.07);
}

@media (min-width: 768px) {
    .masonry-grid {
        display: flex;
    }

    .column {
        flex: 1;
        padding: 0;
        margin-right: 12px;
    }

    .column:last-child {
        margin-right: 0;
        margin-left: 12px;
    }
}

.paper {
    color: #512725;
    margin-bottom: 24px; 
    padding: 28px;
    border-radius: 36px;
    transition: all 300ms;
    box-shadow: 0px 10px 22px rgba(0, 0, 0, 0.07);
}

.paper:hover {
    box-shadow: 0px 10px 18px rgba(0, 0, 0, 0.11);
}

#blurop {
    background-color: #DADDDA;
}

#accspec {
    background-color: #C1E7FE;
}

#qhalc {
    background-color: #FBDEAC;
}

#symbolrecovery {
    background-color: #DAFAAF;
}

#measureoperatorconv {
    background-color: #ED959A;
}

#minimizers {
    background-color: #C4B5D8;
}

.papers h1 {
    margin-top: 8px;
    margin-bottom: 36px;
}

.paper .title {
    color: #512725;
    font-size: 24px;
}

.paper .subtitle {
    font-size: 14px;
    font-family: 'Roboto Mono', 'monospace';
}

.paper a {
    margin-right: 6px;
    font-size: 14px;
    color: #512725;
    font-family: 'Roboto Mono', monospace;
    text-decoration: none;
    border-bottom: 2px solid #512725;
    transition: border-bottom-width 150ms ease;
}

.paper a:hover {
    border-bottom-width: 3px;
}

.formula {
    color: #512725;
    text-align: center;
    padding-bottom: 8px;
}

.squiggly-line {
    border: none;
    margin-top: 36px;
    margin-bottom: 36px;
    height: 20px;
    background-image: url('data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjEyMDAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTAsMTAgUTEwLDAgMjAsMTAgVDQwLDEwIFQ2MCwxMCBUODAsMTAgVDEwMCwxMCBUMTIwLDEwIFQxNDAsMTAgVDE2MCwxMCBUMTgwLDEwIFQyMDAsMTAgVDIyMCwxMCBUMjQwLDEwIFQyNjAsMTAgVDI4MCwxMCBUMzAwLDEwIFQzMjAsMTAgVDM0MCwxMCBUMzYwLDEwIFQzODAsMTAgVDQwMCwxMCBUNDIwLDEwIFQ0NDAsMTAgVDQ2MCwxMCBUNDgwLDEwIFQ1MDAsMTAgVDUyMCwxMCBUNTQwLDEwIFQ1NjAsMTAgVDU4MCwxMCBUNjAwLDEwIFQ2MjAsMTAgVDY0MCwxMCBUNjYwLDEwIFQ2ODAsMTAgVDcwMCwxMCBUNzIwLDEwIFQ3NDAsMTAgVDc2MCwxMCBUNzgwLDEwIFQ4MDAsMTAgVDgyMCwxMCBUODQwLDEwIFQ4NjAsMTAgVDg4MCwxMCBUOTAwLDEwIFQ5MjAsMTAgVDk0MCwxMCBUOTYwLDEwIFQ5ODAsMTAgVDEwMDAsMTAgVDEwMjAsMTAgVDEwNDAsMTAgVDEwNjAsMTAgVDEwODAsMTAgVDExMDAsMTAgVDExMjAsMTAgVDExNDAsMTAgVDExNjAsMTAgVDExODAsMTAgVDEyMDAsMTAiCiAgICAgICAgc3Ryb2tlPSIjNTEyNzI1IiBzdHJva2Utd2lkdGg9IjMiIGZpbGw9InRyYW5zcGFyZW50Ii8+Cjwvc3ZnPgo=');
    background-repeat: repeat-x;
}

.timeline {
    position: relative;
    padding-left: 30px; /* Adjust as needed */
}

.talk::before {
    content: '';
    position: absolute;
    left: -9px; /* Center the line with the dot */
    top: 20px;
    bottom: -20px;
    width: 2px; /* Thickness of the line */
    background-color: #623D3F; /* Color of the line */
    z-index: 1;
}

.talk:last-child::before {
    display: none; /* Hide line for the last .talk item */
}

.talk {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 24px;
    position: relative;
}

.talk::after {
    content: '';
    position: absolute;
    left: -15px; /* Adjust this to align with the timeline */
    top: 26px;
    transform: translateY(-50%);
    width: 14px; /* Size of the dot */
    height: 14px; /* Size of the dot */
    background-color: #623D3F; /* Color of the dot */
    border-radius: 50%; /* Makes it round */
    z-index: 2;
}

.talks h1 {
    margin-bottom: 10px;
}

.talk a {
    color: #512725;
    text-decoration: none;
    border-bottom: 2px solid #512725;
    transition: border-bottom-width 150ms ease;
}

.talk .name {
    color: #512725;
    font-size: 23px;
    padding-bottom: 2px;
}

.talk a:hover {
    border-bottom-width: 3px;
}

.talk .date_loc {
    font-size: 14px;
    font-family: 'Roboto Mono', monospace;
}

.talk .link {
    font-size: 14px;
    font-family: 'Roboto Mono', monospace;
}

.projects {
    padding-bottom: 24px;
}

.project {
    padding-bottom: 1px;
    border-left: 4px solid #512725;
    padding-left: 24px;
    margin-bottom: 20px;
}

.project .project_links a {
    font-weight: bold;
    text-decoration: none;
    color: #512725;
    margin-right: 6px;
    user-select: none;
    border: 1.5px solid #512725;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 7px;
    padding-bottom: 7px;
    border-radius: 40px;
    font-size: 16px;
    transition: all 200ms;
    user-select: none;
}

.project .project_links a:hover {
    background-color: #ccc;
}

.project .title {
    font-weight: bold;
    color: #512725;
    font-size: 28px;
    padding-bottom: 6px;
}

.project .description {
    font-size: 19px;
    line-height: 1.42em;
    padding-bottom: 16px;
}

.project .description a {
    color: #512725;
}

.project .project_links {
    margin-bottom: 20px;
}




.blog {
    font-size: 19px;
    color: #512725;
}

#back_container {
    padding-top: 40px;
}

.blog .back {
    text-decoration: none;
    font-size: 14px;
    font-family: 'Roboto Mono', monospace;
    text-transform: uppercase;
    font-weight: 900;
    color: rgba(81, 39, 37, 0.5);
    text-underline-offset: 4px;
    text-decoration: underline;
    text-decoration-color: rgba(81, 39, 37, 0.3);
    border-bottom: none;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: 28px;
    padding-left: 14px;
    margin-left: -14px;
    border-radius: 25px;
    transition: background 200ms, color 200ms, text-decoration-color 200ms;
}

.blog .back:hover {
    background: rgba(81, 39, 37, 0.1);;
    text-decoration-color: rgba(81, 39, 37, 0.6);
    color: rgba(81, 39, 37, 0.6);
}

.post {
    padding-top: 52px;
    padding-bottom: 70px;
}

.blog .subtitle {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 15px;
    margin-bottom: -3px;
    font-family: 'Roboto Mono', monospace;
}

.blog p {
    line-height: 1.52em;
    margin-top: 14px;
}

.blog h1 {
    margin-top: 8px;
    margin-bottom: 8px;
}

.blog a {
    color: #000;
    text-decoration: none;
    border-bottom: 2px solid #512725;
    transition: border-bottom-width 150ms ease;
}

.blog .comment {
    font-style: italic;
    opacity: 0.7;
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
}

.blog p code,
.blog ul code {
    background-color: white;
    padding-left: 2px;
    padding-right: 2px;
    border-radius: 5px;
    font-size: 17px;
    color: black;
}

.blog pre code {
    tab-size: 4;
    font-size: 15px;
    border-radius: 24px;
    padding-left: 24px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
}


.blog .figure_container {
    width: 120%;
    margin-left: -10%;
    margin-right: -10%;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 10px 8px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

.blog .figure_container_small {
    width: 75%;
    padding-left: 42px;
    padding-right: 42px;
    padding-top: 8px;
    padding-bottom: 14px;
    background: white;
    margin-left: auto;
    margin-right: auto;
    border-radius: 16px;
    box-shadow: 0 10px 16px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.blog .figure_container a, .blog .figure_container_small a {
    border-bottom: none;
}

.blog .figure {
    width: 100%;
    display: block;
}

.fancybox__toolbar {
    display: none !important;
}

.blog .figure_caption {
    font-size: 14px;
    font-family: 'Roboto Mono';
    font-style: italic;
    margin-top: 14px;
    margin-bottom: 18px;
    margin-left: 9%;
    margin-right: 9%;
}

.blog .figure_caption .caption_title {
    font-weight: bold;
}

@media (max-width: 1120px) {
    .blog .figure_container {
        width: calc(100%);
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 890px) {
    .blog .figure_container_small {
        width: 100%;
    }
}

.blog .final_button_container {

}

.blog .final_button {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.blog .table-container {
    padding-bottom: 8px;
}

.blog table {
    width: 130%;
    margin-left: -15%;
    margin-right: -15%;
    border-collapse: collapse;
    box-shadow: 0 10px 14px rgba(0, 0, 0, 0.07);
    border-radius: 18px;
    padding-left: 16px;
    padding-right: 16px;
    overflow: hidden;
    color: black;
    box-sizing: border-box;
    background-color: #DADDDA;
}

.blog thead {
  background-color: #DADDDA;
  color: black;
  text-align: left;
}

.blog thead th {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 14px;
    padding-right: 14px;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 13px;
}

.blog tbody tr {
  border-bottom: none;
  transition: background-color 0.3s;
}

.blog tbody tr:last-of-type {
  border-bottom: none;
}

.blog tbody td {
  padding: 12px 15px;
  font-size: 14px;
}

.blog tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.blog tbody tr:nth-child(odd) {
  background-color: #f1f1f1;
}

@media (max-width: 1200px) {
    .blog table {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .blog table {
        font-size: 12px;
    }

    .blog thead {
        font-size: 12px;
    }

    .blog tbody td {
        padding-left: 6px;
        padding-right: 6px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .blog thead th {
        padding-left: 6px;
        padding-right: 6px;
    }
}

@media (max-width: 1120px) {
    .blog .table-container {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    table {
        font-size: 11px;
    }

    tbody td {
        padding-left: 2px;
        padding-right: 2px;
    }
  
    thead th {
        padding-left: 0px;
        padding-right: 6px;
    }
}

@media (max-width: 1000px) {
    .blog .table-container {
        width: calc(100vw - 15px);
        margin-left: -5vw;
        margin-right: -5vw;
        overflow-x: auto;
        padding-bottom: 24px;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    .blog tbody td {
        font-size: 11px;
    }

    .blog thead th {
        font-size: 11px;
    }

}

@media (max-width: 800px) {
    .blog .subtitle {
        font-size: 14px;
    }

    .blog {
        font-size: 18px;
    }

    .blog h1 {
        font-size: 46px;
    }

    .blog p code,
    .blog ul code {
        font-size: 15px;
    }

    .blog pre code {
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    .blog .subtitle {
        font-size: 13px;
    }

    .blog {
        font-size: 17px;
    }

    .blog h1 {
        font-size: 40px;
    }

    .blog p code,
    .blog ul code {
        font-size: 15px;
    }

    .blog pre code {
        font-size: 12px;
        tab-size: 2;
    }

    .blog .figure_container_small {
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 4px;
        padding-bottom: 14px;
    }

    .blog .figure_caption {
        font-size: 12px;
        margin-left: 5%;
        margin-right: 5%;
    }

    .blog .comment {
        font-size: 12px;
    }
}




@property --border-angle-1 {
	syntax: "<angle>";
	inherits: true;
	initial-value: 0deg;
}

@property --border-angle-2 {
	syntax: "<angle>";
	inherits: true;
	initial-value: 90deg;
}

@property --border-angle-3 {
	syntax: "<angle>";
	inherits: true;
	initial-value: 180deg;
}
:root {
	--bright-blue: #DAFAAF;
	--bright-green: #C1E7FE;
	--bright-red: #FBDEAC;
	--background: #fbf4f3;
	--foreground: rgb(49, 23, 22);
	--border-size: 2px;
	--border-radius: 0.75em;
}

@keyframes rotateBackground {
	to { --border-angle-1: 360deg; }
}

@keyframes rotateBackground2 {
	to { --border-angle-2: -270deg; }
}

@keyframes rotateBackground3 {
	to { --border-angle-3: 540deg; }
}


.nice_button {
    user-select: none;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
	--border-angle-1: 0deg;
	--border-angle-2: 90deg;
	--border-angle-3: 180deg;
	font-size: 14px;
	border: 0;
    font-family: 'Roboto mono', monospace;
    font-weight: 500;
	padding: var(--border-size);
	display: flex;
	width: max-content;
	border-radius: var(--border-radius);
	background-color: transparent;
	background-image: conic-gradient(
			from var(--border-angle-1) at 10% 15%,
			transparent,
			var(--bright-blue) 10%,
			transparent 30%,
			transparent
		),
		conic-gradient(
			from var(--border-angle-2) at 70% 60%,
			transparent,
			var(--bright-green) 10%,
			transparent 60%,
			transparent
		),
		conic-gradient(
			from var(--border-angle-3) at 50% 20%,
			transparent,
			var(--bright-red) 10%,
			transparent 50%,
			transparent
		);
	animation: 
		rotateBackground 3s linear infinite,
		rotateBackground2 8s linear infinite,
		rotateBackground3 13s linear infinite;
}

.nice_button a:hover {
    background: white;
    color: black;
}

.nice_button a {
    display: block;
    border-bottom: none;
    transition: background 200ms, color 200ms;
	background: var(--background); 
	padding: 0.7em 1.05em;
	border-radius: calc(var(--border-radius) - var(--border-size));
	color: var(--foreground);
}

.blog .equation {
    text-align: center;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-left: 16px;
    padding-right: 16px;
}