/* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· *\
│· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · STANDARDOWE USTAWIENIA STRONY · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·│
\* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· */
*{
  padding: 0;
  box-sizing: border-box;
  margin: 0;
  font-style: normal;
  font-variant: normal;
  font-family: 'ff', Arial;
  font-weight: normal;
  scrollbar-width: none;
  overscroll-behavior: none;
  color: #0ff;
  user-select: none;
  -webkit-user-select: none;
  text-decoration: none;
  outline: none;
  border: none;
}
html, body {
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}
@font-face {
  font-family: 'ff';
  src: url('n.woff') format('woff');
}
::-webkit-scrollbar {
  display: none;
}
html {
  background: radial-gradient(#47f 1px, transparent 0) center center/40px 40px, radial-gradient(#47f 1px, transparent 0) calc(50% - 20px) calc(50% - 20px)/40px 40px, #00e;
  overflow-x: hidden;
}
::selection {
  background: transparent;
  text-shadow: 0px 0px 3px #0ff;
  color: #fff;
}
* img{
  pointer-events: none;
}

/* Znikanie ekranu gdy szerokość < 300 */
@media (max-width: 299px){
  html::after {
    content: '';
    position: fixed;
    height: 100%;
    width: 100%;
    background: url("../img/resize.svg") center/49% fixed no-repeat;
  }
  body {
    display: none;
  }
}



/* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· *\
│· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ROZPOCZĘCIE MENU SEKCJI STRONY ··· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·│
\* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· */
#menu, #mEmpty {
  width: 100%;
  min-height: 44px;
  max-height: 44px;
  height: 44px;

  animation: showup 50ms ease-in .1s 1 normal both;
  position: absolute;
  z-index: 1;
}
#menu {
  position: relative;
  background: #00e;
  z-index: 9;
}

/* lewa część menu */
.menu-left {
  left: calc(2.5px + (5 - 2.5) * ((100vw - 300px) / (1620)));
  min-height: 44px;
  max-height: 44px;
  height: 44px;
  transform-origin: left;
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 1;
}
.menu-left {
  display: flex;
  align-items: center;
}
.menu-left img {
  height: 18px;
}
.menu-left img:last-child {
  margin-left: 8px;
}
.menu-left h1 {
  font-size: 25.3px;
  margin-left: 9px;
  margin-top: 1px;
}
#icon {
  height: 38px;
  width: 38px;
  min-height: 38px;
  min-width: 38px;
  max-height: 38px;
  max-width: 38px;
  border-radius: 50%;
  cursor: pointer;
  object-fit: cover;
  background: #0ff3;
  z-index: 9;
  pointer-events: all;
}
 #avatarinput[type="file"] {
  display: none;
}

/* prawa część menu */
.menu-right {
  right: calc(2.5px + (5 - 2.5) * ((100vw - 300px) / (1620)));
  min-height: 44px;
  max-height: 44px;
  height: 44px;
  transform-origin: right;
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 1;
}
.menu-right div {
  display: flex;
  align-items: center;
  margin: 0 calc(10px + (15 - 10) * ((100vw - 300px) / (1920 - 300)));
  cursor: pointer;
  padding: calc(22px + (4 - 22) * ((100vw - 300px) / (1920 - 300))) 0;
}
.menu-right div img {
  margin: 0 8px;
  height: 18px;
}
.menu-right div h1 {
  font-size: 25.3px;
  margin-top: 1px;
}
.menu-right div:last-child, .menu-right div img:last-child {
  margin-right: 0;
}

/* stopki w menu */
.menux.clickedy, .menux.clickedy h1  {
  filter: brightness(0%) invert(100%);
}
.menux.clickedy:last-child {
  filter: none;
}
@media (max-width: 599px) {
  .menux.clickedy h1 {
    display: flex;
  }
  .menux.unclickedy h1, .menux.unclickedy img:nth-of-type(2) {
    display: none;
  }
}
/* ikona jezyka */
#menulang img {
  border-radius: 50%;
  width: 18px;
  object-fit: cover;
}

/* zmniejszanie okna - skalowanie i zmienianie */
@media (max-width: 1920px) {
  #menu, #mEmpty, .menu-right, .menu-left {
    min-height: calc(32px + (44 - 32) * ((100vw - 300px) / (1920 - 300)));
    max-height: calc(32px + (44 - 32) * ((100vw - 300px) / (1920 - 300)));
    height: calc(32px + (44 - 32) * ((100vw - 300px) / (1920 - 300)));
  }
}

/* zanikanie wyrazów od zakładek strony */
@media (max-width: 599px) {
  .menu-right h1 {
    display: none;
  }
}

