/* Fonts for site */ 
@import url('https://fonts.googleapis.com/css2?family=Jersey+15&display=swap');
/* Font for signs and titles of popovers ^^^ */ 

@import url('https://fonts.googleapis.com/css2?family=Rubik+Bubbles&display=swap');
/* Font for title at bottom with bush background ^^^ */

@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');
/* Font for boxes at sides ^^^ */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');
/* Font for popover subtext ^^^ */

body {
  background-image: url('./Images/forest.png');
  background-size: 1650px 1000px;
}
/* this is for the roots/tree branches background */

/* Do more research on how to use padding/margins. Look at other websites for examples */

.Title {
  position: absolute;
  bottom: 0px;
  width: 100%;
  margin-bottom: 20px;
  left: 0px;
  color: #ffe736;
  z-index: 3;
   font-family: "Rubik Bubbles", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 100px;
  text-align: center;
}

.longbush{
  position: absolute;
  bottom: 0px;
  width: 100%;
  left: 0px;
  height:900px;
  filter: brightness(75%);
  z-index: 3;
}

.blink {
  position: absolute;
  left: 275px;
  top: 45px;
  z-index: 1;
}

[popover]:popover-open {
  opacity: 1;
  transform: scaleY(1);
  overflow-y: auto;
}
/* This is for the popover's transition when it opens */ 

[popover] {
  opacity: 0;
  transform: scaleY(0);
  transition: all 0.7s allow-discrete;
}
/* This is for the popover's transition when it closes since there's no "popver-open" pseudo class. The "allow-discrete" adjusts the opacity, transform, overlay, and display timing, all of which can be adjusted individually. Allow discrete just means that the element's display switches to hidden but allows the animation to still be seen. (MDN) These first few commands for the popover are defining the movement we want. Think of the first and last keyframes of an animation. */ 

@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scaleY(0);
  }
}
/* @starting-styles help define the starting style for an element that does not have a previous state, defining the property values to transition from. This reduces unexpected behavior in CSS. (MDN) Basically, this code is for the popover to be hidden first before it is revealed with the transition */

[popover]::backdrop {
  background-color: transparent;
  transition: all 0.7s allow-discrete;
}
/* This controls the transition for the backdrop, with allow-discrete controlling the display, overlay, and background-color speed, which can be adjusted individually. */ 

[popover]:popover-open::backdrop {
  background-color: rgb(0 0 0 / 25%);
}
/* This defines the color for the backdrop, which is a faded black. */ 

@starting-style {
  [popover]:popover-open::backdrop {
    background-color: transparent;
  }
}

/* This is the starting state of the backdrop (it's hidden before the transition) */ 


#mypopover {
  position: absolute;
  width: 700px;
  height: 800px;
  background-color: #a8803b;
  color: white;
  z-index: 2;
  text-align: center;
  
}

.toptext {
  position:absolute;
  top:-30px;
  width:100%;
  font-family: "Jersey 15", sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 50px;
  text-align: center;
  background-color: darkgreen;
  color: #ffe736;
}

#mypopover2 {
  position: absolute;
  width: 700px;
  height: 800px;
  background-color: #a8803b;
  color: white;
  z-index: 2;
  text-align: center;
}

#mypopover3 {
  position: absolute;
  width: 700px;
  height: 800px;
  background-color: #a8803b;
  color: white;
  z-index: 2;
  text-align: center;
}

#mypopover4 {
  position: absolute;
  width: 700px;
  height: 800px;
  background-color: #a8803b;
  color: white;
  z-index: 2;
  text-align: center;
}
  
.button,.button2,.button3,.button4 {
  background-color: transparent;
  border: transparent;
  z-index: 4;
  font-family: "Jersey 15", sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 40px;
  cursor: pointer;
  color: white;
  text-align: center;
}
.button {
  position: absolute;
  bottom: 610px;
  left: 250px;
  width: 200px;
  height: 100px;
}

.button2 {
  position: absolute;
  bottom: 360px;
  left: 390px;
  width: 200px;
  height: 100px;
}

.button3 {
  position: absolute;
  bottom: 610px;
  right: 250px;
  width: 200px;
  height: 100px;
}

.button4 {
  position: absolute;
  bottom: 360px;
  right: 415px;
  width: 200px;
  height: 100px;
}

.button:hover,.button2:hover,.button3:hover,.button4:hover {
  font-size: 45px;
  color: #ffe736;
}

.render {
  position: absolute;
  top: 125px;
  left: 50px;
}
.render2 {
  position: absolute;
  top: 125px;
  right: 25px;
}
.render3 {
  position:absolute;
  top: 650px;
  left: 200px;
}

.render4 {
  position: absolute;
  top: 125px;
  left: 100px;
}

.context{
  position: absolute;
  top: 115px;
  left: 100px;
}
.overhang {
  width: 100%;
  height: 800px;
}

.sign {
  position: absolute;
  bottom: 350px;
  left: 175px;
  width: 350px;
  height: 500px;
  z-index: 1;
  filter: brightness(80%);
}

.sign2{
  filter: brightness(80%);
  position: absolute;
  bottom: 100px;
  left: 325px;
  width: 350px;
  height: 500px;
  color: white;
  z-index: 2;
  text-align: center;
}

.sign3 {
  position: absolute;
  bottom: 350px;
  right: 175px;
  width: 350px;
  height: 500px;
  z-index: 1;
  filter: brightness(80%);
}

.sign4{
  filter: brightness(80%);
  position: absolute;
  bottom: 100px;
  right: 350px;
  width: 350px;
  height: 500px;
  color: white;
  z-index: 2;
  text-align: center;
}

.bush {
  position: absolute;
  bottom: 500px;
  left: 100px;
  width: 400px;
  height: 200px;
  z-index: 2;
  filter: brightness(75%);
}

.page {
  position: absolute;
  top: 50px;
  right: 150px;
  text-align:center;
  width: 250px;
  height: 100px;
  padding: 1em;
  background-color:darkgreen;
  color:#ffe736;
  box-shadow: 10px 8px 8px darkseagreen;
  border: thick double #ffe736;
  font-family: "Jersey 10", sans-serif;
  font-weight: 400;
  font-size: 20px;
  font-style: normal;
}

.page2 {
  position: absolute;
  top: 50px;
  left: 150px;
  text-align:center;
  width: 250px;
  height: 100px;
  padding: 1em;
  background-color:darkgreen;
  color:#ffe736;
  box-shadow: 10px 8px 8px darkseagreen;
  border: thick double #ffe736;
  font-family: "Jersey 10", sans-serif;
  font-weight: 400;
  font-size: 25px;
  font-style: normal;
}

.pixelcat {
  position: absolute;
  top: 85px;
  left: 815px;
  cursor: pointer;
  z-index: 4;
  background-color: transparent;
  border: transparent;
}


.pixelcat:hover {
  opacity: 1;
  transform: scale(1.1);
  transition: all 0.2s allow-discrete;
}

.subtext{
  text-align: center;
  color: white;
  font-family: "Onest", sans-serif;
  font-optical-sizing: auto;
  font-weight: 10px;
  font-style: normal;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 20px;
}

.subtext2 {
  position: absolute;
  top: 525px;
  text-align: center;
  color: white;
  font-family: "Onest", sans-serif;
  font-optical-sizing: auto;
  font-weight: 10px;
  font-style: normal;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 20px;
}

.subtext3 {
  position: absolute;
  top: 1050px;
  text-align: center;
  color: white;
  font-family: "Onest", sans-serif;
  font-optical-sizing: auto;
  font-weight: 10px;
  font-style: normal;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 10px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  font-size: 20px;
}