* { box-sizing: border-box; }

body {
    /*padding: 20px;*/
    background: #81B85A;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    text-align: center;
    line-height: 1.2em;
    font-size: 12pt;
}

p {
    margin: 30px 0 10px 0;
}

p strong {
  font-weight: 500;
}

p em {
  color: #f1e64c;
  font-weight: 300;
}

a {
    /*color: orange;*/
    color: #d8f5a2;
    text-decoration: none;
}

.maxwidth {
  width: 100%;
  height: calc(100vh - 65px);
}

.logo img {
    max-width: 100%;
    height: auto;
}

p.logo {
    margin: 0;
}

div.bordered {
    border: 1px solid rgba(0,0,0,0.1);;
    background: rgba(0,0,0,0.05);;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

div.small-padding {
  padding: 0 20px;
}

button, input {
    background: rgba(0,0,0,0.2);
    border: 0;
    color: white;
    font-size: 12pt;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    padding: 10px 0;
    font-weight: 400;
}

.bordered input {
    border: 0;
    border-bottom: 2px solid rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.1);
    color: white;
    margin: 10px 20px;
    outline: none;
}

.bordered p, .bordered input {
    display: inline-block;
    line-height: 1em;
    /*margin: 0;*/
}

.bordered input::placeholder {
  color: rgba(255,255,255,0.4);
}

.bordered input:focus::placeholder {
  color: rgba(255,255,255,0.1);
}

span.bolder {
  font-weight: 300;
}

form {
  margin-top: 30px;
}

input[type="radio"]:checked + label {
  color: white;
  background: rgba(0,0,0,0.2);;
  font-weight: 300;
}

input[type="radio"] + label {
  line-height: 2em;
  padding: 10px 10px;
}

input[type="radio"] {
  display: none;
}

div[role="radiogroup"] {
  margin-top: 20px;
}

button {
    padding: 15px 30px;
}

button:disabled {
    opacity: 0.1;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 0;
  -webkit-text-fill-color: yellow;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

#p1 {
  display: block;
}

#p2, #p3, #button2, #button3 {
  display: none;
}

img.shake {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.2s;

  /* When the animation is finished, start again */
  animation-iteration-count: 1;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.centerFlex {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}

.acziki {
  display: flex;
  align-items: center;
  background-color: rgba(0,0,0,0.05);
  padding: 15px 10px;
  border: 1px solid rgba(0,0,0,0.05);
  margin-top: 30px;
}

.acziki .icon img {
  max-width: 32px;
  margin-right: 10px;
}

.acziki .desc {
  width: 100%;
  padding: 0 10px;
}

.acziki .desc span {
  font-size: 75%;
}

.acziki .desc span strong {
  font-weight: 300;
}

.pb-border {
  margin-top: 5px;
  height: 8px;
  width: 100%;
  background: rgba(0,0,0,0.1);
  border: 1px solid rgba(0,0,0,0.05);
}

.pb-bar {
  background-color: #ffffff94;
  width: 2%;
  height: 100%;
}

.inwentarz {
  display: flex;
  align-items: center;
  background-color: rgba(0,0,0,0.05);
  padding: 15px 10px;
  border: 1px solid rgba(0,0,0,0.05);
  margin-top: 30px;
  flex-wrap: wrap;
  justify-content: space-around;
}

.inwentarz .icon img {
  max-width: 32px;
}

p#nawigacja {
  margin-bottom: 50px;
}

p.padlocks {
  display: flex;
  margin-top: 0;
}

.padlocks img {
  max-width: 30vw;
}

.spacer {
  width: 100%;
  height: 1px;
  padding-bottom: 60px;
}

.radial {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 10;

  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.radial::before {
  content: "";
  position: absolute;
  width: 400%;
  height: 400%;
  top: -150%;
  left: -150%;
  z-index: -1;
  background: url(radial.png);
  background-size: cover;
  background-position: center center;
  transform: rotate(30deg);
  animation: rotation 10s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.item {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;

  box-shadow: 0 0 100px 100px white;
  background: white;
  border-radius: 50%;

  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.item img {
  animation: scale 0.5s 1 ease-out;
}

@keyframes scale {
  from {
    transform: scale(0) rotate(0deg);
  }
  to {
    transform: scale(1) rotate(360deg);
  }
}

.search {
  height: 60vw;
  width: 100%;
  position: relative;
  background-image: url('mural.jpg');
  background-position: center;
  background-size: cover;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}

#focus {
  --Xpos: 1000px;
  --Ypos: 1000px;
  touch-action: none;
  overscroll-behavior: none;
}

/*#focus::before {*/
#insideFocus {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  touch-action: none;
  background: radial-gradient( circle 15vw at var(--Xpos) var(--Ypos), rgba(129,184,90,0) 80%, rgba(128,184,90,1) );
  overscroll-behavior: none;
}

.lead .max-width {
  max-width: 100%;
}

s.redacted {
  text-decoration: none;
  /*background-color: black;*/
  color: white;
  animation: blink 3s linear infinite;
  /*padding: 0 5px;*/
}

@keyframes blink {
  /* H */
  0% { color: transparent; }
  1% { color: white; }
  2% { color: transparent; }
  3% { color: white; }
  4% { color: transparent; }
  5% { color: white; }
  6% { color: transparent; }
  
  7% { color: white; }
  8% { color: white; }
  9% { color: white; }

  /* K */
  10%{ color: transparent; }
  11%{ color: transparent; }
  12%{ color: transparent; }
  13%{ color: white; }
  14%{ color: transparent; }
  15%{ color: white; }
  16%{ color: transparent; }
  17%{ color: transparent; }
  18%{ color: transparent; }

  19%{ color: white; }
  20%{ color: white; }
  21%{ color: white; }

  /* W */
  22%{ color: transparent; }
  23%{ color: white; }
  24%{ color: transparent; }
  25%{ color: transparent; }
  26%{ color: transparent; }
  27%{ color: white; }
  28%{ color: transparent; }
  29%{ color: transparent; }
  30%{ color: transparent; }

  31%{ color: white; }
  99%{ color: white; }
}

#countdown {
  font-weight: 400;
}

