/* Global Styles */
body {
    background-color: var(--secondary-background-color);
}

/* Layout and Containers */
.full-width-div {
    display: flex; /* Enables flexbox layout */
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* Typography */
.heading {
    line-height: 100px;
}

.sub-heading {
    padding: 10px;
}

.name {
    font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; 
    font-size: 30px;
    font-weight: 800;
}

.introduction {
    font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; 
    line-height: 1.4;
    font-size: 18px;
    font-weight: 800;
    color: #1d1d1f;
}

/* Section Heights & Backgrounds */
.home-title-block {
    max-height: 40vh; /* Set height for the div */
    background-color: white;
}

.home-name-block {
    min-height: 20vh; /* Set height for the div */
    background: linear-gradient(to bottom, white 50%, var(--secondary-background-color) 50%);
}

.home-intro-block {
    min-height: 40vh; /* Set height for the div */
    padding: 30px;
}

/* Desktop Styles (768px and above) */
@media screen and (min-width: 768px) { 
    .heading {
        line-height: 120px;
    }

    .sub-heading {
        font-size: 20px;
        padding: 20px;
    }

    .name {
        font-size: 50px;
    }

    .introduction {
        line-height: 1.4;
        font-size: 30px;
    }

    .home-title-block {
        height: 40vh; /* Adjust height for desktop */
    }

    .home-name-block {
        height: 20vh;
    }

    .home-introduction-block {
        height: 40vh;
    }

    .home-intro-block {
        padding: 50px;
        max-width: 800px; /* Keep content from stretching too wide */
        margin: 0 auto; /* Center alignment */
    }
}