/* -webkit-transition: background-image 0.2s ease-in-out; */

/* @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap'); */
/* @font-face {  font-family: 'Permanent Marker'; font-display: swap;} */

/* @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Permanent+Marker&family=Amatic+SC:wght@700&family=Roboto:wght@100;300;400;700;900&family=Work+Sans:wght@100;200;300;400;500;600;700;800&family=Annie+Use+Your+Telescope:wght@400&family=Give+You+Glory&family=Loved+by+the+King&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&family=Edu+NSW+ACT+Foundation&family=Gloria+Hallelujah&family=Neucha&family=Reenie+Beanie&family=Shadows+Into+Light&family=Swanky+and+Moo+Moo&family=The+Girl+Next+Door&family=Waiting+for+the+Sunrise&display=swap'); */

@font-face {
  font-family: 'Permanent Marker';
  src: url('font/permanent-marker-plus.woff2') format('woff2'); /* Path to the font file */
  /* You can also specify other font formats like woff, ttf, etc. */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


* {
  /* --sb-track-color: #dcdcdc; */
  --sb-thumb-color: #bfbfbf;
  --sb-size: 12px;

  scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
}

*::-webkit-scrollbar {
  width: var(--sb-size) 
}

*::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb {
  transition: all 0.3s ease-in-out;
  background: var(--sb-thumb-color);
  border-radius: 10px;
  }

.posttext::-webkit-scrollbar {
  width: 10px; 
}

@-moz-document url-prefix() {
  :root {
    --sb-thumb-color: rgb(121, 121, 121); 
    /* scrollbar-color: var(--sb-thumb-color) #d1d1d1; */
  }

  * {
    scrollbar-width: auto;
    scrollbar-color: var(--sb-thumb-color) #d1d1d1;
  }
}


img {
  -webkit-user-drag: none; /* Safari */
  -khtml-user-drag: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, and Safari */
}

html,
body {
  font-family: 'Permanent Marker', cursive, 'Roboto', 'Helvetica', 'Arial', sans-serif;
  /* font-family: 'Roboto', sans-serif; */
  /* font-family: 'Permanent Marker', cursive; */
  /* font-family: 'Indie Flower', cursive; */
  /* font-family: 'Amatic SC', cursive; */
  /* font-family: 'Annie Use Your Telescope', cursive; */
  /* font-family: 'Edu NSW ACT Foundation', cursive; */
  /* font-family: 'Gloria Hallelujah', cursive; */
  /* font-family: 'Neucha', cursive; */
  /* font-family: 'Reenie Beanie', cursive; */
  /* font-family: 'Shadows Into Light', cursive; */
  /* font-family: 'Swanky and Moo Moo', cursive; */
  /* font-family: 'The Girl Next Door'; */
  /* font-family: 'Waiting for the Sunrise', cursive; */

  /* font-weight: bold; */

  min-height: 100vh;
  justify-items: center;
  background-color: #fff;
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
     -ms-user-select: none; /* Internet Explorer/Edge */
         user-select: none;
  -webkit-font-smoothing: antialiased;
  /* overflow: visible; */
  scroll-behavior: smooth;
}

body {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  transition: all 0.3s ease-in-out;
}

.bgcolor {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* background-color: yellow; */
  transition: all 0.3s ease-in-out;
  z-index: 0;
}

.browserID {
  position: fixed;
  color: white;
  bottom: 10px;
  left: 10px;
  text-shadow: 1px 1px 2px black;
  z-index: 11111111;
  /* background-color: yellow; */
}

.topwhite {
  position: fixed;
  background-color: white;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100px;
  filter: blur(100px);
  -webkit-filter: blur(100px);
  pointer-events: none;
  z-index: 2;
} 
.menuwhite {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.5);
  top: 0;
  left: 0;
  width: 100vw;
  height: 100px;
  filter: blur(100px);
  -webkit-filter: blur(100px);
  pointer-events: none;
  z-index: 2;
} 
.vignette-down {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  box-shadow: 0 0 200px rgb(0, 0, 0) inset;
  transition: all 0.5s ease-in-out;
  z-index: 1;
}
.vignette-up {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  box-shadow: 0 0 50px rgba(255, 255, 255, 0.3) inset;
  z-index: 11;
}

.bottomblur {
  /* width: 50%; */
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 60px;
  display: inline-block;
  position: fixed;
  background-color: grey;
  filter: blur(60px);
  -webkit-filter: blur(60px);
  transform: scale(2);
  /* background-color: red; */
  pointer-events: none;
  transition: opacity 0.2s ease-in-out, transform 0.3s ease-in-out, background-color 1s ease;
  /* z-index: -10; */
}

.map-overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 12;
  pointer-events: none;
  /* mix-blend-mode: overlay; */
  opacity: 0.6;
  /* -webkit-mask: url(images/svg/japan.svg) no-repeat 50% 50%; */
  /* mask: url(images/svg/japan.svg) no-repeat 50% 50%; */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* background-image: url(images/svg/japan.svg); */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  /* background-color: #e60808; */
  transition: all 0.3s ease-in-out;
}

.bg {
  position: fixed;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(100%) contrast(30%) brightness(170%) blur(0px);
  -webkit-filter: grayscale(100%) contrast(30%) brightness(170%) blur(0px);
  transition: all 0.5s ease-in-out;
  /* box-shadow: inset 0px 0px 111px 111px #DBA632; */
  pointer-events: none;
  z-index: 0;
  /* background-color: yellow; */
}

.bg img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute; /* Set to absolute positioning */
  top: 0;
  left: 0;
  z-index: 1; /* Move the image above the container background */
  /* transition: opacity 0.3s ease, background 0.5s ease; */
}

.bgmaskcontainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  /* background-image: url(images/region/iceland/test.jpg); */
  /* box-shadow: inset 0px 0px 50px 50px #db3232; */
  z-index: 2;
  /* background-color: yellow; */
}


