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

/* Overlay Image | Prevent the image from being downloaded or copied.| Placed over the image */
.overlayImg {/* All photos have an image saver */
  position: relative;
  background-color: transparent;
  z-index: 5; /* z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items. */
  pointer-events: none; /* The pointer-events property defines whether or not an element reacts to pointer events. | Do not allow copying or downloading an image. */
}

.flexBox {
  display: flex;
  display: -webkit-flex;
  align-items: center; /* Position the flex items in the center, inside the same container.*/
  justify-content: center;
  flex-flow: column nowrap; /* The "flex-direction: column;" stacks the flex items vertically (from top to bottom) */
}

.gap {
  gap: 64px;
}

section {
  padding: 32px 16px;
}

.title-section { /* section flexBox */
  font: normal small-caps 400 30px "Raleway", sans-serif; /* font: font-style | font-variant | font-weight | font-size/line height | font-family */
  text-transform: capitalize;
  padding: 36px 0 5px 0;
  height: 77px;
}

.main-container {/* flexBox */
  width: 580px;
  height: 680px;
}

#canvas-with-positionedItems {
  background-color: white;
  position: relative;
  width: 500px;
  height: 400px;
  border: 2px groove CadetBlue;
  outline: 15px solid rgb(239, 250, 235);
  outline-offset: 5px; /*The space between an element and its outline is transparent.*/
  border-radius: 5px;
  box-shadow: 0 0 20px 0 hsl(103, 59%, 25%);
}

#earth {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 21%;
  background-color: green;
}

#sky {
  position: absolute;
  top: 0;
  width: 100%;
  height: 80%;
  /*background-color: navy;*/
  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
}

#mountain {
  position: absolute;
  top:3.5%;
  left: 15%;
  width: 0;
  height: 0;
  border-bottom: 300px solid SaddleBrown;
  border-left: 175px solid transparent;
  border-right: 175px solid transparent;	
}

#house-elements {
  position: absolute;
  top:39%;
  left: 35%;
  width: 150px;
  height: 160px;
  background: white;
  border-radius: 5px 0;
}

#smoke,
#chimney,
#roof,
#window-left-top,
#window-right-top,
#window-left-bottom,
#window-right-bottom,
#window-center,
#door {
  position: absolute;
}

#window-left-top,
#window-right-top,
#window-left-bottom,
#window-right-bottom {
  width: 15px;
  height: 15px;
  background-color: LightSkyBlue;
  border-radius: 3px;
}

#window-center{
  width: 20px;
  height: 15px;
  background-color: rgba(135, 206, 235,0.5); /*LightBlue*/
  top: 55px;
  left: 65px;
  border-radius: 3px;
}

#window-left-top {
  top: 20px;
  left: 20px;
  transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
  border: 1px solid navy;
}

#window-left-bottom {
  top: 70px;
  left: 20px;
}

#window-right-top {
  top: 35px;
  right: 20px;
  border: 1px solid navy;
}

#window-right-bottom {
  top: 70px;
  right: 20px;
  transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  border-right: 2px solid navy;
}

#door {
  width: 50px;
  height: 85px;
  bottom: 0;
  left: 53px;
  background-color: brown;
  border-radius: 5px 5px 0 0;
}

#door #one {
  height: 20%;
  background-color: maroon;
  border-radius: 3px 5px 0 0;
}

#door #two {
  height: 50%;
  background-color: snow;
}

#door #three {
  height: 30%;
  background-color: peru;
}

#roof {
  top: 25%;
  left: 39.5%;
  width: calc(154px * 0.7071);
  height: calc(154px * 0.7071);
  background-color: red;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  border: 2px solid maroon;
}

#chimney {
  width: 20px;
  height: 40px;
  background-color: teal;
  z-index: 0;
  top: 24%;
  left: 55%;
}

#smoke {
  width: 20px;
  height: 60px;
  top: 10%;
  left: 55%;
}

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}

@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

.ex1 {
  background: linear-gradient(var(--startColor), var(--endColor));
  animation: gradient 3s linear infinite;
}

@keyframes gradient {
  0%,
  100% {
    --startColor: #EADEDB;
    --endColor: #BC70A4;
  }
  50% {
    --startColor: #BC70A4;
    --endColor: #BFD641;
  }
}


/*
@keyframes gradient {
  0%,
  100% {
    background: linear-gradient(to top,SaddleBrown, WhiteSmoke, WhiteSmoke);
    background: linear-gradient(to top, WhiteSmoke, WhiteSmoke, WhiteSmoke);
    
  }
  50% {
    background: linear-gradient(to top,WhiteSmoke,WhiteSmoke, Navy);
    background: linear-gradient(to top,SaddleBrown, WhiteSmoke, WhiteSmoke);
  }
}
*/
#road {
  position: absolute;
  bottom: 0;
  left: 43%;
  width: 30px;
  height: 21%;
  /* The skew() function skews an element along the X and Y-axis by the given angles. */
  transform: skew(-20deg); /* Parallelogram CSS*/
  -webkit-transform: skew(-20deg);
  /*background-color: maroon;*/
  background: linear-gradient(to right, rgb(128,0,0), rgb(200,0,0), rgb(162, 27, 27));
  z-index: 1;
}

/* an image */

.original-house-design-container {
  position: absolute;
  bottom: 20px;
  right: 20px;
  transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* This value belongs to w3Schools | to create paper-like cards */
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border: 2px groove darkorange;
}

#original-house-design {
  display: block;
  width: 100px;
  height: calc(100px * (225/300));
}