@charset "UTF-8";

/* -------- VARIABLES -------- */

/*skyblue, snow, aqua, wheat, firebrick, lawngreen, lightskyblue, 
orchid, olive, midnightblue, plum, orange, salmon, sandybrown, tomato, 
chocolate, coral, cornflowerblue, blueviolet, blanchealmons, darkorange, darkorchid, deepskyblue*/

:root {
  /* Font settings */
  --font-L: 100px;
  --font-M: 45px;
  --font-S: 23px;

  /* Margins settings */
  --margin: 20px;

  /* Elements sizing */
  --house-h:25vh;
  --house-w:25vh;
  --window-h:7vh;
  --window-w:5vh;
  /* --grass-h:;
  --grass-w:; */

  --shadow: 3px 3px rgba(0,0,0,0.2);

  /* Colors */;
  --sky-color: lightskyblue;
  --grass-color: lawngreen;
  --house-color: firebrick;
  --cloud-color: silver;

}

@font-face {
  font-family: 'Dauphine'; 
  src: url('../fonts/Dauphine\ Regular.otf'); 
}

/* -----IS THE BODY THE SKY?----*/
body{
  font-family: 'Dauphine';
  font-size: var(--font-M);
  color: snow;
  background-color: var(--sky-color);
  padding:0;
  margin:0;
  z-index: 999;
}

.in-page{
  background-color: var(--grass-color);
}

.above-page{
  background-color: var(--grass-color);
}

.around-page-R{
  background-color: var(--grass-color);
}

body.out-page, body.out-page-R  {
  background-color:black;
}

footer{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 20px;
  position: fixed;
  margin:var(--margin);
  margin-bottom: calc(var(--margin) + 0.5%);
  bottom:0;
  z-index:2000;
}

a{
  text-decoration: none;
  cursor: pointer;
}

h1{
  margin:var(--margin);
  font-size: var(--font-L);
  font-weight: normal;
  position: relative;
  z-index:2000;
}

h2{
  margin:var(--margin);
  font-size: var(--font-M);
  font-weight: normal;
  width:60vw;
  position: relative;
  pointer-events: none;
  text-wrap: balance;
  z-index:1100;
}

.index-page h2{
  pointer-events: initial;
  z-index:100;
}

.index-page h2 a{
  color:inherit;
  text-decoration:underline;
}


#sky-color h2{
  width: 90vw;
}

h3{
  margin:var(--margin);
  font-size: var(--font-S);
  font-weight: normal;
  width:60vw;
  z-index:100;
  position: relative;
  pointer-events: none;
  text-wrap: balance;
  z-index:1100;
}

.button{
  background-color: snow;
  color: var(--sky-color);
  width: 20vw;
  text-align: center;
  min-width: 315px; 
	font: inherit;
  border:none;
  box-shadow: 10px 10px rgba(0,0,0,0.2);
  padding: var(--margin);
  border-radius:50px;
  font-size: var(--font-S);
}

.out-page-R .button{
  color:black;
}


/* ---------------HOUSE--------------- */
.house {
  height: var(--house-h);
  width: var(--house-w);
  background-color: var(--house-color); /* stable */
  position: absolute;  /* stable */
  bottom:25vh; /* stable */
  left: 60vw;  /* stable */
  box-shadow: var(--shadow);  /* stable */
}

.in-page .house{
  display: none;
}

.out-page .house{
  background-color: black;
}

.beside-page-R .house{
  transform: translateX(-205%);
}

.around-page .house{
  transform: translateX(-10%);
}

.around-page-R .house{
  top:-10vh;
  left:90vw;
}
/* ---------------ROOF----------------- */
.roof{
  width:0vh;
  position: absolute;
  bottom:50vh;
  left:60vw;
  height: calc(var(--house-h)/5);
  border-left: calc(var(--house-w)/2) solid transparent;
  border-right: calc(var(--house-w)/2) solid transparent;
  border-bottom: calc(var(--house-w)/2) solid var(--house-color);
}

.in-page .roof, .above-page .roof{
  display: none;
}

.out-page .roof{
  display: none;
}

.beside-page-R .roof{
  transform: translateX(-205%);
}

.around-page .roof{
  transform: translateX(-10%);
}

.around-page-R .roof{
  display:none;
}

/* ---------------CLOUD(S)---------------- */

.clouds{
  height:65vh;
  width:100vw;
  position: fixed;
  top:0;
  z-index:1000;
}

.behind-page .clouds{
  display: block;
}

.out-page .clouds, .out-page-R .clouds{
  display: none;
}

.above-page .clouds{
  z-index: 999;
}

/* ---------------CLOUD---------------- */

