@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
html, body {margin: 0; padding: 0; font-family: 'Bebas Neue', impact; font-size: 2.5vh; overflow: hidden; position: fixed; width: 100vw; height: 100vh;}

    .center, #loading, .krypl {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    #loading {animation: loading 10s infinite cubic-bezier(.73,.43,.4,.57); transition: all 0.2s linear; z-index: 9999; margin-left: 2vh;}
    .krypl {width: 15vh; height: 15vh; background: blue;}
    #content {animation: fadein 0.5s; -webkit-animation-fill-mode: forwards;} /*background: url('https://i.pinimg.com/originals/6c/72/8d/6c728daa4f53b64c66c6a508e9624e89.jpg') center center; background-size: cover; width: 100%; height: 100%;*/
      #content.fadeout, #over.fadeout {animation: fadeout 0.5s; -webkit-animation-fill-mode: forwards;}

    #m, #a, #c, #e {width: 20vh; height: 20vh; position: absolute; opacity: 0;}
    #m {background: url('/data/m.png') center center no-repeat; background-size: contain; z-index: 4;}
    #a {background: url('/data/a.png') center center no-repeat; background-size: contain; z-index: 2;}
    #c {background: url('/data/c.png') center center no-repeat; background-size: contain; z-index: 3;}
    #e {background: url('/data/e.png') center center no-repeat; background-size: contain; z-index: 1;}
      #m {margin-left: -38vh; margin-top: -13vh; width: 27vh; height: 27vh; animation: m 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), bounce 1.5s infinite cubic-bezier(0.34, 1.56, 0.64, 1); animation-delay: 0s, 1.5s;}
      #a {margin-left: -15vh; margin-top: -5vh; animation: a 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), bounce 1.5s infinite cubic-bezier(0.34, 1.56, 0.64, 1); animation-delay: 0.15s, 1.6s;}
      #c {margin-left: -3vh; margin-top: -12vh; animation: c 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), bounce 1.5s infinite cubic-bezier(0.34, 1.56, 0.64, 1); animation-delay: 0.3s, 1.7s;}
      #e {margin-left: 11vh; margin-top: -7vh; animation: e 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), bounce 1.5s infinite cubic-bezier(0.34, 1.56, 0.64, 1); animation-delay: 0.45s, 1.8s;}
    #m, #a, #c, #e {-webkit-animation-fill-mode: forwards;}
    #loading.out {animation: out 0.5s cubic-bezier(0.36, -0.05, 0.66, -0.56);}

@keyframes fadein {0% {transform: scale(0.95); opacity: 0;} 100% {transform: scale(1); opacity: 1;}}
@keyframes fadeout {0% {transform: scale(1); opacity: 1;} 100% {transform: scale(0.95); opacity: 0;}}

@keyframes loading {
  0% {transform: scale(0.6);}
  50% {transform: scale(0.5);}
  100% {transform: scale(0.6);}
}
@keyframes out {0% {transform: scale(0.6) rotate(0deg);} 100% {transform: scale(0) rotate(360deg); opacity: 0;}}

@keyframes m {0% {transform: scale(0) rotate(80deg);} 100% {transform: scale(1) rotate(0deg); opacity: 1;}}
@keyframes a {0% {transform: translateY(-100%);} 100% {transform: translateY(0vh); opacity: 1;}}
@keyframes c {0% {transform: rotateY(90deg) rotateX(-180deg);} 100% {transform: rotateY(0deg) rotateX(0deg); opacity: 1;}}
@keyframes e {0% {transform: skewX(60deg) rotate(-10deg) translateX(-50%);} 100% {transform: skewX(0deg) rotate(0deg) translateX(0); opacity: 1;}}
@keyframes bounce {
  0% {transform: scale(1) rotate(0deg);}
  20% {transform: scale(1.2) rotate(-6deg);}
  40% {transform: scale(0.9) rotate(3deg);}
  80% {transform: scale(1) rotate(0deg);}
}

/*
@keyframes happy {
  0% {transform: translateY(0%) rotateX(0deg);}
  20% {transform: translateY(10%) rotateX(-5deg);}
  40% {transform: translateY(-200%) rotateX(-270deg);}
  60% {transform: translateY(10%) rotateX(-10deg);}
  100% {transform: translateY(0%) rotateX(0deg);}
}
*/
@keyframes happy {
  0% {transform: translateY(0%) rotateZ(0deg);}
  20% {transform: translateY(10%) rotateZ(-5deg);}
  40% {transform: translateY(-80%) rotateZ(30deg);}
  60% {transform: translateY(10%) rotateZ(-20deg);}
  100% {transform: translateY(0%) rotateZ(0deg);}
}