label img {
  max-width: 100%;
  position: relative;
  top: 15px;
}

ul.punkty li{
  /*list-style-type: disc;
  list-style-position: inside;
  text-align: left;*/
  background: rgba(0,0,0,0.05);
  margin: 10px;
  padding: 20px 10px;
}

.punkty li img {
  max-width: 100%;
  margin-top: 20px;
}

.anim-cane img, .anim-hat img, .anim-cane-f img,
.anim-cane, .anim-hat, .anim-cane-f {
  max-width: 100%;
  width: 100%;
}

.anim-cane, .anim-hat, .anim-cane-f {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.anim-cane img, .anim-hat img, .anim-cane-f img {
  position: relative;
  right: -100px;
}

@keyframes cane {
  0% { right: -100px; top: -30px; }
  50% { right: 0; top: -30px; }
  60% { right: 0; top: 0px; }
  97% { right: 0; }
  100% { right: -100px; }
}

@keyframes hat {
  0% { right: 0; }
  98% { right: 0; }
  100% { right: -100px; }
}

.play.anim-cane img, .play.anim-cane-f img {
  animation: cane 10s linear;
}

.play.anim-hat img {
  animation: hat 10s linear;
}

.anim-cane { z-index: 1; }
.anim-hat { z-index: 2; }
.anim-cane-f { z-index: 3; }

.anim-eyes img, .anim-eyes {
  max-width: 100%;
  width: 100%;
}

.anim-eyes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  animation: eyesblink 10s infinite;
  opacity: 0;
}

.anim-eyes.delay {
  animation-delay: 2s;
}

@keyframes eyesblink {
  0%    { opacity: 0; }
  48%   { opacity: 0; }
  49%   { opacity: 1; }
  50%   { opacity: 0; }
  94%   { opacity: 0; }
  95%   { opacity: 1; }
  96%   { opacity: 0; }
  100%  { opacity: 0; }
}

p.sevenpadlocks {
  display: flex;
  justify-content: center;
  margin-top: 0;
}

.sevenpadlocks img {
  max-width: 12vw;
}

.widerspacing {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: 80%;
}

.sevenletters {
  display: flex;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 30px;
}

.sevenletters > span {
  width: 12vw;
  height: 12vw;
  /*background-color: rgba(0,0,0,0.05);*/
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  text-transform: uppercase;
  padding: 5px;
}

.sevenletters span span {
  width: 12vw;
  height: 12vw;
  background-color: rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  text-transform: uppercase;
}

.fadedform {
  position: relative;
}

.fadedform input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 12vw;
  opacity: 0;
}

.smaller {
  font-size: 80%;
  line-height: 1.2em;
  margin: 30px 0;
}

.smaller p {
  margin: 15px 0 5px 0;
}

.debug {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.2);
  z-index: 9999;
}

.bignumber {
  font-size: 200%;
  font-weight: 400;
  color: #ffff8d;
}

.secretending {
  opacity: 0;
  animation: morsecode 14s linear infinite;
  font-weight: 900;
  color: white;
}

@keyframes morsecode {
  0%   { opacity: 0; }
  
  /* H .... */
  10%  { opacity: 0; }
  11%  { opacity: 1; } /* dot */
  12%  { opacity: 0; }
  13%  { opacity: 1; } /* dot */
  14%  { opacity: 0; }
  15%  { opacity: 1; } /* dot */
  16%  { opacity: 0; }
  17%  { opacity: 1; } /* dot */
  18%  { opacity: 0; }

  /* K -.- */
  28%  { opacity: 0; }
  29%  { opacity: 1; } /* dash */
  30%  { opacity: 1; }
  31%  { opacity: 1; }
  32%  { opacity: 0; }
  33%  { opacity: 1; } /* dot */
  34%  { opacity: 0; }
  35%  { opacity: 1; } /* dash */
  36%  { opacity: 1; }
  37%  { opacity: 1; }
  38%  { opacity: 0; }

  /* M .-- */
  48%  { opacity: 0; }
  49%  { opacity: 1; } /* dot */
  50%  { opacity: 0; }
  51%  { opacity: 1; } /* dash */
  52%  { opacity: 1; }
  53%  { opacity: 1; }
  54%  { opacity: 0; }
  55%  { opacity: 1; } /* dash */
  56%  { opacity: 1; }
  57%  { opacity: 1; }
  58%  { opacity: 0; }
  
  100%  { opacity: 0; }
}

.onlylock img {
  max-width: 20vw;
}

#mylock {
  margin-top: 200px;
  padding-bottom: 50px;
  display: flex;
}

.letterlock {
  width: 20vw;
  height: 22vw;
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.1);
  line-height: 22vw;
  font-size: 18vw;
  font-weight: 900;
  color: rgba(255,255,255,0.4);
}

.onlylock {
  display: flex;
  align-content: center;
  align-items: center;
}

.letterlock {
  margin: 0 5px;
}