.bgmask {
  /* position: fixed; */
  /* top: 0; */
  /* left: 0; */
  width: 100%;
  height: 100%;
  /* background-color: rgb(80, 255, 159); */
  /* background-image: url(images/alphas/shadow_projection_01.jpg); */
  /* -webkit-mask-image: url('images/alphas/alpha_05.png'); */
  /* mask-image: url('images/alphas/alpha_05.png'); */
  /* mask-mode: luminance; */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* mask-position: 50% 50%; */
  /* -webkit-mask-position: 50% 50%; */
  /* transition: all 0.3s ease-in-out; */
  /* mask-image: url('images/svg/Simplified_World_Map.svg'); */
  transition: all 0.4s ease-in-out;
  pointer-events: none;
  z-index: 2;
  /* background-color: peru; */
}

.bg img.fade-in {
  opacity: 1;
}

.bg img.fade-out {
  opacity: 0;
  z-index: 0;
}

.bg.fade img {
  opacity: 0; 
}

.audiocontainer {
  position: fixed;
  bottom: 10px;
  left: 10px;
  /* top: calc(clamp(50px, 6vw, 100px)/4); */
  /* left: 35vw; */
  z-index: 25;
}

.preload-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.gif-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* Optional styles for the GIF */
.gif-container img {
  max-width: 300px;
  max-height: 300px;
}

.menucontainer { 
  /* display: none; */
  position: fixed;
  height: 100vh;
  width: 100vw;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
  -webkit-filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
  /* z-index: 14; */
  z-index: 24;
  pointer-events: none;
}

.menu {
  position: fixed;
  transform-origin: top left;
  top: calc(clamp(50px, 6vw, 100px)*0.75);
  left: 5vw;
  padding-top: 20px;
  padding-bottom: 20px;
  display: inline-block;
  border-radius: 2px;
  transform: scaleY(0);
  background-color: grey; /* Menu BG */
  transition: all 0.3s ease;
  overflow: hidden;
  z-index: 13;
  pointer-events: auto;
}

ul::-webkit-scrollbar {
  width: 0;
}

ul {
  list-style: none; 
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: clamp(50px, 22vw, 400px);
  /* filter: blur(25px); */
  opacity: 0;
  overflow-y: auto; /* Add a vertical scrollbar when needed */
  overflow-x: hidden;
  max-height: 100vh;
  transition: all 0.3s ease;
  
}

li {
  padding-right: calc(clamp(50px, 6vw, 100px)*0.5);
  padding-left: calc(clamp(50px, 6vw, 100px)*0.5);
  padding-top: 8px;
  padding-bottom: 8px;
  /* background-color: red; */
  transition: all 0.3s ease;
  text-align: center;
  font-size: 2.2vw;
}

li:hover {
  /* opacity: 1; */
  /*background-color: red;*/ /* Line BG */
  /* color: white; */
  cursor: pointer;
  /*transform: scale(2);*/
  font-size: 2.6vw;
}
.menu li img {
  width: 2.2vw;
  height: 2.2vw;
}

.menu li:hover a {
  /*color: white;*/ /* Line TEXT hover */ 
  /* opacity: 0.5; */
  text-shadow: -3px 3px 8px rgba(0, 0, 0, 0.3);
}

/* Add hover effect to the map icon */
.menu li img:hover {
  transform: scale(1.4);
}


a {
  text-decoration: none;
}

/* .header:hover + .menucontainer {
  display: block;
  height: 20px;
} */

.headercontainer {
  position: fixed;
  height: 100vh;
  width: 100vw;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
  -webkit-filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
  pointer-events: none;
  z-index: 25;
  opacity: 0;
}

.header {
  /* width: 50%; */
  top: calc(clamp(50px, 6vw, 100px)/4);
  left: 5vw;
  height: calc(clamp(50px, 6vw, 100px)/2);
  display: inline-block;
  /* clip-path: polygon(0% 0%, 75% 0%, 77% 50%, 75% 100%, 0% 100%); */
  clip-path: polygon(0% 0%, 100% 0%, 85% 150%, 0% 150%);
  position: fixed;
  /* display: flex; */
  /* flex-direction: row; */
  /* align-items: center; */
  /* margin-left: 5vw; */
  /* margin-right: auto; */
  background-color: grey;
  background-size: 80% auto;
  background-position: left;
  background-repeat: no-repeat;
  /* filter: blur(40px); */
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.05);
  /* background-color: red; */
  pointer-events: auto;
  transition: opacity 0.2s ease-in-out, transform 0.3s ease-in-out, background-color 1s ease;
  /* transform: scale(2, 1); */
  transform-origin: top left;
  /* z-index: 2; */
}

@-moz-document url-prefix() {
  .header {
    left: 3vw;
  }
}

.header:hover {
  cursor: pointer;
  /* transform: scale(1.05); */
  /* opacity: 0.5; */
}

.headerflagbg {
  position: fixed;
  height: calc(clamp(50px, 6vw, 100px));
  margin-top: 10px;
  margin-left: 0px;
  clip-path: circle(39% at 50% 50%);
  font-size: calc(0.7vw + 4px);
  transition: all 0.8s ease;
  z-index: 24;
}
.headerflagbg img{
  width: auto;
  height: 100%;
  transition: opacity 0.8s ease;
}

.headerflag {
  /* position: absolute; */
  position: fixed;
  /* top: 0; */
  /* left: 0; */
  /* right: auto; */
  /* bottom: 0; */
  /* align-items: center; */
  /* width: 80%; */
  height: calc(clamp(50px, 6vw, 100px));
  margin-top: 10px;
  margin-left: 0px;
  /* clip-path: polygon(0 0, 0% 4vw, 4vw 0); */
  /* clip-path: polygon(100% 0, 100% 100%, 0 0); */
  clip-path: circle(39% at 50% 50%);
  /* clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%); */
  /* text-align: center; */
  /* box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3); */
  font-size: calc(0.7vw + 4px);
  /* background-color: yellow; */
  /* transition: opacity 0.5s ease-in-out, transform 0.1s ease-in-out, background-color 1s ease; */
  transition: all 0.5s ease;
  z-index: 25;
}

