/* GENERAL */

@font-face {
    font-family: "Chaumont Script";
    src: local("Chaumont Script"),
        url("ChaumontScript-Regular.woff2") format("woff2"),
        url("ChaumontScript-Regular.woff") format("woff"),
        url("ChaumontScript-Regular.ttf") format("truetype");
}
:root {
    --color: #243853;
    --bg-color: #fff;
    font-family: 'Work Sans', sans-serif;
    font-size: 24px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    cursor: none;
}
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    color: var(--color);
    background-color: var(--bg-color);
}

/* BACKGROUND */

.grid {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -1;
    overflow: hidden;
    background-image:
      repeating-linear-gradient(var(--color) 0 1px, transparent 1px 100%),
      repeating-linear-gradient(90deg, var(--color) 0 1px, transparent 1px 100%);
    background-size: 120px 120px;
    opacity: 0.3;
}
.path-container {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    z-index: -1;
    overflow: hidden;
    font-weight: 500;
    opacity: 0.4;
}
.path {
    width: 200vw;
    top: 50vh;
    position: absolute;
    display: flex;
    flex-direction: column;
}
.path > p {
    padding-left: 50%;
    font-size: 12px;
}
.path-line {
    width: 100%;
    height: 2px;
    left: 0;
    margin: 6px 0;
    background-color: var(--color);
}
.path.one {
    left: -68vw;
    transform: rotate(-45deg);
}
.path.two {
    left: -25vw;
    transform: rotate(-78deg);
}

/* CURSOR */

.cursor {
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 6;
    border: 1px solid var(--color);
    border-radius: 50%;
    pointer-events: none;
}

/* MENU */

.menu-bar {
    width: 100%;
    position: fixed;
    z-index: 6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 24px;
    color: var(--color);
    fill: var(--color);
    user-select: none;
    pointer-events: none;
    transition: color 0.35s ease-out, fill 0.35s ease-out;
}
.white {
    color: var(--bg-color);
    fill: var(--bg-color);
}
.logo, .logo > a {
    display: flex;
    align-items: center;
}
.menu-bar svg {
    width: 24px;
    height: 24px;
    transition: 0.2s ease;
}
.menu-bar svg:hover {
    transform: rotate(60deg);
}
.logo, .menu-item {
    pointer-events: all;
}

/* INFOBOX */