@keyframes bouncer {50% {transform: scale(1.2);} 100% {transform: scale(1);}}

  .kryplosaur {width: 20vh; height: 20vh; position: absolute; z-index: 10;}
  .kryplosaur.s {width: 15vh; height: 15vh;}
  .kryplosaur.happy {animation: happy 2s;}
    .name {position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 150%); transition: all 0.3s ease; border-radius: 1vh; padding: 1vh; opacity: 0; background: white; white-space: nowrap;}
      .adopce {transition: all 0.3s ease; border-radius: 1vh; padding: 1vh; margin-top: 2vh;}
      .adopce.out {opacity: 0; transform: scale(0) translateY(-100%); margin: 0; padding: 0;}
    .name.adopt, .adopce {background-image: linear-gradient(to right, #4776E6 0%, #8E54E9 100%); color: white;}
    .name.adopt {visibility: hidden;}
      .adopce:hover {cursor: pointer; transform: scale(1.1);}
    .name.show, .kryplosaur:hover .name {opacity: 1; transform: translate(-50%, 50%); z-index: 1; visibility: visible;}
    .kryplosaur:hover {cursor: pointer; z-index: 899;}
  .kryplosaur .body, .kryplosaur .img {width: 100%; height: 100%; transition: all 0.5s ease;}
  .kryplosaur .body {animation: walk 1s infinite cubic-bezier(0.34, 1.56, 0.64, 1); opacity: 0; transform: scale(0.4);}
    .kryplosaur .body.fadein {opacity: 1; transform: scale(1);}
    .kryplosaur .img.flip {transform: rotateY(180deg);}
      .kryplosaur.s .img {filter: saturate(0);}
      .kryplosaur:hover .img {transform: scale(1.1); filter: saturate(100%);}
      .kryplosaur:hover .img.flip {transform: rotateY(180deg) scale(1.1);}

@keyframes walk {
  0% {transform: translateY(0vh);}
  50% {transform: translateY(-0.5vh);}
  100% {transform: translateY(0vh);}
}

  #menu {position: absolute; top: 0; right: 0; padding: 1vh;}
    #menu div {margin-left: 1vh;}

  #over {z-index: 998; /* backdrop-filter: blur(1vh); */}
  #over img {width: 30vh;}
  #bg_over, #over {position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; transition: all 0.5s ease;}
  #bg_over {background: black; opacity: 0.5; width: 110%; height: 110%; top: -5%; left: -5%;}
    #over.in {animation: fadein 0.5s; -webkit-animation-fill-mode: forwards;}
    .pop {z-index: 999; padding: 5vh; background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); border-radius: 1vh; color: black; text-align: center;}
      .pop.adopted {background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);}
      .popimg {transition: all 1s; transform: scale(1) rotateZ(0deg) rotateY(0deg) rotateX(0deg);}
        .popimg.happy {transform: scale(1.1) rotateZ(0deg) rotateY(360deg) rotateX(0deg);}
        .popimg.happy2 {transform: scale(1.2) rotateZ(-15deg) rotateY(360deg) rotateX(360deg);}
    #over h1 {color: black; margin: 0; padding: 0; margin-top: 1vh;}
    #over h2 {color: white; margin: 0; padding: 0; font-size: 3vh; font-weight: normal;}
    .majitel {color: #4776E6;}
      .kdetoken {font-size: 2vh; font-style: italic; margin-top: 1vh;}
        .kdejetoken {width: 20vh; margin: 0 auto; margin-top: 1vh; font-size: 2vh;}
        .kdetoken {transition: all 0.3s ease;}
          .kdetoken:hover {color: #8E54E9; cursor: pointer;}
        a {color: #4776E6; transition: all 0.3s ease;}
        a:hover {color: #8E54E9;}

  .adopcni_form, .naming_form, .kdejetoken {display: none;}
  input, .button {font-family: 'Bebas Neue', impact; font-size: 3vh; background: #4776E6; color: white; padding: 1vh; border-radius: 1vh; border: 0; outline: 0; margin: 0 0 1vh 0; transition: all 0.2s ease; text-align: center;}
    .button {width: auto; font-size: 2vh; float: left;}
    .adopcni_form input, .naming_form input {font-size: 2vh; width: 100%; background: white; color: black; border-radius: 1vh; margin: 0; margin-top: 1vh;}
      .adopcni_form input[type="text"], .naming_form input[type="text"] {width: calc(100% - 2vh);}
  input[type="submit"], .button {background-image: linear-gradient(to right, #4776E6 0%, #8E54E9 100%); color: white;}
    input[type="submit"]:hover, .button:hover {cursor: pointer; transform: scale(1.1);}
    input[type="submit"].ok, input[type="submit"].wrong {animation: bouncer 1s cubic-bezier(0.34, 1.56, 0.64, 1);}
    input[type="submit"].wrong {background-image: linear-gradient(to right, #e52d27 0%, #b31217 100%); color: white;}
    input[type="submit"].ok {background-image: linear-gradient(to right, #16A085 0%, green 100%); color: white;}
  div[link], #logout {float: right; transition: all 0.3s;}
  div[link]:hover, #logout:hover {cursor: pointer; transform: scale(1.1);}
  #admin_head {padding: 5vh; max-width: calc(80vw - 5vh); margin: 0 auto;}
  #login {float: left;}