.headerflag img{
  /* position: absolute; */
  width: auto;
  height: 100%;
  /* top: 0; */
  /* left: 0; */
  /* right: 0; */
  transition: opacity 0.5s ease;
}

.headertext {
  /* position: fixed; */
  top: calc(clamp(50px, 6vw, 100px)/4);
  margin-left: calc(clamp(50px, 6vw, 100px)*1.5);
  margin-right: calc(clamp(50px, 6vw, 100px)*1.75);
  line-height: calc(clamp(50px, 6vw, 100px)/2);
  font-size: calc(clamp(50px, 6vw, 100px)/3);	
  /* font-family: 'Permanent Marker', cursive; */
  letter-spacing: 2px;
  color: #fff;
  transition: color 0.8s ease-in-out, opacity 0.8s ease-in-out, transform 0.1s ease-in-out;
  z-index: 25;
}

.postcontainer {
  width: 50%;
  height: 85vh;
  position: fixed;
  top: 11vh;
  left: 8vw;
  margin-right: auto;
  z-index: 16;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
  /* background-color: yellow; */
}

.postclose {
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 30px;
  font-size: 64px;
  text-shadow: rgb(0, 0, 0, 0.05) 1px 0px 0px, rgb(0, 0, 0, 0.05) 0.540302px 0.841471px 0px, rgb(0, 0, 0, 0.05) -0.416147px 0.909297px 0px, rgb(0, 0, 0, 0.05) -0.989992px 0.14112px 0px, rgb(0, 0, 0, 0.05) -0.653644px -0.756802px 0px, rgb(0, 0, 0, 0.05) 0.283662px -0.958924px 0px, rgb(0, 0, 0, 0.05) 0.96017px -0.279416px 0px;
  transition: opacity 0.2s ease-in-out, transform 0.275s ease-in-out;
  opacity: 0.85;
}

.postclose:hover {
  transform: scale(1.25) rotate(3deg);
  opacity: 1;
}

.postdatecontainer {
  width: 67%;
  height: calc(1.5vw);
  min-height: calc(1.5vw);
  max-height: calc(1.5vw);
  margin-top: 10px;
  margin-left: 4vw;
  margin-right: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  /* cursor: text; */
  /* background-color: green; */
}

.posttitlecontainer {
  width: 67%;
  height: calc(6vw + 10px);
  min-height: calc(6vw + 10px);
  max-height: calc(6vw + 10px);
  margin-top: 4px;
  margin-left: 4vw;
  margin-right: 0px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* overflow: hidden; */
  /* cursor: text; */
  /* background-color:yellow; */
}

.postdate {
  text-align: center;
  /* background-color: green; */
}

.posttitle {
  text-align: center;
  /* overflow: visible; */
  /* background-color:rgb(255, 119, 0); */
}

.posttext {
  /* position: relative; */
  /* top: 50%; */
  width: 94%;
  max-height: 88%;
  font-size: calc(1.3vw + 4px);
  line-height: calc(calc(1.3vw) * 1.5);
  display: block;
  text-align: justify;
  /* overflow-y: scroll; */
  overflow: auto;
  padding-left: 10px;
  padding-right: 15px;
  padding-bottom: 200px;
  /* cursor: text; */
  /* background-color:red; */
}

/* text cutout */
.posttext img {
  /* position: relative; */
  top: 0; /* calc(11vh + 10px); */
  left: 70;
  float: left;
  width: calc(14% + 25px);
  height: calc(5.5vw);
}

/* unvisited link */
.posttext a:link {
  color: black;
  /* background-color: rgba(45, 192, 215, 0.65); */
  padding: 0px 5px 0px 5px;
}

/* visited link */
.posttext a:visited {
  color: black;
  /* background-color: rgba(215, 215, 45, 0.65); */
  padding: 0px 5px 0px 5px;
}

/* mouse over link */
.posttext a:hover {
  color: black;
  /* background-color: rgba(215, 45, 178, 0.65); */
  text-decoration: underline;
  padding: 0px 5px 0px 5px;
}

/* selected link */
.posttext a:active {
  color: black;
  /* background-color: rgba(215, 215, 45, 0.65); */
  padding: 0px 5px 0px 5px;
}

img.maplink {
  width: 22px;
  height: 20px;
  max-width: 22px;
  max-height: 20px;
  padding: 4px 2px 0px 2px;
  position: static;
  top: auto;
  left: auto;
  float: none;
  width: auto;
  height: auto;
}

.postnav {
  padding: 3px;
  margin-top: auto;
}

.letter {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url("images/icons/paper_01.png");
  /* background-color: yellow; */
  background-repeat: repeat;;
  background-size: 30%;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  /* margin: 26px auto 0; */
  /* max-width: 550px; */
  /* min-height: 300px; */
  /* padding: 24px; */
  position: relative;
  width: 100%;
  height: 85vh;
  padding-bottom: 15px;
  transition: transform 0.3s ease-in-out;
  z-index: 10;
  /* cursor: text; */
}

/* .letter::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(189, 26, 26, 0.5);
} */

.paper {
  background-image: url("images/icons/paper_01.png");
  /* background-color: white; */
  background-repeat: repeat;;
  background-size: 30%;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 85vh;
  /* padding-bottom: 15px; */
  transition: transform 1.0s ease-in-out;
  z-index: 1;
}

.paper.uno {
  /* transform: rotate(3deg); */
  transform: translate(0px, 0px) rotate(2deg) scale(1.005);
}
.paper.due {
  /* transform: rotate(-2deg); */
  transform: translate(0px, 0px) rotate(-1deg) scale(1.005);
}

