/* Best Practice */
/* what I was trying to do */
/* what is the resource I used */
/* what I learned from it */

.build-icon {
    width: 18px;
    height: 18px;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    background-color: var(--background-color);
    border: 1px solid var(--global-border-color);
    padding: 0.5rem 0;
    margin-top: 0;
    list-style: none;
    z-index: 1000;
	text-align: left;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu a {
    padding-block: 0.3rem;
    padding-inline: 0.8rem;
    display: block;
    text-decoration: none;
}

.dropdown-menu a:hover {
    color: var(--underline-hover);
    text-decoration: none;
}

h1 {
    text-align: center;
    letter-spacing: -0.3rem;
    font-size: 6rem;
    padding-block-start: 3rem;

    @media (width > 800px) {
        font-size: 7rem;
    }
}

h2 {
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.5rem;

    @media (width > 800px) {
        font-size: 1.5rem;
    }
}

main {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.theme {
	text-align: center;
	padding-block-start: 1rem;
}

/* I wanted to create a continuously scrolling carousel that would loop smoothly */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@keyframes */
/* The animation uses translateX to move the track horizontally from 0 to -50%, which shifts the first half of duplicated content off-screen while the second half slides in to create a seamless loop. The animation-play-state on hover lets users pause to see content */
.carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-block-start: 3rem;
    padding-inline: 0;
    margin: 0;
}

.carousel-track {
    display: flex;
    gap: 0.5rem;
    animation: scroll 40s linear infinite;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* I wanted to have my blocks clipped in a similar shape as my SVG in the top corner */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path */
/* The polygon points trace the house shape, starting at the peak (50% 0%), moving down to the roof edges (100% 20% and 0% 20%), then outlining the door cutout at the bottom before completing the shape (going back and forth on shape). Each percentage pair is an x,y coordinate that connects to form the clipping path */
.content-block {
	min-width: 17.5rem;
    width: 17.5rem;
    height: 31.25rem;
    flex-shrink: 0;
    background: white;
    box-shadow: 0 0.625rem 1.875rem var(--shadow);
    clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0% 100%, 0% 25%);


    @media (width > 800px) {
        min-width: 20rem;
        width: 20rem;
        height: 34.375rem;
    }
}

.block-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}