/*
HELLO TRAVELER!
 Please don't directly copy my code! 
 If you want to use it, please edit it to your needs and credit me on your page/website.
 You can take reference, play around with it or take inspiration from it. But please credit me :)
 Just be respectful! And thanks you for liking my website's code :) 
 - Yokiie, owner of https://unicodeangel.neocities.org

 〃∩   ∧＿＿∧ 　　 
 ⊂⌒（ 　・ω・）　 
 　 ｀ヽ_っ＿/￣￣￣￣/ 　 
 　 　 　 ＼/       /　 
 　　　　　　￣￣￣￣  
 */

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

#container {
  width: 99%;
  height: 99vh;
  overflow: hidden;
}

.photo {
  width: 500px;
  height: 500px;
  border-radius: 12px;
  overflow: hidden;
  /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); */
  animation: tiny-wiggle calc(8s + (random() * 5s)) infinite linear;
}

@keyframes tiny-wiggle {
  from {
    transform: translateZ(0);
  }

  to {
    transform: translateZ(0);
  }
}

.photo,
.photo * {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;

  -webkit-user-drag: none;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-filter: drop-shadow(0px 0px 20px #1a457e49);
  filter: drop-shadow(0px 0px 20px #1a457e49);
}

/* Inner element that renders the GIF */
.photo-img {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-filter: drop-shadow(0px 0px 20px #1a457e49);
  filter: drop-shadow(0px 0px 20px #1a457e49);
  clip-path: inset(30px 50px 30px 50px);
}


#Video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -100;
}

.shadowfilter {
  -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
}

/* fade-in support */
.fade-hidden {
  opacity: 0;
}

.fade-in {
  animation: fadeIn 0.9s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Click flash animation */
.photo-img.flash {
  animation: flashAnim 3s ease-out forwards;
}

@keyframes flashAnim {
  0%   { opacity: 1; }
  25%  { opacity: 0; }  /* fade-out */
  75%  { opacity: 0; }  
  100% { opacity: 1; }  /* fade-in */
}