:root {
  --violet: rgb(109, 109, 212);
  --violet-transparent: rgba(109, 109, 212, 0.9);
  --violet-light-transparent:rgba(233, 233, 249);
  --dark-gray: #525252;
  --devdraw: #0b2b53;
}

@font-face {
  font-family: "ahamono";
  src: url("/fonts/ahamono.woff2") format("woff2");
}

* {
  -webkit-tap-highlight-color: transparent;
}
body,
html {
  width: 100%;
  /* height: 100%; */
  scroll-behavior: smooth;
}
body {
  /* position: relative; */
  font-family: ahamono;
  /* min-height: 100dvh; */
}
#content {
  background: #00000031;
}
.left,
.right {
  display: flex;
  width: calc(50% - 75px);
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.logo {
  display: flex;
  /* width: 100%; */
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
}
.top-nav {
  display: flex;
  flex-direction: column;
  min-width: 255px;
  width: calc(100vw - 100px);
  max-width: 360px;
  background-color: var(--violet-transparent);
  min-height: 100dvh;
  height: auto;
  position: absolute;
  top: 0px;
  left: 0px;
  margin-left: -100%;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  font-size: 22px;
  padding: 1rem;
  justify-content: space-between;
  border-bottom: 0px solid var(--violet);
  border-right: 0px solid var(--violet);
  z-index: 2;
}
.hamburger {
  transition: all 0.3s ease-in-out;
}
.person {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
.person span {
  text-transform: uppercase;
  text-decoration: none;
  color: var(--violet);
}
.person_desktop {
  display: none;
}
.home {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 10dvh;
}
.sm {
  display: flex;
  justify-content: center;
  width: 100%;
}
.nav-inside {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-bottom: 10dvh;
}
.top-nav a {
  color: #000;
  text-decoration: none;
  /* font-size: 30px; */
  /* font-weight: bold; */
}
.top-nav a.active {
  text-decoration: underline;
  text-underline-offset: 10px;
  text-decoration-color: var(--base);
}
.top-nav li {
  display: flex;
  align-items: center;
  margin: 1rem auto 1rem auto;
  /* width: fit-content; */
  text-align: center;
  transition: all 0.3s ease-in-out;
  padding: 0.5rem;
  text-transform: uppercase;
  color: #000;
  width: 100%;
}
.slide {
  margin-left: 0;
  opacity: 1;
  position: fixed;
}
.rotate {
  transform: rotate(90deg);
}

.squares {
  display: flex;
  width: 100%;
  height: calc(100dvh - 200px);
  justify-content: center;
}

.main {
  display: flex;
  width: 100%;
  max-width: 600px;
  justify-content: center;
  align-items: center;
  height: calc(100dvh - 230px);
  /* background-color: #eee; */
  flex-direction: column;
  margin: 0 auto;
  padding: 2rem;
  gap: 1.6rem;
}
.main h1,
.main h2 {
  text-transform: uppercase;
  color: var(--violet);
  font-size: clamp(1.1rem, 5vw, 2rem);
  text-align: center;
}
.main p {
  text-align: center;
  font-size: clamp(1rem, 4vw, 1.3rem);
  color: var(--dark-gray);
}
.road {
  display: flex;
  width: 100%;
  justify-content: right;
  transform: translateY(-32px);
}
.creator {
  position: absolute;
  bottom: 10px;
  right: 10px;
  text-decoration: none;
  color: var(--devdraw);
}
.video-container {
  display: flex;
  position: relative;
  width: 100%;
  height: 100dvh; /* Wideo na pełną wysokość widoku */
  overflow: hidden;
  background: #00000031;
  justify-content: center;
  align-items: end;
}
.arrow_down {
    margin-bottom:1rem;
    filter:
    drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.6))
    drop-shadow(-2px -2px 2px rgba(255, 255, 255, 0.5))
    drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.6))
    drop-shadow(2px 2px 2px rgba(255, 255, 255, 0.5));
    animation: move-down 1s infinite;
}
#pointer {
    position: absolute;
    bottom:200px;
}
video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Dopasowanie wideo do kontenera */
  transform: translate(-50%, -50%);
  z-index: -1; /* Wideo pod treścią */
  pointer-events: none; 
}

video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button {
    display: none !important;
    -webkit-appearance: none;
}