.paperclip img {
  position: absolute;
  /* top: calc(0.1vw - 3px); */
  /* top: calc(11vh + 10px) */
  /* transform-origin: 50% 20%; */
  /* top: calc(2vw - 30px); */
  top: 0;
  left: 0;
  /* width: 4vw; */
  width: 4vw;
  z-index: 15;
  transition: transform 0.45s ease-in-out;
  /* animation: rotateForever 5s linear infinite; */
  transform-origin: top;
  /* transform-origin: 18px 6px; */
  transform: translate(50px, 6px) rotate(60deg);
  /* transform: translate(50px, -8px) rotate(60deg); */
}

/* @keyframes rotateForever {
  to {
    transform: translate(50px, 5px) rotate(420deg); 
  }
} */

/*  .letter:before, .letter:after {
  content: "";
  height: 98%;
  background-image: url("images/icons/paper_01.png");
  background-repeat: repeat;;
  background-size: 30%;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.letter:before {
  background: #fafafa;
  background-image: url("images/icons/paper_01.png");
  background-repeat: repeat;;
  background-size: 30%;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  left: -5px;
  top: 4px;
  transform: rotate(-2.5deg);
}
.letter:after {
  background: #f6f6f6;
  background-image: url("images/icons/paper_01.png");
  background-repeat: repeat;;
  background-size: 30%;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  right: -3px;
  top: 1px;
  transform: rotate(1.4deg);
}  */

/* .letter:hover {
  transform: scale(1.0);
} */
.letter:hover ~ .paper.uno {
  transform: translate(5px, 5px) rotate(3deg) scale(1.005);
}
.letter:hover ~ .paper.due {
  transform: translate(2px, 0px) rotate(1.5deg) scale(1.005);
}
/* .letter:hover ~ .paperclip img {
  transform: translate(45px, -4px) rotate(62deg) scale(1.03);
} */

.stain{
  position: absolute;
  width: 100%;
  height: 100%;
  /* background-color: red; */
  overflow: hidden;
  pointer-events: none;
}

.stain img {
  position: relative;
  top: 0%;
  left: 0%;
  mix-blend-mode: multiply;
  width: 11vw;
  opacity: 0.4;
  /* transform: translate(300%, 100%); */
}

section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-items: center;
  margin-left: auto;
  padding: 0 0 15vh 0;
  /* margin-top: 100px; */
  margin-right: 0;
  /* z-index: 10; */
  /* background-color: purple; */
}

.sectiontitlecontainer {
  /* background-color: red; */
  width: 23vw;
  height: calc(14vw + 30px);
  z-index: 15;
  /* mix-blend-mode: hard-light; */
  /* background: url(images/flags/flag_japan.png) no-repeat left center; */
  /* background-repeat: no-repeat; */
  /* background-size: 100%; */
  align-items: center;
  justify-content: center;
  justify-items: center;
  /* mix-blend-mode: hard-light; */
}

.sectiontitle { /*167*/
  font-size: 70px;
  /* margin-top: 50px; */
  /* margin-bottom: 125px; */
  text-align: center;
  white-space: nowrap;
  /* color: #ffffff00; */
  /* -webkit-background-clip: text; */
  /* background-clip: text; */
  /* display: inline-block; */
  /* text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1), 3px 3px 10px rgba(0, 0, 0, 0.3); */
  /* text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, -2.5px 5px 20px rgba(0, 0, 0, 0.3); */
  /* -webkit-text-stroke-width: 1px; */
  /* -webkit-text-stroke-color: #fff; */
  /* font-family: 'Permanent Marker', cursive; */
  z-index: 15;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;
  /* color: rgb(175, 23, 167); */
  /* mix-blend-mode: hard-light; */
  /* opacity: 1; */
  transition: opacity 0.3s ease-in-out;
  /* text-shadow: -5px 5px 15px rgba(0, 0, 0, 0.3); */
  /* background: url(images/flags/flag_japan.png) no-repeat left center; */
  /* background-repeat: no-repeat; */
  /* background-size: 100%; */
  /* background-clip: text; */
  /* -webkit-background-clip: text; */
  /* color: rgba(0, 0, 0, 0.0); */
  animation: flicker 5s ease-in-out infinite alternate;
}

@keyframes flicker {
	0% {
		/* opacity: 0.5; */
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
    transform: perspective(100px) rotateY(-2deg) rotate(1deg);
	}
	100% {
		/* opacity: 1; */
    text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
    letter-spacing: 0px;
    transform: perspective(100px) rotateY(2deg) rotate(-1deg);
	}
}

.polaroidcontainer {
  padding: 25vh 0 3vh 0;
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: 0;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.6s ease;
  /* overflow-x: hidden; */
  /* background-color: grey; */
}

.polaroid {
  position: relative;
  width: 23vw;
  height: 28vw;
  /* transform: rotate(13deg); */
  background-color: rgb(182, 182, 182);
  /* background-image: url(images/region/australia/test.jpg); */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-clip: border-box;
  margin-bottom: 40px;
  border: 6px solid #e4e4e4;
  border-width: 0.8vw 0.8vw 5vw 0.8vw;
  /* box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.33); */
  box-shadow:
    inset 0px 0px 5px 0px rgba(0, 0, 0, 0.2),
    0px 0px 1px 0px rgba(0, 0, 0, 0.3),
    10px 10px 30px rgba(0, 0, 0, 0.4);
  border-radius: 1px;
  /* transition: clip-path 0.3s ease-in-out, transform 0.3s ease-in-out, filter 0.3s ease-in-out; */
  /* transition: all 0.3s ease-in-out; */
  /* scroll-snap-type: y mandatory; */
  /* overflow: hidden; */
  z-index: 15;
}

@-moz-document url-prefix() {
  .polaroid {
    width: 19vw;
    height: 23vw;
    border-width: 0.6vw 0.6vw 4.2vw 0.6vw;
  }
}

.margin {
  margin-bottom: calc(1vw + 80px);
}

