body {
    background-color: rgb(0, 6, 49);
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

}

.constellation {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #000033;
  color: rgb(219, 207, 207);
  border-radius: 10px;
}

.star {
    color: white;
    position: absolute;
    top: -200px;
    font-size: 1.8rem;
    text-shadow: 0 0 5px #fff; 
  }


.house{
    width: 1000px;
    height: 500px;
    border: 5px solid rgb(0, 0, 0);
    background-color: rgb(228, 0, 84);
    position: relative;
    z-index: 0;
}

.facade{
    position: absolute;
     width: calc(100% - 10px);
    height: calc(100% - 10px);
    border: 2px solid black;
    background: linear-gradient(rgb(62, 1, 1)) rgb(101, 45, 16);
    left: 50%;
    top: 50%; 
    transform: translate(-50%, -50%);
    z-index: 1;
    
}
.roof-border {
    position: absolute;
    bottom: 100%;       /* aligns bottom of roof-border with top of house */
    left: 50%;
    transform: translateX(-50%);
    width: 1012px;      /* slightly larger than roof */
    height: 212px;      /* slightly taller for border */
    background: rgb(148, 12, 12);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    z-index: 2;         /* z-index is numbering order */
}

.roof {
    position: absolute;
    bottom: 100%;       /* aligns bottom of roof with top of house */
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 200px;
    z-index: 3;         /* on top of the roof border

    /* vertical striped gradient */
    background:
        linear-gradient(to bottom,
            #4c1e0a 0%,
            #020eec 11%,
            #4c1e0a 21%,
            #020eec 31%,
            #4c1e0a 41%,
            #020eec 51%,
            #4c1e0a 61%,
            #020eec 71%,
            #4c1e0a 81%,
            #020eec 91%,
            #4c1e0a 100%
        ),
        linear-gradient(to top, rgba(231, 3, 3, 0.577), rgba(47, 134, 77, 0.196));
    background-blend-mode: overlay;

    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}


    /* horizontal roof gradient */
    /* background: linear-gradient(
        90deg,
        #4c1e0a 0%,  /* brown stripe */
        /* #020eec 11%, /* blue stripe */
        /* #4c1e0a 21%,
        #020eec 31%,
        #4c1e0a 41%,
        #020eec 51%,
        #4c1e0a 61%,
        #020eec 71%,
        #4c1e0a 81%,
        #020eec 91%,
        #4c1e0a 100%); */ 
 /* Keep the roof shape */
    /* clip-path: polygon(50% 0%, 100% 100%, 0% 100%); */

.door {
  position: absolute;
  width: 100px;
  height: 190px;
  background: rgb(0, 0, 0);
  border: 1px solid #020eec;
  left: 66%; transform: translateX(-50%);
  top: 56%; 
  z-index: 4;
  display: flex;
  justify-content: center;  /* horizontal */
  align-items: center;  
}

.door-link {
  color: rgb(68, 0, 255);      /* or whatever fits your palette */
  text-decoration: underline;
  font-size: 14px;
}

.window-grid {
    position: absolute;
    top: 62%;              
    left: 60%;              
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 window columns */
    grid-template-rows: repeat(2, 1fr);    /* 2 window rows */
    gap: 20px;                    
    width: 30%;                           
    height: 30%;                          
}
/* Left-side window container */
.left-windows {
    position: absolute;
    top: 0%;
    right: 63%;
    transform: translateY(-50%);
    display: grid;
    gap: 20px;                   /* vertical spacing between grids */
    width: 60%;
    height: 60%;
}

/* Right-side window container */
.right-windows {
    position: absolute;
    top: 0%;
    right: 10%;
    transform: translateY(-50%);
    display: grid;
    gap: 20px;
    width: 60%;
    height: 60%;
}

.window {
    background-color: antiquewhite;
    background: linear-gradient(45deg, rgb(255, 16, 3), rgb(0, 0, 0));
    border: 10px solid rgb(0, 0, 0);
    border-style: inset;
    width: 100%;   /* fills the grid cell */
    height: 100%;  /* fills the grid cell */
}