@font-face {
    font-family: 'Josef Rounded';
    src: url('JosefRounded-Faux-Regular 22-04-2025_freeze.woff2');
}
:root {
    --column-width: 400px;
    --colour-hl: #00D9FF;
    --colour-text: black;
}
body {
    font-family: 'Josef Rounded';
    font-size: 13px;
    color: black;
    line-height: 1rem;
    background-color: #f5f5f5;
    margin:0;
    height:100%;
    paint-order: stroke;
}
.overlay {
    box-sizing: border-box;
    display:flex;
    position:fixed;
    height:100vh;
    padding:1rem;
    gap:1rem;
    justify-content: space-between;
    width:100%;
}
.side-bar {
    width: 360px;
    height:100%;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}
p {
    display: block;
    margin-block-start: 1rem;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.award>p{
    padding-left:17.25px;
}
.award>p:first-letter{
    margin-left:-17.25px;
}
.award>p+p {
    margin-top:0.25rem;
}

a {
    color:black;
}

.hl1 {
    text-decoration: none;
    opacity: 30%;
}
.hl1:hover, .hl1:active{
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 12%; /* 1.44px */
    text-underline-offset: 12.5%; /* 1.5px */
    text-underline-position: from-font;
    opacity: 100%;
}

.hl2:hover, .hl2:active {
    text-decoration: none;
    opacity: 30%;
}
.hl2{
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 12%; /* 1.44px */
    text-underline-offset: 12.5%; /* 1.5px */
    text-underline-position: from-font;
    opacity: 100%;
}
.colour-hl:hover {
    text-decoration:none;
    opacity:100%;
    -webkit-text-stroke-color: var(--colour-hl);
    -webkit-text-stroke-width: 1rem;
    stroke-miterlimit: 1;
    color:var(--colour-text);
}

header {
    margin-bottom:1rem;
}
.contact{
    margin-top:1rem;
    display:block;
}
.contact>a{
    display:block;
    width: fit-content;
    padding: 0.125rem 0rem;
}
#personal, #blog {
    opacity: 30%;
    text-decoration: none;
    cursor: no-drop;
}

span.title {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 12%; /* 1.44px */
    text-underline-offset: 12.5%; /* 1.5px */
    text-underline-position: from-font;
}
nav>a {
    display:block;
    width: fit-content;
    margin-top:1rem;
}
nav>a~a {
    margin-top:0;
}

#bg-feature, canvas {
    display:block;
    width:60%;
    height:60%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position:fixed;
    display:flex;
    cursor: pointer;
    mix-blend-mode: multiply;
    z-index:-1;
}

.left-bar{
    display:flex;
    height:100%;
    gap:1rem;
}
.right-bar {
    float:right
}

.hide {
    display:none;
    height:250px;
    position:fixed;
    z-index:1;
    pointer-events: none;
}
.vertical {
    height:auto;
    width:250px;
}
.project-link:hover + .hide {
  display: block;
}