.polaroid img {
  position: absolute;
  /* left: 50%;  */
  /* top: 50%; */
  /* transform: translate(-50%, -50%);  */
  left: 0%; 
  top: 0%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* or "contain" depending on your preference */
  /* opacity: 0; */
  /* offset-anchor: 50% 50%; */
  clip-path: polygon(2% 2%, 98% 2%, 98% 98%, 2% 98%);
  /* clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); */
  /* transition: clip-path 0.3s ease-in-out, transform 0.3s ease-in-out, filter 0.3s ease-in-out; */
  transition: all 0.3s ease-in-out;
  transform-origin: center center;
  /* scroll-snap-type: y mandatory; */
}

.polaroid img:hover {
  /* left: 5%;  */
  /* top: 5%; */
  /* width: 90%; */
  /* height: 90%; */
  /* opacity: 1; */
  clip-path: polygon(5% 5%, 95% 5%, 95% 95%, 5% 95%);
  -webkit-clip-path: polygon(5% 5%, 95% 5%, 95% 95%, 5% 95%);
  transform: scale(1.11);  
  filter: brightness(1.1);
  -webkit-filter: brightness(1.1);
}

.polaroid:hover {
  /* transition: clip-path 0.3s ease-in-out, transform 0.3s ease-in-out, filter 0.3s ease-in-out; */
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

/* .polaroid:hover {
  cursor: pointer;
  animation: linear animate-scale-hover;
  	box-shadow:
      inset 0px 0px 5px 0px rgba(0, 0, 0, 0.3),
      0px 0px 1px 0px rgba(0, 0, 0, 0.3),
      -10px 20px 50px rgba(0, 0, 0, 0.3);
  animation-timeline: view();
  transition: transform 0.3s ease-in-out;
}

@keyframes animate-scale-hover {
  to {
    transform: rotate(0deg) scale(1.025);
    -webkit-transform: rotate(0deg) scale(1.025);
  }
} */

.polaroidanim {
  animation: linear animate-in-and-out both;
  animation-timeline: view();
  /* scroll-snap-align: center; */
  /* scroll-snap-stop: always; */
  /* scroll-snap-type: y mandatory; */
  transition: transform 0.3s ease-in-out;
  /* animation-range: entry 0% entry 100%; */
  /* animation-range: entry, exit; */
  /* animation: fade linear backwards, fadeOut linear forwards;  when animation is done it keeps that last frame. ani geht aussen am frame schön weiter */
}

@keyframes animate-in-and-out {
  entry 0%  {
    opacity: 1; 
    transform: translateY(50%) rotate(30deg) scale(0.8);
    -webkit-transform: translateY(50%) rotate(30deg) scale(0.8);
/*     box-shadow:
      inset 0px 0px 5px 0px rgba(0, 0, 0, 0.3),
      0px 0px 1px 0px rgba(0, 0, 0, 0.3),
      0px 0px 0px rgba(0, 0, 0, 0.3);	 */	
  }
  entry 100%  {
    opacity: 1; 
    transform: translateY(0) rotate(8deg);
    -webkit-transform: translateY(0) rotate(8deg);
/*     box-shadow:
      inset 0px 0px 5px 0px rgba(0, 0, 0, 0.4),
      0px 0px 1px 0px rgba(0, 0, 0, 0.4),
      -10px 20px 35px rgba(0, 0, 0, 0.4); */
  }

  exit 0% {
    opacity: 1; 
    transform: translateY(0) rotate(-8deg);
    -webkit-transform: translateY(0) rotate(-8deg);
  /*  box-shadow:
       inset 0px 0px 5px 0px rgba(0, 0, 0, 0.4),
      0px 0px 1px 0px rgba(0, 0, 0, 0.4),
      15px 25px 35px rgba(0, 0, 0, 0.4); */
  }
  exit 100% {
    opacity: 1; 
    transform: translateY(-50%) rotate(-30deg) scale(0.8);
    -webkit-transform: translateY(-50%) rotate(-30deg) scale(0.8);
    /* box-shadow:
      inset 0px 0px 5px 0px rgba(0, 0, 0, 0.3),
      0px 0px 1px 0px rgba(0, 0, 0, 0.3),
      0px 0px 0px rgba(0, 0, 0, 0.3);				 */
  }
}


.polaroidflag {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  /* bottom: 0; */
  align-items: center;
  width: 80%;
  height: 2vw;
  /* clip-path: polygon(0 0, 0% 4vw, 4vw 0); */
  /* clip-path: polygon(100% 0, 100% 100%, 0 0); */
  /* clip-path: circle(2vw at 0 0); */
  /* clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%); */
  /* text-align: center; */
  /* box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3); */
  z-index: 6;
  /* font-family: 'Permanent Marker', cursive; */
  font-size: calc(0.7vw + 4px);
  background-color: yellow;
}

.polaroidflag img{
  /* position: absolute; */
  width: auto;
  height: 100%;
  /* top: 0; */
  /* left: 0; */
  /* right: 0; */
}

.polaroidDateContainer {
  position: absolute;
  bottom: -1.45vw;
  left: 0;
  right: 0;
  width: 100%;
  height: 1.2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 15;
  font-size: calc(0.7vw + 2px);
  overflow: hidden;
  /* background-color: green; */
}

.polaroiddate {
  /* position: absolute; */
  /* bottom: -1.25vw; */
  /* left: 0; */
  /* right: 0; */
  /* width: 100%; */
  /* height: 1vw; */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
  text-align: center;
  z-index: 15;
  /* font-size: calc(0.7vw + 2px); */
  /* background-color: green; */
  /* overflow: hidden; */
}

.polaroidTextContainer {
  position: absolute;
  bottom: -4.5vw; 
  left: 0;
  right: 0;
  width: 100%;
  height: 3vw;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: visible; /* I changed this lately */
  /* background-color: rgb(191, 255, 0); */
}
@-moz-document url-prefix() {
  .polaroidTextContainer {
    bottom: -4vw; 
    /* background-color: rgb(191, 255, 0); */
  }
}

.polaroidtext {
  /* position: absolute; */
  /* bottom: -4.5vw;  */
  /* left: 0; */
  /* right: 0; */
  /* width: 100%; */
  /* height: 3vw; */
  text-align: center;
  z-index: 15;
  /* font-size: calc(1vw + 4px); */
  /* line-height: calc((1vw + 4px)*1.1); */
  /* background-color: red; */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
}

.gallerypreview {
  position: fixed;
  /* top: 9vw; */
  top: calc(11vh + 5px);
  left: 4vw;
  transform-origin: 50% 0%;
  width: 11vw;
  height: 13vw;
  border: 6px solid #e4e4e4;
  border-width: 0.4vw 0.4vw 2.5vw 0.4vw;
  border-radius: 1px;
  background-color: rgb(182, 182, 182);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  z-index: 10;
  transition: opacity 0.3s ease-in-out, transform 0.4s ease-in-out;
}

.gallerypreview.one { 
  z-index: 12; /* top */
  transform: translate(7px, 0px) rotate(-3deg);
}
.gallerypreview.two {
  z-index: 11; /* middle */
  transform: translate(0px, 8px) rotate(-6deg); 
}
.gallerypreview.three {
  z-index: 10; /* bottom */
  transform: translate(20px, 12px) rotate(2deg);
}

.gallerypreview:hover {
  cursor: pointer;
}

.gallerypreview.one:hover {
  transform: translate(12px, -4px) rotate(-4deg) scale(1.05);
}
.gallerypreview.one:hover ~ .gallerypreview.two {
  transform: translate(-7px, 14px) rotate(-12deg) scale(1.05);
}
.gallerypreview.one:hover ~ .gallerypreview.three {
  transform: translate(35px, -2px) rotate(4deg) scale(1.05);
}
.gallerypreview.one:hover ~ .paperclip img {
  transform: translate(55px, 4px) rotate(64deg) scale(1.03);
}

/* IMAGE GRID GALLERY (FULLSCREEN) */

.fullscreen-overlay-grid {
  /* display: none; */
  /* flex-direction: column; */
  cursor: url(images/icons/x.png), auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.975);
  z-index: 1000;
  /* justify-content: center; */
  /* align-items: center; */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  /* background-color: blue; */
}

