*{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
html{
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}
body{
    margin: 0;
    padding: 0;
    background-color: white;
}
.headerBox{
    width: 100%;
    height: 15vh;
    display: block;
    position: relative;
    overflow: hidden;
    align-content: center;
    object-fit: contain;
}
.headerBox::before{
    content: "";
    position: absolute;
    background-image: url("Images/ValemontCrescent/AbbotsfordHomeInside.JPG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    height: 100%;
    width: 100%;
    filter: blur(5px);
    inset: 0;
    z-index: 0;
    box-shadow: 0vh 0vh 2vh black, 0vh 0vh 4vh black, 0vh 0vh 6vh black;
}
.headerBox h1{
    position: relative;
    z-index: 1;
    text-align:center;
}
.headerBox a{
    text-decoration: none;
    font-size: clamp(1.8rem, 2vw, 6rem);
    color: white;
    text-shadow: 0px 0px 20px black, 0px 0px 30px black;
}
.navbar{
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: hsla(0, 0%, 25%, 0.85);
}
.navbar ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: center;
}
.navbar li{
    display: flex;
}
.navbar a{
    color: white;
    text-decoration: none;
    align-items: center;
    text-align: center;
    font-size: clamp(0.8rem, 1.2vw, 1.2rem);
    padding: 1rem;
    display: flex;
}
.navbar a:hover{
    background-color: hsl(0, 0%, 25%);
}
main{
    text-align: center;
}
.HouseCardContainer{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    height: clamp(100px, 60vh, 40vw); /* clamp(min, pref, max) */
    margin-top: 2.5vh;
    margin-inline: auto;
    overflow: visible;
}
.HouseCardContainer > a { /* display: contents makes the <a> not create its own layout box, so the inner <div> behaves like the flex item. */
    display: contents;
}
.HouseCard{
    position: absolute;
    width: 20%;
    height: 70%;
    border-radius: 15%;
    corner-shape: squircle;
    transition-duration: 500ms;
    transition-timing-function: ease-in-out;
    object-fit: cover;
}
.HouseCard:not(.hidden):hover{
    opacity: 100%;
    scale: 1.05;
    box-shadow: 0vh 0vh 2.5vh black;
}
.HouseCard.active{
    opacity: 100%;
    width: 60%;
    height: 95%;
    box-shadow: 0vh 0vh 2.5vh black;
    left: 20%;
    z-index: 2;
}
.HouseCard.left{
    left: 0%;
    opacity: 35%;
    z-index: 1;
}
.HouseCard.right{
    left: 80%;
    opacity: 35%;
    z-index: 1;
}
.HouseCard.hidden{
    opacity: 0%;
    transition-duration: 250ms;
    left: 50%;
    z-index: 0;
}

#aboutUs{
    padding-bottom: 25px;
    padding-left: 15px;
    padding-right: 15px;
    max-width: 1200px;
    justify-self: center;
}

.infoCards{
    width: 100%;
    height: clamp(30vw, 60vh, 60vw);
    display: flex;
    justify-content: center;
    background-color: hsl(0, 0%, 90%);
    border-top: 0.5vh solid black;
    border-bottom: 0.5vh solid black;
    margin-top: -0.5vh;
    container-type: inline-size;
}
.infoCardsImage{
    margin-top: 2vh;
    height: auto;
    max-width: 50%;
    object-fit: cover;
    overflow: hidden;
}
.infoCardsImage img{
    max-width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
.infoCardsText{
    align-content: center;
    height: auto;
    max-width: 50%;
    overflow: hidden;
    text-align: start;
    text-wrap: nowrap;
}
.infoCardsText h1{
    /* font-size: clamp(1.3rem, 4vw, 5rem); */
    font-size: 5cqw;
    padding-left: clamp(0rem, 4vw, 5rem);
    margin-bottom: 0px;
}
.infoCardsText p{
    /* font-size: clamp(0.75rem, 2vw, 1.75rem); */
    font-size: 2cqw;
    padding-left: clamp(0rem, 4vw, 5rem);
    /* margin-top: -1vw; */
    /* margin-top: clamp(-2px, -21vw, -42vw); */
    /* margin-top: -2px; */
    margin-top: -0.5cqw;
}
.infoCardsText ul{
    list-style-type: none;
    padding-left: 2vw;
}
.infoCardsText li{
    /* font-size: clamp(0.65rem, 2vw, 1.6rem); */
    font-size: 2.5cqw;
    padding-bottom: 1.5vw;
}
.infoCardsText a{
    text-decoration: none;
    color: hsl(0, 0%, 0%);
}
.infoCardsText a:hover{
    color: hsl(0, 0%, 50%);
}

#developments{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-top: 4vh;
    margin-bottom: 4vh;
}
.developmentCards{
    width: clamp(300px, 25vw, 2000px);
    container-type: inline-size;
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    margin-top: 4vh;
    margin-bottom: 4vh;
    background-color: hsl(0, 0%, 90%);
    border-radius: 25px;
    box-shadow: 0vh 0vh 3vh black;
    transition-duration: 500ms;
    transition-timing-function: ease-in-out;
    overflow: hidden;
    scroll-margin-top: 6rem;
}
.developmentCards.Sold{
    position: relative;
    filter: blur(2px);
}
.developmentCards:hover{
    scale: 1.05;
    cursor: pointer;
    filter: blur(0px);
}
.developmentCards img{
    width: 100%;
    height: 50%;
    object-fit: cover;
}
.developmentCards.Sold .soldOverlay-text{
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    color: hsl(0, 67%, 36%);
    font-size: clamp(4rem, 6vw, 9rem);
    font-weight: 1000;
    letter-spacing: 0.5rem;
    margin: 0;
    text-shadow: 0px 0px 15px black, 0px 0px 25px black;
}
.developmentCards .cardTitle{
    /* font-size: clamp(1.2rem, 1.6vw, 2.5rem); */
    font-size: 6.5cqw;
    margin: 10px;
    text-wrap: nowrap;
}
.developmentCards .cardDesc{
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem;
    gap: 2rem;
    /* font-size: clamp(0.8rem, 1.4vw, 2rem); */
    font-size: 5cqw;
}

footer{
    box-sizing: border-box;
    width: 100%;
    height: 35vh;
    padding: 1rem;
    background-color: hsl(0, 0%, 50%);
    text-align: center;
    align-content: center;
}
footer .title{
    font-size: clamp(3rem, 3vw, 5rem);
    margin: 0px;
}
footer .desc{
    font-size: clamp(1rem, 1.4vw, 2rem);
}
footer a{
    text-decoration: none;
    color: hsl(0, 0%, 0%);
}
footer a:hover{
    color: hsl(0, 0%, 30%);
}