/* animacje pojawiania */
#menuplay, #menuquests, #menupinatas, #menustats, #menulang, .menu-left {
  animation: appear .1s ease-in .2s 1 normal both;
}
.menu-left {
  animation-duration: 120ms;
}
#menulang {
  animation-duration: 120ms;
}
#menustats {
  animation-duration: 240ms;
}
#menupinatas {
  animation-duration: 360ms;
}
#menuquests {
  animation-duration: 480ms;
}
#menuplay {
  animation-duration: 600ms;
}



/* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· *\
│· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·ROZPOCZĘCIE PLAY SEKCJI STRONY·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·│
\* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· */
/* sekcja druga strony startowej - pole wpisywania */
#scn2-play {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-y:scroll;
  z-index: 1;
}
.rw {
  flex: 1;
  display: flex;
  width: 100%;
  height: 33.33%;
  min-height: 33.33%;
  max-height: 33.33%;
}
.cp {
  flex: 1;
  width: 33%;
  display: flex;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: calc(9px + 1vw);
  margin: 0 calc(2.5px + (5 - 2.5) * ((100vw - 300px) / (1620)));
  margin-bottom: calc(5px + (10 - 5) * ((100vw - 300px) / (1620)));
  background: linear-gradient(144deg, #6cacff25 0%, #0ff2 50%, #6cacff25 100%);
  border: solid #0ff2 calc(1px + 1 * ((100vw - 300px) / 1620));
}
.cp p {
  text-align: center;
  font-size: calc(25px + (100vw - 300px) * 0.0352222222);
  font-weight: 900;
  color: #22c1ff;
  z-index: 2;
}
.cp h1 {
  position: absolute;
  left: calc(7px + (11 - 7) * ((100vw - 300px) / (1920 - 300)));
  bottom: calc(3px + (7 - 3) * ((100vw - 300px) / (1920 - 300)));
  font-size: calc(11px + (24 - 11) * ((100vw - 300px) / (1920 - 300)));
  font-weight: 900;
  color: #2a81f3;
  z-index: 2;
}
.cp img {
  width: 84%;
  height: 84%; 
  object-fit: contain;
  opacity: 0.2;
  position: absolute;
  pointer-events: none;
}
/* animacje pojawiania się kafelków */
.cp {
  animation: appear .1s ease-in .2s 1 normal both;
}

.rw:nth-child(1) .cp:nth-child(1) {
  animation-duration: 120ms;
}
.rw:nth-child(1) .cp:nth-child(2) {
  animation-duration: 240ms;
}
.rw:nth-child(1) .cp:nth-child(3) {
  animation-duration: 360ms;
}

.rw:nth-child(2) .cp:nth-child(1) {
  animation-duration: 480ms;
}
.rw:nth-child(2) .cp:nth-child(2) {
  animation-duration: 600ms;
}
.rw:nth-child(2) .cp:nth-child(3) {
  animation-duration: 720ms;
}

.rw:nth-child(3) .cp:nth-child(1) {
  animation-duration: 840ms;
}
.rw:nth-child(3) .cp:nth-child(2) {
  animation-duration: 960ms;
}
.rw:nth-child(3) .cp:nth-child(3) {
  animation-duration: 1080ms;
}

.rw:nth-child(4) .cp:nth-child(1) {
  animation-duration: 1200ms;
}
.rw:nth-child(4) .cp:nth-child(2) {
  animation-duration: 1320ms;
}
.rw:nth-child(4) .cp:nth-child(3) {
  animation-duration: 1440ms;
}

.rw:nth-child(5) .cp:nth-child(1) {
  animation-duration: 1560ms;
}
.rw:nth-child(5) .cp:nth-child(2) {
  animation-duration: 1680ms;
}
.rw:nth-child(5) .cp:nth-child(3) {
  animation-duration: 1800ms;
}

.rw:nth-child(6) .cp:nth-child(1) {
  animation-duration: 1920ms;
}
.rw:nth-child(6) .cp:nth-child(2) {
  animation-duration: 2040ms;
}
.rw:nth-child(6) .cp:nth-child(3) {
  animation-duration: 2160ms;
}

/* poziome paski dla szerokości ekranu poniżej 600px */
@media (max-width: 599px) {
  .rw {
    flex-direction: column;
    height: 50%;
    min-height: 50%;
    max-height: 50%;
  }
  .cp {
    flex: 1;
    height: 16%;
    min-height: 16%;
    width: auto;
  }
}




/* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· *\
│· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·ROZPOCZĘCIE QUESTS SEKCJI STRONY ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·│
\* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· */
#scn2-quests {
  width: 100%;
  display: none;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.rowquests {
  flex: 1;
  display: flex;
  width: 100%;
  height: 50%;
}
.colquests {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: grab;
  border-radius: calc(9px + 1vw);
  margin: 0 calc(2.5px + (5 - 2.5) * ((100vw - 300px) / (1620)));
  margin-bottom: calc(5px + (10 - 5) * ((100vw - 300px) / (1620)));
  border: solid #0ff2 calc(1px + 1 * ((100vw - 300px) / 1620));
  border-right-color: #0000;
  border-left-color: #0ff4;
}
.colquests p {
  text-align: center;
  font-size: calc(25px + (100vw - 300px) * 0.0352222222);
  font-weight: 900;
  color: #22c1ff;
  z-index: 2;
}
.colquests h1, .colquests h2, .colquests h3 {
  position: absolute;
  bottom: calc(3px + (7 - 3) * ((100vw - 300px) / (1920 - 300)));
  font-size: calc(11px + (24 - 11) * ((100vw - 300px) / (1920 - 300)));
  font-weight: 900;
  color: #2a81f3;
  z-index: 2;
}
.colquests h1 {
  left: calc(7px + (11 - 7) * ((100vw - 300px) / (1920 - 300)));
}
.colquests h2 {
  right: calc(7px + (11 - 7) * ((100vw - 300px) / (1920 - 300)));
}
.colquests h3 {
  text-align: center;
}
.colquests img {
  width: 84%;
  height: 84%; 
  object-fit: contain;
  opacity: 0.2;
  position: absolute;
  pointer-events: none;
}
/* animacje pojawiania */
#quest-winned, #quest-played {
  animation: appear .1s ease-in .2s 1 normal both;
}
#quest-winned { 
  animation-duration: 120ms;
}
#quest-played { 
  animation-duration: 240ms;
}


/* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· *\
│· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·ROZPOCZĘCIE PINIAT SEKCJI STRONY ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·│
\* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· */
#scn2-pinatas {
  width: 100%;
  display: none;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.rowllama {
  flex: 1;
  display: flex;
  width: 100%;
  height: 50%;
  min-height: 50%;
  max-height: 50%;
}
.colllama {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: calc(9px + 1vw);
  margin: 0 calc(2.5px + (5 - 2.5) * ((100vw - 300px) / (1620)));
  margin-bottom: calc(5px + (10 - 5) * ((100vw - 300px) / (1620)));
  background: linear-gradient(144deg, #6cacff25 0%, #0ff2 50%, #6cacff25 100%);
  border: solid #0ff2 calc(1px + 1 * ((100vw - 300px) / 1620));
}
.colllama p {
  text-align: center;
  font-size: calc(25px + (100vw - 300px) * 0.0352222222);
  font-weight: 900;
  color: #22c1ff;
  z-index: 2;
}
.colllama h1 {
  position: absolute;
  left: calc(7px + (11 - 7) * ((100vw - 300px) / (1920 - 300)));
  bottom: calc(3px + (7 - 3) * ((100vw - 300px) / (1920 - 300)));
  font-size: calc(11px + (24 - 11) * ((100vw - 300px) / (1920 - 300)));
  font-weight: 900;
  color: #2a81f3;
  z-index: 2;
  width: 50%;
}
.colllama .llama {
  width: 84%;
  height: 84%; 
  object-fit: contain;
  opacity: 0.2;
  position: absolute;
  pointer-events: none;
}
.colllama .profitllama {
  width: 25%;
  height: 25%;
  bottom: 26.5%;
  object-fit: contain;
  opacity: 0.2;
  position: absolute;
  pointer-events: none;
}
/* animacje pojawiania się kafelków */
#llama1, #llama2, #llama3, #llama4 {
  animation: appear .1s ease-in .2s 1 normal both;
}
#llama1 { 
  animation-duration: 120ms;
}
#llama2 { 
  animation-duration: 240ms;
}
#llama3 { 
  animation-duration: 360ms;
}
#llama4 { 
  animation-duration: 480ms;
}
/* poziome paski dla szerokości ekranu poniżej 600px */
@media (max-width: 599px) {
  .rowllama {
    flex-direction: column;
  }
  .colllama {
    flex: 1;
    height: 16%;
    min-height: 16%;
    width: auto;
  }
}



/* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· *\
│· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·ROZPOCZĘCIE STATS SEKCJI STRONY· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·│
\* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· */
#scn2-stats {
  width: 100%;
  display: none;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.rowstats {
  flex: 1;
  display: flex;
  width: 100%;
  height: 50%;
}
.colstats {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: grab;
  border-radius: calc(9px + 1vw);
  margin: 0 calc(2.5px + (5 - 2.5) * ((100vw - 300px) / (1620)));
  margin-bottom: calc(5px + (10 - 5) * ((100vw - 300px) / (1620)));
  background: linear-gradient(144deg, #6cacff25 0%, #0ff2 50%, #6cacff25 100%);
  border: solid #0ff2 calc(1px + 1 * ((100vw - 300px) / 1620));
}
.colstats p {
  text-align: center;
  font-size: calc(25px + (100vw - 300px) * 0.0352222222);
  font-weight: 900;
  color: #22c1ff;
  z-index: 2;
}
.colstats h1 {
  position: absolute;
  left: calc(7px + (11 - 7) * ((100vw - 300px) / (1920 - 300)));
  bottom: calc(3px + (7 - 3) * ((100vw - 300px) / (1920 - 300)));
  font-size: calc(11px + (24 - 11) * ((100vw - 300px) / (1920 - 300)));
  font-weight: 900;
  color: #2a81f3;
  z-index: 2;
}
.colstats img {
  width: 84%;
  height: 84%; 
  object-fit: contain;
  opacity: 0.2;
  position: absolute;
  pointer-events: none;
}
/* animacje pojawiania się kafelków */
#period, #levels, #winned, #played, #looses {
  animation: appear .1s ease-in .2s 1 normal both;
}
#period { 
  animation-duration: 100ms;
}
#levels { 
  animation-duration: 250ms;
}
#winned { 
  animation-duration: 400ms;
}
#played { 
animation-duration: 550ms;
}
#looses { 
animation-duration: 700ms;
}
/* poziome paski dla szerokości ekranu poniżej 600px */
@media (max-width: 599px) {
  .rowstats {
    flex-direction: column;
  }
  .row1 {
    height: 40%;
    min-height: 40%;
    max-height: 40%;
  }
  .row2 {
    flex-direction: column;
    width: 100%;
    height: 60%;
    min-height: 60%;
    max-height: 60%;
  }
  .colstats {
    height: 20%;
  }
}




/* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· *\
│· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·ROZPOCZĘCIE LANG SEKCJI STRONY · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·│
\* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· */
#scn2-lang {
  width: 100%;
  display: none;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.rowlang {
  flex: 1;
  display: flex;
  width: 100%;
  height: 50%;
}
.collang {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: calc(9px + 1vw);
  margin: 0 calc(2.5px + (5 - 2.5) * ((100vw - 300px) / (1620)));
  margin-bottom: calc(5px + (10 - 5) * ((100vw - 300px) / (1620)));
  background: linear-gradient(144deg, #6cacff25 0%, #0ff2 50%, #6cacff25 100%);
  border: solid #0ff2 calc(1px + 1 * ((100vw - 300px) / 1620));
}
.collang p {
  text-align: center;
  font-size: calc(25px + (100vw - 300px) * 0.0352222222);
  font-weight: 900;
  color: #22c1ff;
  z-index: 2;
}
.collang h1 {
  position: absolute;
  left: calc(7px + (11 - 7) * ((100vw - 300px) / (1920 - 300)));
  bottom: calc(3px + (7 - 3) * ((100vw - 300px) / (1920 - 300)));
  font-size: calc(11px + (24 - 11) * ((100vw - 300px) / (1920 - 300)));
  font-weight: 900;
  color: #2a81f3;
  z-index: 2;
}
.collang img {
  width: 84%;
  height: 84%; 
  object-fit: contain;
  opacity: 0.4;
  position: absolute;
  pointer-events: none;
}
/* poziome paski dla szerokości ekranu poniżej 600px */
@media (max-width: 599px) {
  .rowlang {
    flex-direction: column;
  }
  .rowlang1 {
    height: 50%;
    min-height: 50%;
    max-height: 50%;
  }
  .rowlang2 {
    flex-direction: column;
    width: 100%;
    height: 50%;
    min-height: 50%;
    max-height: 50%;
  }
  .collang {
    height: 25%;
  }
}
/* animacje pojawiania */
#choosePL, #chooseEN, #chooseES, #privacyget {
  animation: appear .1s ease-in .2s 1 normal both;
}
#choosePL { 
  animation-duration: 120ms;
}
#chooseEN { 
  animation-duration: 240ms;
}
#chooseES { 
  animation-duration: 360ms;
}
#privacyget { 
  animation-duration: 480ms;
}




/* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· *\
│· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·ANIMACJE NA STRONIE· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·│
\* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· */
/* animacja pojawianie się wraz z odblokowywaniem naciskania */
@keyframes appear {
  0%{ opacity: 0; pointer-events: none;}
  50%{ opacity: 1;}
  100%{ pointer-events: all;}
}



/* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· *\
│· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ··ROZPOCZĘCIE KRATKOWEJ SEKCJI STRONY·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·│
\* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· */
#scn6 {
  width: 100%;
  min-height: 50%;
  max-height: 50%;
  height: 50%;

  display: none;
  text-align: center;
  
  justify-content: center;
  align-items: center;

  position: relative;
  z-index: 1;
}


.dashes span {
  color: #fff;
  font-size: 30px;
}

.dashes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: #fff;

  margin: 20px;
  font-size: 60px;
  /* font-size: 3.4vw; */
}

@media (max-width: 1200px) {
  .dashes {
    font-size: 50px;
  }
}

@media (max-width: 800px) {
  .dashes {
    font-size: 40px;
  }
}

@media (max-width: 669px) {
  .dashes {
    font-size: 32px;
  }
}


@media (max-width: 620px) {
  .dashes {
    font-size: 28px;
  }
}

@media (max-width: 400px) {
  .dashes {
    font-size: 24px;
  }
}

@media (max-width: 350px) {
  .dashes {
    font-size: 20px;
  }
}



/* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· *\
│· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ··ROZPOCZĘCIE RYSOWANEJ SEKCJI STRONY·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·│
\* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· */
#scn5 {
  width: 100%;
  min-height: 50%;
  max-height: 50%;
  height: 50%;
  top: 0;

  display: none;
  text-align: center;
  
  justify-content: center;
  align-items: center;
 
  position: absolute;
  z-index: 1;
}

#hangman-svg {
  height: 97%;
  width: 97%;
  object-fit: cover;

  opacity: 0.35;
  background: #0ff0;
  position: relative;
}

#hangman-mode {
  left: 0;
}
#hangman-hint {
  right: 0;
  cursor: pointer;
}
#hangman-mode, #hangman-hint {
  width: calc(96vw/10);
  height: calc(50vh/3);
  margin: calc(2vw/10);

  display: flex;
  overflow: hidden;
  position: absolute;
  align-items: center;
  justify-content: center;
  top: 0;

  border-radius: calc(5px + 1vw);
  background: linear-gradient(144deg, #6cacff25 0%, #0ff2 50%, #6cacff25 100%);
  border: solid #0ff2 calc(1px + 1 * ((100vw - 300px) / 1620));
}
#hangman-mode img, #hangman-hint .hint-icon {
  pointer-events: none;
  object-fit: contain;
  height: 84%;
  width: 84%;
}
#hangman-hint .diax-icon {
  position: absolute;  
  pointer-events: none;
  object-fit: contain;
  margin-top: 2%;
  height: 23%;
  width: 23%;
}




/* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· *\
│· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ROZPOCZĘCIE KLAWIATUROWEJ SEKCJI STRONY ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·│
\* ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· · ‹ᴄss› · ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· ·· */
#scn4 {
  width: 100%;
  min-height: 50%;
  max-height: 50%;
  height: 50%;

  position: relative;
  z-index: 1;

  display: none;
}

#keyboard {
  width: 100%;
  display: block;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  transform: scale(1.0);
  position: relative;
}

#keyer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#keyer div {
  display: flex;
  position: relative;
  overflow: hidden;
  width: calc(96vw/10);
  margin-right: calc(2vw/10);
  margin-left: calc(2vw/10);


  align-items: center;
  justify-content: center;
  cursor: pointer;

  border-radius: calc(5px + 1vw);
  background: linear-gradient(144deg, #6cacff25 0%, #0ff2 50%, #6cacff25 100%);
  border: solid #0ff2 calc(1px + 1 * ((100vw - 300px) / 1620));
}
#keyer img {
  pointer-events: none;
  object-fit: contain;
  height: 100%;
  width: 100%;
}


#SearchDixit {
  width: calc(100vw - (5px + 5 * ((100vw - 300px) / 1620)));
  max-width: calc(100vw - (5px + 5 * ((100vw - 300px) / 1620)));
  margin-left: calc(2.5px + 2.5 * ((100vw - 300px) / 1620));
  min-height: 49.5%;
  max-height: 49.5%;
  height: 49.5%;
  position: relative;
  display: none;
  z-index: 11;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  
  border-radius: calc(5px + 1vw);
  background: linear-gradient(to right, #0ff2 0%, #0ff1 0%);
  border: solid #0ff2 calc(1px + 1 * ((100vw - 300px) / 1620));  
}
#SearchDixit img {
  width: 44%;
  height: 44%; 
  object-fit: contain;
  opacity: 0.35;
  position: absolute;
  pointer-events: none;
}