@keyframes breathing{
    0% {
        transform:  scale(1) translate(0%, 0%);
    }
    50% {
        transform:  translate(0%, -5%) scale(1.1);
    }
    100% {
        transform:  scale(1) translate(0%, 0%);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(-3deg);
    }
    50% {
        transform: rotate(3deg);   
    }
    100% {
        transform: rotate(-3deg);
    }
}

@keyframes skulptur
{
  0%
  {
    transform: translate(0px, 0px);
    filter: drop-shadow(0px 0px 0px #3b3b3b);
  }
  20%
  {
    transform: translate(-5px, 3px);
    filter: drop-shadow(5px 2px 4px #3b3b3b);
  }
  40%
  {
    transform: translate(0px, 0px);
    filter: drop-shadow(0px 0px 0px #3b3b3b);
  }
  60%
  {
    transform: translate(-5px, 3px); 
    filter: drop-shadow(5px 2px 4px #3b3b3b);
  }
  80%
  {
    transform: translate(0px, 0px);
    filter: drop-shadow(0px 0px 0px #3b3b3b);
  }
  100%
  {
    transform: translate(0px, 0px);
    filter: drop-shadow(0px 0px 0px #3b3b3b);
  }
}
@keyframes stol
{
  0%
  {
    transform: translate(0px, 0px);
    filter: drop-shadow(0px 0px 0px #3b3b3b);
  }
  20%
  {
    transform: translate(0px, -5px);
    filter: drop-shadow(3px 5px 4px #3b3b3b);
  }
  40%
  {
    transform: translate(0px, 0px);
    filter: drop-shadow(0px 0px 0px #3b3b3b);
  }
  60%
  {
    transform: translate(0px, -5px);
    filter: drop-shadow(3px 5px 4px #3b3b3b);
  }
  80%
  {
    transform: translate(0px, 0px);
    filter: drop-shadow(0px 0px 0px #3b3b3b);
  }
  100%
  {
    transform: translate(0px, 0px);
    filter: drop-shadow(0px 0px 0px #3b3b3b);
  }
}
@keyframes arrig
{
  0%
  {
    transform: translateX(0px) scale(1);
    filter: drop-shadow(0px 0px 0px #3b3b3b8f);
  }
  20%
  {
    transform: translateX(-3px) scale(1.01);
    filter: drop-shadow(7px 1px 4px #3b3b3b8f);
  }
  40%
  {
    transform: translateX(0px) scale(1);
    filter: drop-shadow(0px 0px 0px #3b3b3b8f);
  }
  60%
  {
    transform: translateX(-3px) scale(1.01);
    filter: drop-shadow(7px 1px 4px #3b3b3b8f);
  }
  80%
  {
    transform: translateX(0px) scale(1);
    filter: drop-shadow(0px 0px 0px #3b3b3b8f);
  }
  100%
  {
    transform: translateX(0px) scale(1);
    filter: drop-shadow(0px 0px 0px #3b3b3b8f);
  }
}
@keyframes skam
{
  0%
  {
    transform: scale(1);
    filter:drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.4));
  }
  20%
  {
    transform: scale(1.05);
    filter:drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4));
  }
  40%
  {
    transform: scale(1);
    filter:drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.4));
  }
  60%
  {
    transform: scale(1.05);
    filter:drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4));
  }
  80%
  {
    transform: scale(1);
    filter:drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.4));
  }
  100%
  {
    transform: scale(1);
    filter:drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.4));
  }
}

@keyframes mimik{
    0% {
        transform: rotate(0%);
      }
    25% {
      transform: rotate(5deg);
    }
    50% {
      transform: rotate(-5deg);
    }
    75% {
      transform: rotate(5deg);
    }
    100% {
        transform: rotate(0deg);
    }
  }

.skulptur-heartbeat {
    animation: skulptur 1.5s infinite;
}
.stol-heartbeat {
    animation: stol 1.5s infinite;
}
.arrig-heartbeat {
    animation: arrig 1.5s infinite;
}
.skam-heartbeat {
    animation: skam 1.5s infinite;
}
.mimik-heartbeat {
    animation: mimik 1.5s infinite;
}

@font-face {
    font-family: Vera;
    src: url(/css/fonts/Vera\ Humana\ 95.ttf);
}
@font-face {
    font-family: Mokoto;
    src: url(/css/fonts/Mokoto\ Demo.ttf);
}

body {
    margin:0;
    padding:0;
    height: 100vh;
    overflow: hidden;
    background-color: #543e44;
}

.fullscreen-video {
    width: 100vw;
    height: 100vh;
    width:100svw;
    height:100svh;
    z-index: -10;
    transition: opacity .5s;
}
#logo {
    cursor: pointer;
    transition: filter 0.4s;
    z-index: 100;
    text-align: center;
    width: 120px;
    height: 120px;
    margin-left: 50%;
    transform: translateX(-50%);
    position: fixed;
}

.artwork {
  transition: opacity 1s ease-in, transform .2s ease-out, filter .1s linear;
}

.active {
    opacity: 1 !important;
}
.inactive {
    opacity: 0 !important;
}
video::-internal-media-controls-overlay-cast-button {
    display: none;
}
#skulptur {
    position: fixed;
    z-index: 999;
    /*left: 31.6%;*/
    left: 0%;
    top: 0%;
    cursor:pointer;
}
#skulptur:hover{
    transform: translate(-5px, 3px) !important;
    filter: drop-shadow(5px 2px 4px #3b3b3b) !important;
}
.artwork:hover {
    filter: brightness(1.1) drop-shadow(0rem 0rem 0.4rem rgba(0, 0, 0, 0.4));
}

#stol {
    position: fixed;
    z-index: 999;
    left: 16%;
    bottom: 16.3%;
    height: 11.8%;
    cursor: pointer;
}
#stol:hover{
    transform: translate(0px, -5px) !important;
    filter: drop-shadow(3px 5px 4px #3b3b3b) !important;
}

#mimik {
    position: fixed;
    z-index: 999;
    left: 7.9%;
    top: 45.1%;
    height: 7.4%;
    cursor: pointer;
}

#mimik:hover {
  transform: scale(1.05) !important;
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4)) !important;
}

#arrig {
    position: fixed;
    z-index: 999;
    left: 24.2%;
    top: 34.3%;
    height: 5.8%;
    cursor: pointer;
}
#arrig:hover{
    transform: translateX(-3px) scale(1.01) !important;
    filter: drop-shadow(7px 1px 4px #3b3b3b8f) !important;
}

#skam {
    position: fixed;
    z-index: 999;
    left: 12.8%;
    top: 31.3%;
    height: 5.8%;
    cursor: pointer;
}
#skam:hover {
    transform: scale(1.05) !important;
    filter:drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4)) !important;
}

#logo {
    opacity: 0;
    top:15px;
    left:6%;
    margin-left: auto;
    transform: translateX(0%);
}
#logo:hover{
    filter:invert(1);
}