/* ========================= */
/* GASP! You're checking out my code? :O Well alright, feel free to copy and paste but be warned! It is a big mess down here*/
/* ========================= */

@font-face {
  font-family: "report";
  src: url("report.ttf") format("truetype");
  
}

@font-face{
  font-family: "XTypewriter-Regular";
  src: url("XTypewriter-Regular.ttf") format("truetype");
  
}

html {
  margin: 0;
  min-height: 120vw;
  overscroll-behavior-y: none;
}

body.home {
  margin: 0;

  background-image: url("Thegarden/Garden-background.jpg");
  background-size: 25%;

  color: #282A36;
  font-family: "XTypewriter-Regular", monospace;
  -webkit-font-smoothing: none;

  cursor: url("Thegarden/Cursor-Shovel3.png") 5 27, auto;

  overflow-x: hidden;
  overflow-y: auto;
}


/* ========================= */
/* GROTE SCENE               */
/* ========================= */

.site-scene {
  position: relative;
  
  width: 100vw;
  
  overflow: hidden;
  
  transform: none;
  
  min-height: 300vh;
  
  isolation: isolate;
}

/* ========================= */
/* Soil Background.          */
/* ========================= */

.soil{
  position: absolute;
  transform: translateX(10vw);
}

.soil-vierkant{
  position: absolute;
  z-index: 10;
  width: 100vw;
  padding-top: 20vw;

}

/* De losse soil afbeeldingen onder elkaar */

.soil-vierkant-stack img {
  display: block;
  height: auto;
  transform: translateX(50%);
}

.soil-corners-left{
  position: absolute;
  z-index: 5;
  width: 100vw;
  padding-top: 10vw;
  
}
.soil-corners-stack-left img {
    display: block;
    height: auto;
    transform: translateX(10%);
}

.soil-corners-right{
  position: absolute;
  z-index: 15;
  width: 100vw;
  padding-top: 10vw;
  
}
.soil-corners-stack-right img {
    display: block;
    height: auto;
    transform: translateX(90%);
    z-index: 15;
}

/* ========================= */
/* Static images onderin     */
/* ========================= */


/* De fence*/

.fence {
  position: absolute;
  right: 0;
  bottom: -0.5vw;
  width: 80vw;
  left: 40vw;
  z-index: 40;
}

.fence img {
  display: block;
  width: 100%;
  height: auto;
}

/* planten onderin*/

.plants {
  position: absolute;
  right: 0;
  bottom: -0.5vw;
  width: 50vw;
  left: 20vw;
  z-index: 50;
}

.plants img{
  display: block;
  width: 100%;
  height: auto;
  
}

/* fontein met muis onderin*/
.fountain {
  position: absolute;
  right: 0;
  bottom: -5vw;
  width: 60vw;
  left: -10vw;
  z-index: 30;
}

.fountain img{
  display: block;
  width: 100%;
  height: auto;
  
}

/* ========================= */
/* Floating images.          */
/* ========================= */

#Clover{
  z-index: 30;
}

#Guineapig2{
  z-index: 40;
  position: absolute;
}

/* ========================= */
/* holes.                    */
/* ========================= */

/* ========================= */
/* Holes                     */
/* ========================= */

.hole-hover {
  position: absolute;
  width: 10vw;
  height: 10vw;
  cursor: url("Thegarden/Cursor-Shovel-hover2.png") 12 12, pointer;
  z-index: auto;
  
}

.hole-hover.is-open {
  cursor: url("Thegarden/Cursor-Shovel4.png") 12 12, pointer;
}

.hole-hover > .hole-img {
  position: relative;
  width: 14vw;
  height: auto;
  display: block;
  z-index: 30;
}

/* Hover tekst */
.hover-text {
  position: absolute;
  left: 3vw;
  top: 5vw;

  opacity: 0;
  pointer-events: none;

  font-family: "XTypewriter-Regular", monospace;
  font-size: 1vw;
  color: white;
  text-align: center;
  white-space: nowrap;

  z-index: 999;
  transition: opacity 0.2s ease;
}

.hole-hover:hover .hover-text {
  opacity: 1;
}

/* Plant in het midden van de hole */
.hole-plant {
  position: absolute;
  height: auto;
  opacity: 0;
  pointer-events: none;
  z-index: 50;

  transition: opacity 0.2s ease;
}

/* Tekstkaart rechts van de hole */
.hole-info-card {
  position: absolute;
  left: 14vw;
  top: -10vw;
  width: 33vw;

  opacity: 0;
  pointer-events: none;
  z-index: 60;

  transition: opacity 0.2s ease;
}

.hole-info-card .journal-img {
  width: 33vw;
  height: auto;
  display: block;
}

.hole-info-card h3 {
  position: absolute;
  left: 2.2vw;
  top: 5vw;
  width: 13vw;

  margin: 0;

  font-family: "XTypewriter-Regular", monospace;
  font-size: 1.1vw;
  color: #282A36;
  text-align: center;
}

.journal-text { 
  position: absolute;
  left: 2vw; 
  top: 6.3vw; 
  width: 29.7vw;
  height: 22vw;
  column-count: 2; 
  column-gap: 1.2vw; 
  column-fill: auto;
  font-family: "XTypewriter-Regular", monospace; 
  font-size: 0.9vw; 
  line-height: 1.1vw; 
  color: #282A36; 
  text-align: left; 
  overflow: hidden; 
  
}

.journal-text p {
  margin: 0;
}

.hole-hover.is-open .hole-info-card {
  opacity: 1;
}

.native-hole {
  top: 40vh;
  left: 25vw;
}

.veggies-hole {
  top: 80vh;
  left: 50vw;
}

.herbs-hole {
  top: 185vh;
  left: 30vw;
}

.plant-version {
  display: none;
}

.journal-page {
  display: none;
}

.hole-hover.is-open .plant-version.is-active {
  display: block;
  opacity: 1;
}

.hole-hover.is-open .journal-page.is-active {
  display: block;
}

.hole-hover.is-open .hole-info-card {
  opacity: 1;
}