@import url('satoshi.css');

:root {
	--main-max-width: 1400px;
    --row-size: 3rem;
    --column-size: 10rem;
    --gap: 1.5rem;

    --en-bg: #292728;
    --en-txt: hsla(1, 100%, 100%, 1);
    --hu-bg: hsla(1, 100%, 100%, 1);
    --hu-txt: hsla(0, 0%, 0%, 1);
    --hu-menu:#292728;
}

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


html {
	font-family: 'Satoshi-Variable';
	font-size: 1rem;
    color: var(--en-txt);
}

body {
    background: var(--en-bg);
    position: relative;
    max-width: var(--main-max-width);
    width: 100%;
    margin: 0 auto;
}

h1 {
    font-weight: 700;
    width: min-content;
}

h3 {
    font-weight: 700;
}

h4 {
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: -0.5rem;
}

a {
    color: var(--en-txt);
}

img {
    width: 100%;
    height: auto;
}

ol {
    padding-top: 1.5rem;
    margin-inline: 4rem;
}

article {
    display: grid;
    grid-template-columns: repeat(var(--column-count), minmax(var(--column-size), 1fr));
    padding-block: 1.5rem;
    position: relative;
}

.bgvisible {
    background: var(--en-bg);
}

/******************************* HEADER ******************************/

header {
    grid-column: 1 / span var(--column-count);
    grid-row: 1 / span 2;
    position: sticky;
    top: 1.5rem;
    transform: translateY(-1.5rem);
    padding-block: 1.5rem;
    z-index: 10;
    display: grid;
    column-gap: var(--gap);
}

#headertitle {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    font-weight: 900;
    z-index: -1;
    margin-top: -0.5rem;
    text-shadow: 0.5px 0.5px 0 var(--en-bg), -0.5px 0.5px 0 var(--en-bg), -0.5px -0.5px 0 var(--en-bg), 0.5px -0.5px 0 var(--en-bg);
}

#headertitle a {
    text-decoration: none;
    letter-spacing: 1px;
}

/*************************** LANGUAGE SELECTOR ***************************/

.lang {
    grid-column: var(--column-count);
    grid-row: 1;
    font-size: 1.5rem;
    z-index: -1;
}

.lang a {
    text-decoration: none;
}

.lang span {
    display: block;
}

.lang .selected {
    font-weight: 700;
}

/****************************** NAVIGATION ******************************/

#navigation {
    grid-column: var(--column-count);
    grid-row: 1;
    justify-self: end;
    -webkit-user-select: none;
  	user-select: none;
}

#navigation input {
  	display: block;
  	position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    aspect-ratio: 1;
  	opacity: 0;
  	z-index: 3;
  	-webkit-touch-callout: none;
  	transition: transform 0.4s;
  	cursor: pointer;
}

#menu_button span {
    display: block;
    background: var(--en-txt);
    width: 2.5rem;
    height: 0.5rem;
    margin-bottom: 0.5rem;
    transition: all 0.4s ease-in-out;
}

#navigation input:checked ~ #menu_button span:nth-child(1) {
    background: var(--en-bg);
    transform: rotate(45deg) translate(15px, 15.5px);
}
#navigation input:checked ~ #menu_button span:nth-child(2) {
    opacity: 0;
}
#navigation input:checked ~ #menu_button span:nth-child(3) {
    background: var(--en-bg);
    transform: rotate(-45deg) translate(7.5px, -7.5px);
}

nav {
    position: fixed;
    background: var(--en-txt);
    z-index: -1;
    width: 100%;
    height: 100vh;
    top: -100vh;
    left: 50%;
    transform: translateX(-50%);
    transition: top 0.4s ease-in-out;
}

#navigation input:checked ~ nav {
    top: 0;
}

.nav_wrapper {
    width: max-content;
    left: 50%;
    top: 50%;
    position: relative;
    transform: translate(-50%, -50%);
}

.nav_wrapper div {
    background-image: url(/inc/imgs/arrow_black.svg);
    background-repeat: no-repeat;
}

.nav_wrapper a,
.nav_wrapper span {
    color: var(--en-bg);
    text-decoration: none;
    font-weight: 700;
}

.menuopen {
    height: 100vh;
    overflow-y: hidden;
}



/**************************** CONTENT *************************************/

#headerimage {
    grid-column: 1 / span var(--column-count);
    grid-row: HeaderImage;
    width: 100%;
    background-size: cover;
}

[data-part="introduction"] #headerimage  {
    background-image: url(/assets/imgs/introduction/cover.jpg);
    background-position: center top 80%;
}

[data-part="1960"] #headerimage  {
    background-image: url(/assets/imgs/1960/cover.jpg);
    background-position: right top 40%;
}

[data-part="1965--project"] #headerimage  {
    background-image: url(/assets/imgs/1965/project/cover.jpg);
    background-position: center top 65%;
}

[data-part="1965--narrative"] #headerimage  {
    background-image: url(/assets/imgs/1965/narrative/CM_scroll.jpg);
    background-position: left top;
    background-size: cover;
    background-repeat: repeat-x;
    scroll-behavior: smooth;
    animation: bgslide 50s 400ms infinite linear;
}

[data-part="1965--narrative"] #headerimage:hover {
    animation-play-state: paused;
}

@keyframes bgslide {
    from {
      background-position-x: 0;
    }
    to {
      background-position-x: var(--scroll-width);
    }
}

[data-part="1965--victims"] #headerimage  {
    background-image: url(/assets/imgs/1965/victims/cover.jpg);
    background-position: center top 65%;
}