.GridGalleryContainer {
	position: absolute;
  top: 2vw;
  left: 50%;
  transform: translate(-50%, 0%);
	width: 90%;
  height: 90%;
  max-width: 1500px;
  max-height: 800px;
  /* background-color: red; */
}

.GridGallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* was 200,150 at media900 */
  /* grid-template-rows: repeat(2, auto) repeat(3, 1fr); */
  grid-gap: 4px;
  grid-auto-rows: min-max(80px, auto); /* grid-auto-rows: min-max(80px, auto); grid-auto-rows: 250px; */
  grid-auto-flow: dense;
  cursor: pointer;
  /* background-color: green; */
}

@-moz-document url-prefix() {
  .GridGallery {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    grid-auto-rows: min-max(380px, auto);
  }
}

.ImgGalleryClose {
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 20px;
  /* cursor: url(images/icons/x.png), auto; */
  /* cursor: pointer; */
  /* pointer-events: none; */
}

.GridGalleryClose {
  /* Center the content horizontally */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 35px;
  padding-bottom: 25px;
  font-size: 50px;
  /* background-color: yellow; */
}

.card {
  min-height: 250px;
  background-size: cover;
  background-position: 50% 50%;
  border-radius: 10px;
  transition: all 0.3s ease;
	/* filter: grayscale(100%); */
	filter: brightness(100%);
}

@-moz-document url-prefix() {
  .card {
    min-height: 350px;
  }
}

.card:hover {
    transform: scale(1.005);
	/* filter: grayscale(0%); */
	filter: brightness(111%);
}

.span-2 { grid-column-end: span 2; grid-row-end: span 2; min-height: 300px; }
.span-3 { grid-column-end: span 3; grid-row-end: span 3; min-height: 600px; }

/* CSS for fullscreen display */
#GridFullscreenContainer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 9999;
	cursor: url(images/icons/x.png), auto;
}

#GridFullscreenImage {
    max-height: 90%;
    max-width: 95%;
    margin: auto;
    display: block;
	cursor: url(images/icons/x.png), auto;
}

#GridFullscreenContainer.show {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* IMAGE GALLERY (FULLSCREEN) */

.fullscreen-overlay {
  /* display: none; */
  flex-direction: column;
  cursor: url(images/icons/x.png), auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.975);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.img-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* pointer-events: none; */
  transition: all 0.3s ease-in-out;
}

.fullscreen-image {
  position: absolute;
  max-width: 90%;
  max-height: calc(90% - 12px);
  /* transition: opacity 0.2s ease-in-out; */
  transition: all 0.3s ease;
  /* clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%); */
}

.videoElement {
  cursor: pointer;
  z-index: 1001;
}

.panorama {
  width: 90%;
  height: 80%;
}

.galleryback {
  cursor: url(images/icons/back.png), auto;
  clip-path: polygon(0 0, 51% 0, 51% 100%, 0% 100%);
  /* filter: grayscale(1); */
}

.gallerynext {
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  cursor: url(images/icons/next.png), auto;
}

.gallerycomment {
  color: rgb(0, 0, 0);
  text-shadow: 
  1px 1px 0 white, 
  -1px -1px 0 white, 
  -1px 1px 0 white, 
  1px -1px 0 white;
  text-align: center;
  position: absolute;
  width: 90%;
  top: 1%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  transition: all 0.3s ease;
  z-index: 1001;
}

.image-counter {
  color: rgb(0, 0, 0);
  text-shadow: 
  1px 1px 0 white, 
  -1px -1px 0 white, 
  -1px 1px 0 white, 
  1px -1px 0 white;
  text-align: center;
  position: absolute;
  bottom: 1%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
}

