/* || IMPORT GOOGLE FONT LINKS */
@import url("https://fonts.googleapis.com/css2?family=Fugaz+One&family=Jacques+Francois+Shadow&family=Joan&family=Lexend+Deca:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

/* || RESET */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* || VARIABLES */
/* CHANGE THE DATA BELOW AS NEEDED */
:root {
  /* FONTS */
  --FF: "Nunito", sans-serif;
  --FS: clamp(1rem, 2.2vh, 1.5rem);

  /* COLORS */
  --BGCOLOR: #fff;
  --BGCOLOR-SKY: #b3e6ff;
  --BGCOLOR-GROUND: #008000;
  --BG-IMAGE: linear-gradient(
    var(--BGCOLOR-SKY) 0%,
    var(--BGCOLOR-SKY) 60%,
    transparent 60%,
    transparent 100%
  );
  --BGCOLOR-HOUSE: #c4b39c;
  --BGCOLOR-CHIMNEY: #52170f;
  --BGCOLOR-ROOF: #ffffb3;
  --BGCOLOR-DOOR: #aaaaaa;
  --BGCOLOR-WINDOW: #364132;
  --BORDER-COLOR: #998970;
  --FONT-COLOR: #000;

  /* BORDERS */
  --BORDER-HOUSE: 4px solid var(--BORDER-COLOR);

  /* STANDARD PADDING */
  --PADDING-TB-TEXT: 0.25em 2.5%;

  /* STANDARD MARGIN */
  --MARGIN-TEXT: clamp(1em, 2.5vh, 1.5em) 0;
}

/* || UTILITY CLASSES */
.offscreen {
  position: absolute;
  left: -10000px;
}

.nowrap {
  white-space: nowrap;
}

.center {
  text-align: center;
}

/* || GENERAL STYLES */
html {
  scroll-behavior: smooth;
  font-size: var(--FS);
  font-family: var(--FF);
  background-color: var(--BGCOLOR-GROUND);
  background-image: var(--BG-IMAGE);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

body {
  color: var(--FONT-COLOR);
}

p {
  line-height: 1.5;
}

/* || MAIN */

#house {
  position: relative;
  width: 500px;
  height: 400px;
  background-color: var(--BGCOLOR-HOUSE);
  border: var(--BORDER-HOUSE);
  margin: 150px auto;
}

#house div {
  position: absolute;
}

#chimney {
  background-color: var(--BGCOLOR-CHIMNEY);
  width: 50px;
  height: 120px;
  border: 3px solid #000;
  top: -120px;
  left: 425px;
  z-index: -1;
}

#roof {
  background-color: var(--BGCOLOR-ROOF);
  width: 100%;
  height: 20%;
  border: 5px solid #b35900;
  top: 0;
}

#door {
  background-color: var(--BGCOLOR-DOOR);
  width: 80px;
  height: 120px;
  border: 5px solid #535760;
  bottom: 0;
  left: calc(60% - 40px);
}

#door-knob {
  background-color: #535760;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  right: 5px;
  top: 50px;
}

#window-1,
#window-2 {
  background-color: var(--BGCOLOR-WINDOW);
  border: 5px solid #16181d;
  height: 75px;
}

#divider {
  width: 5px;
  height: 100%;
  background-color: #16181d;
  left: calc(50% - 2.5px);
}

#window-1 {
  width: 200px;
  left: 10%;
  top: 40%;
}

#window-2 {
  width: 150px;
  right: 10%;
  top: 40%;
}