@font-face {
    font-family: 'Neon';
    src: url('/fonts/neon.ttf');
}

@font-face {
    font-family: 'Computer Modern';
    src: url('/fonts/cmunrm.ttf');
}

* {
    padding: 0;
    margin: 0;
    box-sizing: content-box;
}

body {
    background-color: #1a2026;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 20% auto;
    color: #51513d;
    font-family: 'Inter', 'Arial', sans-serif;
}

h1 {
    text-align: center;
    padding: 2em;
}

#title {
    cursor: default;
    user-select: none;
}

#title span {
    font-family: 'Neon', 'Inter', 'Arial', sans-serif;
    font-size: 30pt;
    color: white;
    text-shadow: 0px 0px 14px rgb(255, 75, 75);
    border: 4px solid white;
    border-radius: 0.3em;
    padding: 0.35em 0em;
    box-shadow: 0px 0px 14px rgb(255, 75, 75), inset 0px 0px 14px rgb(255, 75, 75);
}

#links span {
    color: #e3d081;
    cursor: pointer;
    font-weight: 600;
    opacity: 0.8;
    user-select: none;
}

#links span:hover {
    opacity: 1;
}

#links span.active {
    font-weight: 800;
    opacity: 1;
    cursor: default;
}

#links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 15em;
}

.section {
    display: none;
}

.thing {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 5em 8em;
    padding-bottom: 0px;
}

.photo img {
    height: 20em;
    width: 20em;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.3);
}

.desc {
    padding: 0em 5em;
}

.desc h1 {
    color: #ffba49;
    padding: 0;
    text-align: left;
    cursor: pointer;
    font-family: 'Google Sans', sans-serif;
}

.desc h1::after {
    content: "⇲";
    display: inline-block;
    transform: rotate(-90deg);
    margin-left: 5px;
}

.desc h1:hover {
    text-decoration: underline;
}

.desc p {
    color: #d5d3b8;
    margin-top: 1em;
    font-family: 'Google Sans', sans-serif;
}

.desc a {
    font-weight: bold;
    color: #6ed5c9;
    text-decoration: none;
    font-family: inherit;
}

#footer {
    padding: 10em;
    text-align: center;
    color: white;
    opacity: 0.1;
}

#about {
    padding: 5em;
    text-align: center;
}

#about p {
    display: inline-block;
    margin-top: 2em;
    color: #e9ddb0;
    width: 60%;
    text-align: justify;
    font-size: 16pt;
    font-family: 'Computer Modern', 'Arial', sans-serif;
    line-height: 1.5em;
}

#about a {
    font-weight: bold;
    text-decoration: none;
    color: #a2c9f6;
}

#me {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#me span {
    font-family: 'Computer Modern', serif;
    color: #e3d081;
    font-style: italic;
    font-size: 8pt;
    margin: 5px;
    display: inline-block;
}

.paper-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 5em;
    padding-bottom: 0em;
}

.paper-view {
    height: 22em;
    width: 17em;
    flex: none;
    box-shadow: 0px 2px 5px black;
}

.paper-desc {
    font-family: 'Computer Modern', serif;
    padding: 2em;
    max-width: 80vw;
}

.paper-date {
    font-family: 'Google Sans', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    display: block;
    color: #e4dcce;
}

.paper-desc a, #paper-desc p {
    text-align: left;
    padding: 0;
}

.paper-desc a {
    color: #e3d081;
    font-size: 25pt;
    text-decoration: none;
    font-weight: bold;
}

.paper-desc a:hover {
    text-decoration: underline;
}

.paper-desc p {
    color: #d5d3b8;
    padding-top: 2em;
    text-align: justify;
}

.paper-authors {
    font-style: italic;
    font-size: 15pt;
    padding-top: 0.5em !important;
}