.previmage {
  color: rgb(0, 0, 0);
  text-shadow: 
  1px 1px 0 white, 
  -1px -1px 0 white, 
  -1px 1px 0 white, 
  1px -1px 0 white;
  text-align: center;
  position: absolute;
  bottom: 1%;
  left: 40%;
  transform: translateX(-40%);
  font-size: 32px;
  padding: 20px 20px 0px 20px;
  /* cursor: url(images/icons/back.png), auto; */
  cursor: pointer;
  white-space: nowrap;
}

.nextimage {
  color: rgb(0, 0, 0);
  text-shadow: 
  1px 1px 0 white, 
  -1px -1px 0 white, 
  -1px 1px 0 white, 
  1px -1px 0 white;
  text-align: center;
  position: absolute;
  bottom: 1%;
  left: 60%;
  transform: translateX(-60%);
  font-size: 32px;
  padding: 20px 20px 0px 20px;
  /* cursor: url(images/icons/next.png), auto; */
  cursor: pointer;
  white-space: nowrap;
}

.scroll-top {
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-top img {
  width: 16vw;
  max-width: 100px;
  opacity: 0.8;
  transition: transform 0.3s ease, opacity 0.3s ease;
  /* mix-blend-mode: difference; */
  z-index: 14;
}

.scroll-top:hover img {
  transform: scale(1.2);
  opacity: 1;
}

.footer {
  position: absolute;
  text-align: center;
  width: 100%;
  left: 50%;
  padding-bottom: 10px;
  /* padding-top: 110px; */
  transform: translateX(-50%);
  color: #fff;
  font-size: 16px;
  opacity: 0;
  z-index: 14;
  transition: opacity 1s ease-in-out;
}
.footer a {
  /* color: black; */
  color: #fff;
  /* background-color: rgba(255, 255, 255, 0.33); */
  /* padding: 0px 10px; */
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* Fade In/Out */

/* CSS class for fade-in animation */
.fadeIn {
  opacity: 1;
}

.fade-in {
  transition: opacity 3.0s ease-in-out; 
}
.fade-out {
  transition: opacity 3.0s ease-in-out; 
}

/* CSS class for fade-out animation */
.fadeOut {
  opacity: 0;
}

.fade-effect {
  opacity: 0;
  transition: opacity 0.3s ease; 
}
.gallery-fade-out {
  opacity: 0;
  filter: grayscale(10%) contrast(90%) brightness(110%) blur(1px);
  -webkit-filter: grayscale(10%) contrast(90%) brightness(110%) blur(1px);
}
.gallery-fade-in {
  opacity: 1;
  transform: translateX(0px);
  filter: grayscale(0%) contrast(100%) brightness(100%) blur(0px);
  -webkit-filter: grayscale(0%) contrast(100%) brightness(100%) blur(0px);
}
.left {
  transform: translateX(-20px);
}
.right {
  transform: translateX(20px);
}

/* MEDIA QUERIES */

@media only screen and (min-width: 1501px) {
  .posttext {
    max-height: 85%;
  }
  li {
    font-size: calc(clamp(50px, 6vw, 100px)/3);;
  }
  li:hover {
    font-size: calc(clamp(50px, 6vw, 100px)/2.5);;
  }
}


@media only screen and (max-width: 900px) {
  .header {
    width: 100%;
    left: 0;
    top: 0;
    height: 50px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    left: 0;
    right: auto;
    background-size: 80% auto;
  }
  .headertext {
    top: 10px;
    position: fixed;
    margin-left: 90px;
    line-height: 25px;
    font-size: 25px;	
  }
  .headerflag {
    margin-top: 20px;
  }
  .headerflagbg {
    margin-top: 20px;
  }
  .menucontainer { 
    z-index: 24;
    pointer-events: none;
  }
  .menu {
    left: 5vw;
    width: 50vw;
    padding-top: 40px;
    pointer-events: auto;
    /* z-index: 20000000000; */
  }
  ul {
    width: 50vw;    
  }
  li {
    font-size: 32px;
  }
  li:hover {
    font-size: 28px;
  }
  .menu li img {
    width: 32px;
    height: 32px;
  }
  .sectiontitlecontainer {
    width: 70vw;
    height: 50vw;
  }
  .polaroidcontainer {
    padding: 25vh 0 3vh 0;
    width: 100%;
    left: auto;
    right: 0;
  }
  .polaroid {
    /* width: 80vw; */
    /* height: 95vw; */
    width: 40vw;
    height: 47vw;
	  border: 6px solid #e4e4e4;
    border-width: 1.5vw 1.5vw 8vw 1.5vw;
    bottom: 75px;
  }
  .polaroidDateContainer {
    bottom: -3vw;
    height: 2.8vw;
    /* background-color: green; */
  }
  .polaroidTextContainer {
    bottom: -7.5vw; 
    height: 5vw;
    /* background-color: yellow; */
  }
  .postcontainer {
    width: 96%;
    /* height: 100vh; */
    top: 85px;
    left: 2%;
    right: auto;
  }
  .letter {
    height: 92vh;
  }
  .paperclip img {
    position: fixed;
    top: calc(15vw + 73px);
    left: 4vw;
    width: 7vw;
    transform: translate(50px, 5px) rotate(60deg);
  }
  .gallerypreview {
    top: calc(14vw + 80px);
    width: 21vw;
    height: 24vw;
    border: 6px solid #e4e4e4;
    border-width: 0.8vw 0.8vw 5vw 0.8vw;
    /* top: 20vw; */
    left: 4vw;
  }
  .GridGallery {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-gap: 4px;
    /* grid-auto-rows: 80px; */
    /* grid-auto-rows: min-max(80px, auto) !important; */
  }

  .card {
    min-height: 150px;
  }
  
  .span-2 { grid-column-end: span 2; grid-row-end: span 2; min-height: 200px; }
  .span-3 { grid-column-end: span 3; grid-row-end: span 3; min-height: 400px; }

  .postclose {
    top: 0px;
    right: 20px;
    font-size: 60px;
  }
  .postdatecontainer {
    height: calc(3vw);
    max-height: calc(3vw);
    min-height: calc(3vw);
  }
  .posttitlecontainer {
    height: calc(10vw);
    max-height: calc(10vw);
    min-height: calc(10vw);
  }
  .posttext {
    width: 96%;
    font-size: 18px;
    line-height: calc(18px * 1.5);
    padding: 10px 10px 100px 10px;
  }
  .posttext img {
    width: calc(21vw + 20px);
    height: calc(18.5vw + 20px);
  }
  img.maplink {
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
  }
  .stain img {
    width: 24vw;
  }

  .previmage {
    left: 20%;
    transform: translateX(-20%);
  }
  
  .nextimage {
    left: 80%;
    transform: translateX(-80%);
  }

  @keyframes animate-in-and-out {
    /* Adjusted styles for screens with a maximum width of 900 pixels */
    
    /* Entry styles */
    entry 0% {
      /* Your adjusted entry styles here */
      transform: translateY(25%) rotate(15deg) scale(0.8);
      -webkit-transform: translateY(25%) rotate(15deg) scale(0.8);
    }
    entry 100% {
      /* Your adjusted entry styles here */
      transform: translateY(0) rotate(8deg);
      -webkit-transform: translateY(0) rotate(8deg);
    }

    /* Exit styles */
    exit 0% {
      /* Your adjusted exit styles here */
      transform: translateY(0) rotate(-8deg);
      -webkit-transform: translateY(0) rotate(-8deg);
    }
    exit 100% {
      /* Your adjusted exit styles here */
      transform: translateY(-25%) rotate(-15deg) scale(0.8);
      -webkit-transform: translateY(-25%) rotate(-15deg) scale(0.8);
    }
  }
}

@media only screen and (max-width: 450px) {
  .menu {
    left: 0;
    width: 100vw;
    /* z-index: 20000000000; */
  }
  ul {
    width: 100vw;    
  }
  .polaroid {
    width: 85vw;
    height: calc(100vw + 20px);
	  border: 6px solid #e4e4e4;
    border-width: 3vw 3vw 19vw 3vw;
  }
  .polaroidDateContainer {
    bottom: -4.7vw;
    height: 4vw;
  }
  .polaroidTextContainer {
    bottom: -17.5vw; 
    height: 12vw;
  }
  .letter {
    padding-bottom: 150px;
  }
  .paperclip img {
    position: absolute;
    width: 10vw;
    top: -1px;
    left: 0.1vw;
  }
  .gallerypreview {
    width: 26vw;
    height: 30vw;
    border: 6px solid #e4e4e4;
    border-width: 0.8vw 0.8vw 5vw 0.8vw;
    /* top: 20vw; */
    left: calc(38vw + 50px);
    top: auto;
    bottom: 30px;
    transform: translateX(-50%);
  }
  .gallerypreview.one { 
    transform: translate(-60px, -10px) rotate(1deg);
  }
  .gallerypreview.two {
    transform: translate(-120px, 0px) rotate(-12deg); 
  }
  .gallerypreview.three {
    transform: translate(0px, -2px) rotate(9deg);
  }
  .gallerypreview.one:hover {
    transform: translate(-60px, -40px) rotate(0deg) scale(1.2); 
  }
  .gallerypreview.one:hover ~ .gallerypreview.two {
    transform: translate(-130px, -20px) rotate(-14deg) scale(1.04);
  }
  .gallerypreview.one:hover ~ .gallerypreview.three {
    transform: translate(10px, -25px) rotate(11deg) scale(1.05);
  }
  .stain img {
    width: 120px;
  }
  .posttext img {
    width: 0px;
    height: 0px;
  }
  img.maplink {
    width: 16px;
    height: 18px;
    max-width: 16px;
    max-height: 18px;
    padding: 2px 0px 0px 0px;
  }

  .postdatecontainer {
    width: 80%;
    height: calc(3vw + 4px);
    min-height: calc(3vw + 4px);
    max-height: calc(3vw + 4px);
    margin-top: 10px;
    margin-left: 0;
    margin-right: 30px;
  }
  .posttitlecontainer {
    width: 80%;
    height: calc(10vw + 14px);
    min-height: calc(10vw + 14px);
    max-height: calc(10vw + 14px);
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 0;
    margin-right: 30px;
  }
  .footer {
    font-size: 12px;
  }
}

@media (max-height: 600px) {
  .polaroid {
    margin-bottom: 0px;
  }
  .posttext {
    font-size: 16px;
    line-height: calc(16px * 1.5);
  }
  .fullscreen-image {
    max-height: 80%;
  }
  .image-counter {
    bottom: 2%;
    font-size: 16px;
  }
  .gallerycomment {
    top: 2%;
    font-size: 16px;
  }
  .posttitlecontainer {
    height: calc(4vw + 14px);
    min-height: calc(4vw + 14px);
    max-height: calc(4vw + 14px);
  }
  .posttext img {
    width: calc(14% + 25px);
    height: calc(7.4vw);
  }
  img.maplink {
    width: 12px;
    height: 14px;
    max-width: 12px;
    max-height: 14px;
    padding: 2px 0px 0px 0px;
  }
}

@media (max-height: 600px) and (max-width: 900px) {
  .posttext img {
    width: calc(23.5vw + 5px);
    height: 25vw;
  }
  img.maplink {
    width: 12px;
    height: 14px;
    max-width: 12px;
    max-height: 14px;
    padding: 2px 0px 0px 0px;
  }
}

@media (max-height: 600px) and (max-width: 450px) {
  .posttext img {
    width: 0px;
    height: 0px;
  }
  img.maplink {
    width: 12px;
    height: 14px;
    max-width: 12px;
    max-height: 14px;
    padding: 2px 0px 0px 0px;
  }
}