.menu-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(
    255,
    255,
    255,
    0.8
  ); /* Półprzezroczyste tło dla menu */
  padding: 10px 0;
  height: 200px;
  z-index: 2; /* Menu nad wideo */
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: ahamono, "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}
/* .menu-bar nav a {
  color: #fff;
  text-decoration: none;
  font-size: 25px;
  margin: 0 5px;
} */
.wrapper {
  display: flex;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  flex-wrap: wrap;
  background-color: var(--violet);
  justify-content: space-between;
  row-gap: 1px;
}
.square {
  display: flex;
  width: calc(50dvw - 0.5px);
  height: calc((100dvh - 200px) / 3);
  background-color: #ffffff;
  /* max-width: 333px; */
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color:#000;
  text-decoration: none;
  transition: all .3s ease-in-out;
}
.square:hover {
    background-color: var(--violet-light-transparent);
}
.square img {
    /* padding-top:1rem; */
    /* width: 64px !important; */
    /* height: 64px !important; */
}
.square span {
    display:block;
    padding:.5rem 1.5rem 0 1.5rem;
    text-align: center;
}
@font-face {
  font-family: "ahamono";
  src: url("/fonts/ahamono.woff2") format("woff2");
}
/* canvas nadal pełnoekranowe, ale blur robi CSS (GPU) */
#fog-canvas {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: 0;
  filter: blur(3px);
}
.title {
  position: absolute;
  top: calc(50% + 50px);
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-family: ahamono;
  text-transform: uppercase;
  /* font-size: 2.5rem; */
  font-size: clamp(1.5rem, 7vw, 3rem);
  filter: drop-shadow(-2px -2px 2px rgba(138, 101, 224, 0.6))
    drop-shadow(-4px -4px 4px rgba(138, 101, 224, 0.5))
    drop-shadow(-8px -8px 8px rgba(138, 101, 224, 0.4))
    drop-shadow(4px 4px 2px rgba(138, 101, 224, 0.6))
    drop-shadow(6px 6px 4px rgba(138, 101, 224, 0.5))
    drop-shadow(10px 10px 8px rgba(138, 101, 224, 0.4));
  z-index: 1;
  pointer-events: none;
  /* white-space: nowrap; */
  text-align: center;
  transition: opacity 0.6s ease-in-out;
  opacity: 1;
}
/* klasa „wyciszająca” */
.title.fade-out {
  opacity: 0;
}

@media (min-width: 900px) {
  .hamburger {
    display: none;
  }
  .left {
    flex-direction: row;
    gap: 0.5rem;
    padding: 1rem;
  }
  .left,
  .right {
    width: auto;
  }
  .person_desktop {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
  }
  .person_desktop span {
    text-transform: uppercase;
    text-decoration: none;
    color: var(--violet);
  }
  .person {
    display: none;
  }
  .top-nav {
    display: flex;
    flex-direction: row;
    min-width: unset;
    width: auto;
    max-width: unset;
    background-color: transparent;
    min-height: unset;
    height: auto;
    position: initial;
    top: 0px;
    left: 0px;
    margin-left: unset;
    opacity: 1;
    transition: all 0.3s ease-in-out;
    font-size: 22px;
    padding: 1rem;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0px solid var(--violet);
    border-right: 0px solid var(--violet);
    z-index: 2;
  }
  .menu-bar {
    justify-content: space-around !important;
  }
  .home {
    width: unset;
    padding-top: unset;
    padding: 0.5rem;
  }
  .sm {
    display: none;
  }
  .nav-inside {
    width: unset;
    padding-bottom: unset;
  }
  .nav-inside ul {
    display: flex;
    gap: 0.5rem;
  }
  .fb_desktop,
  .insta_desktop {
    width: 64px;
    height: 64px;
  }
  .wrapper {
    display: flex;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: wrap;
    background-color: var(--violet);
    justify-content: space-between;
    /* gap: 1px; */
    row-gap: 1px;
  }
  .square {
    display: flex;
    width: calc(33.33% - .7px);
    height: calc((100dvh - 300px) / 2);
    background-color: #ffffff;
    max-width: unset;
    font-size:1.2rem;

  }
  .square span {
    max-width:300px;
  }
    .square img {
    width:120px;
    height:120px;;
  }
  .squares {
    padding: 50px 0;
  }
}
@keyframes move-down {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}
footer {
     display:flex;
    justify-content: center;
    align-items: center;
     width:100%;
     padding:1rem;
     flex-direction: column;
     gap:1rem;
     background-color: var(--violet);
     position:relative;
     z-index: 9999;
}

footer .linki {
    display:flex;
    justify-content: center;
    align-items: center;
    width:100%;
    padding:1rem 0 .5rem 0;
    gap:1rem;
    font-family:ahamono;
    font-size:1rem;
}

.linki a, .tworca a {
    text-decoration: none;
    color: #fff;
    cursor:pointer;
}
footer .tworca {
    display:flex;
    justify-content: center;
    align-items: center;
    /* width:100%; */
    padding-bottom:.5rem;
    gap:.5rem;
    font-family:ahamono;
    font-size:1rem;
    color: #fff;
}
footer .bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    max-width: 1400px;
    /* gap:1rem; */
    column-gap: 2rem;
    row-gap: 1rem;
    flex-wrap: wrap;
}
.copyright {
    color:#fff;
    padding-bottom:.5rem;
}