.cloud{
  position:absolute;
  width: calc(var(--house-w)*1.5);
  height: calc(var(--house-w)/2);
  background-color: var(--cloud-color);
  border-radius:45px;
  box-shadow: var(--shadow);
}

.behind-page .cloud{
  display: block;
} 

/* -----------------GRASS---------------- */

.grass{
  height:35vh;
  width:100vw;
  background-color: var(--grass-color);
  position: fixed;
  bottom:0;
  box-shadow: var(--shadow);
}

.in-page .grass{
  background-color: var(--sky-color);
  transform: translate(0, -2.5vh);
  width: 96vw;
  height: 95vh;
  left: 2vw;
}

.in-page-R .grass{
  background-color: var(--grass-color);
  transform: translate(0, -2.5vh);
  width: 96vw;
  height: 95vh;
  left: 2vw;
}

.out-page .grass, .out-page-R .grass{
  display: none;
}

.out-page .grass, .out-page-R .grass{
  display: none;
}

.beside-page .grass{
  height: 100vh;
  width: 50vw;
  transform: translateX(100%);
}

.beside-page-R .grass{
  height: 100vh;
  width: 50vw;
}

.top-page .grass{
  height: 87vh;
}

.top-page-R .grass{
  height: 87vh;
  transform: translateY(-13vh);
}

.around-page .grass{
  transform: translate(0, -2.5vh);
  border-radius:50%;
  width: 96vw;
  height: 95vh;
  left: 2vw;
}

.around-page-R .grass{
  transform: translate(0, -2.5vh);
  border-radius:50%;
  width: 96vw;
  height: 95vh;
  left: 2vw;
  background-color: var(--sky-color);
}



/* ----------------WINDOWS--------------- */

.window{
  height: var(--window-h);
  width: var(--window-w);
  position: absolute;
  top:var(--window-w);;
  left:0;
  background-color: var(--sky-color);
  z-index: 999;
}

#window-1{
  left: var(--window-w);
}

#window-2{
  left: calc(var(--window-w)*3);
}

.window-v{
  height: var(--window-h);
  width:0.5vh;
  position:absolute;
  left:calc(var(--window-w)/2);
  background-color: var(--house-color);
}

.window-h{
  height: 0.5vh;
  width:5vh;
  position:absolute;
  top:calc(var(--window-h)/2);
  background-color: var(--house-color);
}

.above-page .window{
  display: none;
}

.out-page .window-v, .out-page .window-h{
  background-color: black;
}

.out-page-R .window, .out-page-R .window{
  background-color: black;
}

.around-page .window{
  z-index:0;
}


/* ----------------GARDEN--------------- */

.garden{
  height:35vh;
  width:80vh;
  bottom:0;
  position: absolute;
  z-index: 900;
}

.in-page .garden {
  display: none;
} 

.beside-page .garden{
  transform: translateX(110%);
}

.around-page .garden{
  transform: translateX(15%);
}

.around-page-R .garden{
  bottom:-10vh;
}

/* ---flowers---*/

.flower{
  height: 10vh;
  width: 8vh;
  position: absolute;
  bottom:15vh;
  left:30vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

#flower-1{
  top: 50px;
  position: absolute;
}

#flower-2{
  left: 50px;
  position: absolute;
}

#flower-3{
  top:25px;
  left:105px;
  position: absolute;
}

.petal{
  height: var(--window-w);
  width: var(--window-w);
  border-radius: 50%;
  background-color:orchid;
  position: absolute;
  top:0;
  box-shadow: var(--shadow);
  display: flex;
  justify-content: center;
  align-items: center;
}

.petal-inside{
  height: calc(var(--window-w)/1.5);
  width: calc(var(--window-w)/1.5);
  border-radius: 50%;
  background-color:wheat;
  position: absolute;
  top:0;
  box-shadow: var(--shadow);
}

.above-page .petal-inside{
  display: none;
}

.stem{
  height: var(--window-w);
  width: calc(var(--window-w)/5);
  background-color:forestgreen;
  position: absolute;
  bottom:0;
  box-shadow: var(--shadow);
}

.out-page .flower {
  display:none;
}

.above-page .stem{
  display: none;
}

.around-page #flower-2{
  left: 200px;
}

.around-page #flower-2{
  top:0px;
}

@media (width < 600px) {
  :root{
    --font-L: 70px;
    --font-M: 30px;
    --font-S: 20px;
  }


  footer {
    margin-left: 0;
    justify-content: center;
    align-items: center;
  }

  h2{
    width:75vw;
  }

  .beside-page .garden{
    transform: translateX(40%);
  }

}