.info-backdrop {
    width: 100%;
    height: 0px;
    top: -50px;
    position: absolute;
    z-index: 4;    
    background-color: var(--color);
    transition: height 0.35s ease-out, transform 0.35s ease-out, top 0.2s ease-out;
}
.info-backdrop-hover {
    height: 175px;
    transform: skewY(2deg);
}
.info-backdrop-open {
    height: 100%;
    top: 0;
    transform: skewY(0deg);
}
.info-overflow-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    z-index: 5;
    opacity: 1;
    transition: opacity 0.2s ease-in;
}
.info-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-template-areas: 'contact contact contact info info info info timeline timeline timeline timeline timeline'
                         'copyright copyright copyright info info info info timeline timeline timeline timeline timeline';
    padding: 84px 24px 0 24px;
    color: var(--bg-color);    
}
.info-container a {
    color: var(--bg-color);
    text-decoration: none;
}
.info-container a:hover {
    color: var(--bg-color);
    text-decoration: underline;
}
.info-container a:visited {
    color: var(--bg-color);
}
.info-contact {
    grid-area: contact;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.portrait img{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    object-fit: cover;
    pointer-events: none;
}
.socials {
    display: flex;
    flex-direction: column;
    padding: 0 0 60px 36px;
    font-size: 18px;
    letter-spacing: 0.1em;
}
.cv {
    display: flex;
    flex-direction: row;
}
.socials > div, .socials > a {
    padding: 6px;
    margin-bottom: 6px;
}
.copyright {
    grid-area: copyright;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 0 0 48px 36px;
    font-size: 18px;
    line-height: 1.5;
    opacity: 0.4;
}
.info-info {
    grid-area: info;
    height: auto;
    overflow: hidden;
    margin: 0 12px 0 48px;
    padding: 6px;
    line-height: 1.35;
    border-top: 2px solid var(--bg-color);
}
.info-info-box {
    width: 100%;
    height: calc(100% - 24px);
    overflow: auto;
    margin-bottom: 24px;
}
.info-info p {
    padding: 0 12px 6px;
}
.line {
    width: 100%;
    height: 2px;
    margin: 0 0 12px;
    background-color: var(--bg-color);
    opacity: 0.3;
}
.info-timeline {
    grid-area: timeline;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 12px;
    padding-bottom: 12px;
    border-top: 2px solid var(--bg-color);
}
.timeline-template {
    width: 100%;
    height: 100%;
    position: absolute;
    display: grid;
    grid-template-columns: 15% 5% auto;
    pointer-events: none;
}
.time-line {
    grid-column: 2;
    justify-self: center;
    height: 100%;
    margin-top: 25px;
    width: 2px;
    background-color: var(--bg-color);
    opacity: 0.3;
}
.time-row {
    width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: 15% 5% auto;
    align-content: center;
}
.time-date {
    text-align: right;
    padding-right: 6px;
}
.time-dot-l {
    width: 14px;
    height: 14px;
    justify-self: center;
    align-self: center;
    border-radius: 50%;
    background-color: var(--bg-color);
}
.time-dot-s {
    width: 8px;
    height: 8px;
    justify-self: center;
    align-self: center;
    border-radius: 50%;
    background-color: var(--bg-color);
}
.time-tag {
    overflow: hidden;
    padding-left: 6px;
    text-overflow: "*";
}
.info-hidden {
    display: none;
    pointer-events: none;
    opacity: 0;
}

/* STAR MAP */

.star-map-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.project-title {
    max-width: 100%;
    max-height: 100%;
    bottom: 5%;
    left: 5%;
    position: fixed;
    z-index: 0;
    font-family: "Chaumont Script";
    font-size: 12vw;
    color: var(--color);
    visibility: hidden;
    pointer-events: none;
}
.project-img {
    width: 50%;
    height: 66%;
    position: fixed;
    z-index: 2;
    visibility: hidden;
    pointer-events: none;
}
.img-l {
    right: 5%;
}
.img-r {
    left: 5%;
}
.project-img > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.star-map {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
    overflow: hidden;
    user-select: none;
}
.star {
    max-width: 100px;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    text-align: center;
    color: var(--color);
    font-size: 36px;
    opacity: 0.5;
    pointer-events: none;
}
.star-tag {
    display: flex;
    justify-content: center;
    font-size: 18px;
}
.filtered {
    opacity: 1;
    pointer-events: all;
}

/* FILTERS */

.filter-box {
    position: absolute;
    z-index: 3;
    bottom: 25px;
    right: 25px;
    display: flex;
    flex-direction: column;
    padding: 12px;
    background-color: var(--bg-color);
    border: 1px solid var(--color);
    border-radius: 8px;
    user-select: none;
}
.handle {
    text-align: center;
    font-size: 18px;
    letter-spacing: 0.1em;
    opacity: 0.3;
}
.arrow {
    display: none;
    justify-content: center;
    fill: var(--color);
    opacity: 0.3;
}
.arrow svg {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}
.filters {
    display: flex;
    flex-direction: column;
}
.filter-divider {
    width: 100%;
    height: 1px;
    margin: 12px 0;
    background-color: var(--color);
    opacity: 0.3;
}
.filter {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 6px;
    opacity: 0.5;
}
.filter:hover {
    opacity: 1;
}
.filter-active {
    opacity: 1;
}
.checkbox {
    padding-right: 12px;
    visibility: hidden;
}
.checkbox-active {
    visibility: visible;
}

/* MEDIA QUERIES */
@media screen and (max-width: 1260px){
    .time-row {
        white-space: nowrap;
    }
}

@media screen and (max-width: 880px) {
    .info-container {
        grid-template-areas: 'contact contact contact contact info info info info info info info info'
                             'timeline timeline timeline timeline timeline timeline timeline timeline timeline timeline timeline timeline'
                             'copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright';
        overflow: auto;
    }
    .socials {
        padding: 36px 0 24px 36px;
    }
    .info-timeline {
        min-height: 800px;
        border-bottom: 2px solid var(--bg-color);
    }
    .time-line {
        height: calc(100% - 25px);
    }
    .time-row {
        white-space: normal;
    }
    .copyright {
        margin-top: 36px;
    }
}
@media screen and (max-width: 600px){
    :root {
        font-size: 18px;
    }
    * {
        cursor: crosshair;
    }
    .grid {
        background-size: 60px 60px;
    }
    .path-container {
        display: none;
    }
    .cursor {
        display: none;
    }
    .info-container {
        grid-template-areas: 'contact contact contact contact contact contact contact contact contact contact contact contact'
                             'info info info info info info info info info info info info'
                             'timeline timeline timeline timeline timeline timeline timeline timeline timeline timeline timeline timeline'
                             'copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright';
        overflow: scroll;
    }
    .info-contact {
        flex-direction: row;
        justify-content: right;
        margin-bottom: 36px;
        padding-right: 84px;
    }
    .portrait {
        position: absolute;
        top: 50px;
        left: -25px;
    }
    .info-info, .info-timeline {
        min-height: 600px;
        margin: 0;
    }
    .copyright {
        margin-bottom: 36px;
        padding: 0;
    }
    .star {
        font-size: 30px;
    }
    .star-tag {
        font-size: 14px;
    }
    .project-img {
        width: 80%;
    }
    .project-title {
        font-size: 10vh;
    }
    .filter-box {
        width: 100vw;
        top: auto;
        left: 0px;
        bottom: -8px;
        padding-bottom: 20px;
    }
    .handle {
        display: none;
    }
    .arrow {
        display: flex;
    }
    .filters {
        display: none;
    }
    .filter-divider {
        margin: 6px 0;
    }
}
@media screen and (max-width: 500px){
    .portrait {
        opacity: 0.4;
    }
}