[data-part="1965--absence"] #headerimage  {
    background-image: url(/assets/imgs/1965/absence/cover.jpg);
    background-position: center top 65%;
}

[data-part="1965--abstraction"] #headerimage  {
    background-image: url(/assets/imgs/1965/abstraction/cover.jpg);
    background-position: center top 60%;
}

[data-part="book"] #headerimage  {
    background-image: url(/assets/imgs/book/cover.jpg);
    background-position: center top 50%;
}

[data-part="press"] #headerimage  {
    background-image: url(/assets/imgs/press/cover.png);
    background-position: left top 65%;
    background-size: contain;
    background-repeat: no-repeat;
}

[data-part="imprint"] {
    #headerimage  {
        background-image: url(/assets/imgs/imprint/cover.png);
        background-position: left top 65%;
        background-size: contain;
        background-repeat: no-repeat;
    }
    & #contentright h2 {
        width: auto;
    }
}

#contentleft {
    grid-column: 1 / span 2;
    display: grid;
    gap: var(--gap);
    grid-template-rows: max-content;
}

#contentright {
    grid-column: calc(var(--column-count) - 1) / span 2;
    display: grid;
    gap: calc(2 * var(--gap));
    grid-template-rows: max-content;
}

#contentfull {
    grid-column: 1 / span var(--column-count);
    grid-row: ContentStart;
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(var(--column-count), 1fr);
}

.text.resistance,
.text.metamorphoses,
.text.forcedmarch,
.text.romaholocaust {
    grid-column: calc(var(--column-count) - 1) / span 2;
}

.text.metamorphoses,
.text.forcedmarch,
.text.romaholocaust {
    margin-top: -1.5rem;
}

.gallery.resistance,
.gallery.metamorphoses,
.gallery.forcedmarch,
.gallery.romaholocaust {
    grid-column: 1 / span 2;
}

[data-part="1965--victims"] #videoplayer {
    grid-column: 1 / span 2;
}

.text p {
    padding-top: 1.5rem;
}

.text a {
    word-break: break-all;
}

.subtitle {
    font-size: 1rem;
}


/********************************** VIDEOPLAYER ******************************/

#videoplayer {
    grid-column: 1 / span 2;
    grid-row: BottomContentStart / BottomContentEnd;
}

#videoplayer iframe {
    width: 100%;
    aspect-ratio: 1.328571428571429;
}

video {
    width: 100%;
    height: auto;
}



/********************************** FOOTER **********************************/

footer {
    grid-column: 1 / span var(--column-count);
    grid-row: FooterStart / FooterEnd;
    display: grid;
    border-top: 0.5rem solid var(--en-txt);
}

#partners {
    font-style: italic;
}

#organizers {
    grid-row: 2 / 2;
    font-style: italic;
}

#organizerlogos {
    grid-row: 3 / 3;
    display: flex;
    flex-flow: row nowrap;
}

#partnerlogos {
    display: flex;
    flex-flow: row nowrap;
}

.logos img {
    width: auto;
}

#credits span,
#copy span {
    display: block;
    text-transform: uppercase;
}

/********************************** INTRO **********************************/

#introvideocontainer {
    grid-row: HeaderImage;
    grid-column: 1 / span 3;
    position: relative;
    height: 180vh;
    margin-top: -10rem;
}

#introvideo {
    top: 10.5rem !important;
}

#introvideo canvas,
#introvideo video {
    width: 100% !important;
    height: auto !important;
}

/*********************************** IMG CLICK ******************************/

#gallery,
.gallery {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.glightbox-cm .goverlay {
    background: var(--en-bg);
}

.glightbox-cm .gdesc-inner {
    padding: 1rem 1rem 2rem 1rem;
}

.glightbox-cm .gslide-desc {
    color: var(--en-bg);
    font-size: 1rem;
    font-family: 'Satoshi-Variable';
}

.glightbox-cm .gslide-description {
    background: var(--en-txt);
}

.glightbox-cm.glightbox-container .gslide-inner-content {
    width: 90vw;
}

.glightbox-cm button {
    background: none;
    position: fixed;
}

.glightbox-cm .gclose {
    right: 2rem;
    top: 2rem;
    height: unset;
    width: unset;
}

.glightbox-cm .gclose svg {
    width: 2rem;
}

.glightbox-cm .gnext {
    top: 50vh;
    right: 2rem;
    transform: translateY(-50%);
    height: unset;
    width: unset;
}

.glightbox-cm .gprev {
    top: 50vh;
    left: 2rem;
    transform: translateY(-50%);
    height: unset;
    width: unset;
}

.cm-lb {
    fill: var(--en-txt) !important;
}


/************************* SPLIDE *************************/

.splide__pagination__page {
    border-radius: 0 !important;
    height: 2px !important;
}

.splide__pagination__page.is-active {
    transform: scale(2) !important;
}

.splide__arrow {
    background: transparent !important;
    border-radius: 0 !important;
    height: 2rem !important;
    width: 2rem !important;
}

.splide__arrow svg {
    fill: var(--en-txt) !important;
    height: 2rem !important;
    width: 2rem !important;
}


/************************* 404 *************************/

[data-part="404"] {
    width: 90vw;
    height: 50vh;
    color: var(--en-bg);
    background: var(--en-txt);
    text-align: center;
    margin-inline: auto;
    margin-block: 25vh;
    font-weight: 900;
}

[data-part="404"] .edesc {
    margin-block: 2rem;
}

[data-part="404"] svg {
    fill: var(--en-bg);
    width: 3rem;
    height: auto;
    transform: rotate(180deg);
}