@charset "utf-8";

@font-face {
    font-family: 'GT';
    src: url('../fonts/GT.woff2') format('woff2'),
        url('../fonts/GT.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}



@font-face {
    font-family: 'Mil';
    src: url('../fonts/Millionaire-Roman.woff2') format('woff2'),
        url('../fonts/Millionaire-Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gil';
    src: url('../fonts/GilvanRegular.woff2') format('woff2'),
        url('../fonts/GilvanRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rel';
    src: url('Relaate06-Serif.woff2') format('woff2'),
        url('Relaate06-Serif.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




	@font-face {
  src: url("https://fonts.cdnfonts.com/css/pp-neue-montreal") format("woff2");
  font-family: "PP Neue Montreal", sans-serif;
  font-weight: 400;
}


	@font-face {
    font-family: 'GT';
    src: url('../fonts/GTSectra-BookItalic.woff2') format('woff2'),
        url('../fonts/GTSectra-BookItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Rel';
    src: url('../fonts/Relaate06-Serif.woff2') format('woff2'),
        url('Relaate06-Serif.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mi';
    src: url('fonts/Millionaire-Script.woff2') format('woff2'),
        url('fonts/Millionaire-Script.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Ro';
    src: url('fonts/Rotular-Oldstyle.woff2') format('woff2'),
        url('fonts/Rotular-Oldstyle.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
	font-family: 'Al';
	src: url('../fonts/DTLFleischmannD-CapsItalic.woff2') format('woff2'),
	url('../fonts/DTLFleischmannD-CapsItalic.woff2') format('woff');
	font-style: normal;
}

@font-face {
    font-family: 'Fr';
    src: url('../fonts/France2024-Wide.woff2') format('woff2'),
        url('../fonts/France2024-Wide.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
			
			
			
@font-face {
    font-family: 'Core Circus Pierrot4';
    src: url('../fonts/CoreCircusPierrot4.woff2') format('woff2'),
        url('../fonts/CoreCircusPierrot4.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: 'DTLFleischmannD Caps';
    src: url('../fonts/DTLFleischmannD-CapsItalic.woff2') format('woff2'),
        url('../fonts/DTLFleischmannD-CapsItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Nedo';
    src: url('../fonts/Nedo-Regular.woff2') format('woff2'),
        url('../fonts/Nedo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cindie Mono';
    src: url('../fonts/CindieMono-D.woff2') format('woff2'),
        url('../fonts/CindieMono-D.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}			
	

@font-face {
    font-family: 'Cindie Mono';
    src: url('../fonts/CindieMono-D.woff2') format('woff2'),
        url('../fonts/CindieMono-D.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

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

html {
  font-size: calc(100vw / 1512 * 10);
}

body {
  font-family: "PP Neue Montreal", sans-serif;
  background-color: #000;
  color: #fff;
  

}

	h1,h2{
font-weight:100;
}

.slideshow {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  overflow: hidden;
  transform-origin: center;
}

.slide.active {
  visibility: visible;
}

.slide__img {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-size: cover;
  background-position: center;
  will-change: transform;
  transform-origin: center;
}

.slide__img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0) 40%
  );
}

.slide__text {font-family:"Mi";
  position: absolute;
  bottom: 5rem;
  left: 5rem;
  max-width: 80%;
 
  z-index: 5;
}

.slide__text-line {
  display: block;
  font-size: 4.5rem;
  line-height: 1;
  font-weight: 100;


  transform: translateY(100%);
  opacity: 0;
}

.controls {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 10;
}

.controls-text {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 400;
}

.slide-counter {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  z-index: 10;
}

.counter-container {
  position: relative;
  min-width: 2rem;
  height: 1.2rem;
  overflow: hidden;
  text-align: right;
}

.counter-strip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: right;
}

.counter-number {
  height: 1.2rem;
  display: block;
}

.counter-separator {
  width: 40px;
  height: 1px;
  background-color: #fff;
  margin: 0 1rem;
}

.counter-total {
  min-width: 2rem;
  text-align: left;
}

.slide-info {
  position: fixed;
  top: 2rem;
  left: 2rem;
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.7;
  z-index: 10;
  max-width: 15rem;
}

.slide-info-title {
  margin-bottom: 0.5rem;
}

.cursor {
  position: fixed;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin-top: -30px;
  margin-left: -30px;
  z-index: 9999;
  pointer-events: none;
  transform: scale(0);
  transition: transform 0.3s ease;
}

.cursor-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
  opacity: 0;
}

.cursor.active {
  transform: scale(1);
}

.cursor.prev .cursor-arrow.prev,
.cursor.next .cursor-arrow.next {
  opacity: 1;
}

@media (max-width: 768px) {
  .slide__text {
    bottom: 3rem;
    left: 2rem;
    max-width: 90%;
  }

  .slide__text-line {
    font-size: 3rem;
  }
}
	
		
			
			

html, body {
	overflow-x: hidden;
	width: 100vw;
}

:root {
	font-size: 14px;
	--color-text: #fff;
	--color-bg: #000000;
	--color-bg-alt: hsl(22.55deg 100% 49.22%);
	--color-link: #fff;
	--color-link-hover: #fff;
	--color-title: #fff;
}



/* Page Loader */
.js .loading::before,
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 1000;
}

.js .loading::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}

.js .loading::after {
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link);
	animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}
			
	

.key-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 1px solid var(--color-text);
  border-radius: 3px;
  font-size: 12px;
  margin: 0 3px;
  min-width: 20px;
  height: 20px;
}

/* Footer text styling */
.footer p {
  font-family: "TheGoodMonolith", monospace;
}

/* Global link styling */
a {
  position: relative;
  cursor: pointer;
  color: var(--color-text);
  padding: 0;

  z-index: 1;
  text-decoration: none;
  font-size: var(--font-size-base);
  opacity: 1;
  transition: color var(--transition-medium);
  font-weight: 300;
}





p {
  display: block;
  text-decoration: none;
  color: #ffffff;
font-size: clamp(1.1875rem, 1.0682rem + 0.5455vw, 1.75rem);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

ul {
  list-style: none;
}

h3 {
  font-size: 14px;
  margin-bottom: var(--spacing-base);
  font-weight: 200;
}		
	


.header {
  top: 0;
}

.footer {
  bottom: 0;
}


.nav-section {
  grid-column: 1 / span 1;
}



.social-section {
  grid-column: 2 / span 5;
  text-align: right; font-family: Helvetica, Arial, "sans-serif";
}

.social-section ul {
  list-style-type: none;
  padding: 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: nowrap; /* assumes you only want one row */
}

@media only screen and (max-width: 570px) {
	
	.social-section ul {
  list-style-type: none;
  padding: 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-wrap: nowrap; /* assumes you only want one row */
}
.text p {
    font-size: 12px !important;
 
  
}
	



.social-section ul li{
 
  padding: 10px;

}
}
@media only screen and (min-width:1000px) {
	
.social-section ul li{
 
  padding: 10px 40px;



  
}
}	


.social-section a{
 font-size: clamp(18px, 3vw, 24px);
}


/* Bottom bar */
.coordinates-section {
  grid-column: 1 / span 3;
}

.links-section {
  grid-column: 5 / span 4;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-base);
}

.info-section {
  grid-column: 9 / span 4;
  text-align: right;
}


.logo-container {
  margin-bottom: var(--spacing-md);
  display: block;
  width: 14rem; min-width:240px;
 
  position: relative;
}

		
			.big-button {
font-family: "PP Neue Montreal", sans-serif;
  background: #F3F3F3;
  padding: 16px;
  border-radius: 100px;
  font-size:4vmin; 
  display: inline-block;
  color: #040404;
  margin-top: 50px;

  border: 2px solid rgba(0,0,0,1);
  outline: none;
  
 
  transition: all .1s;
  cursor: pointer;}
  
.big-button:hover {
 background: #000000;  color: #FFFFFF; border: 2px solid rgba(255,255,255,1.00);
   
  }	
  
.big-button:hover {
 background: #000000;  color: #FFFFFF; border: 2px solid rgba(255,255,255,1.00);
   
  }	


.text {
    font-size: clamp(0.75rem, 0.6572rem + 0.4242vw, 1.1875rem);
   font-family:"GT";
}
	
body {

	
 
  background-image: url(../img/noise.png), radial-gradient(ellipse at top, var(--gradient-1), transparent), radial-gradient(ellipse at bottom, var(--gradient-2), transparent);
  background-size: 180px, 100%, 200%;
  background-attachment: fixed;
}