html, body {
    height: 100vh;
    margin: 0;
    overflow: hidden;
}


body {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    grid-template-columns: repeat(7, 1fr);
    box-sizing: border-box;
    background-color: #ECE7E1;
    max-width: 100%;
    
     }
/* Links to other pages */
.homepage-main-links {
    grid-row: 3/5;
    grid-column: 5/8;
    display: flex;
    flex-direction:column;
    gap: 0.2rem;

}
.homepage-main-links a {
    font-size: 6vw;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    font-family: 'Lexend Zetta';
    text-decoration: none;
}

/*Location of about */
.homepage-description {
    grid-row: 6;
    grid-column: 2/4;
    max-width: 100%;
    padding-right:1rem;
}
/*Font for about section */
.homepage-description p {
    font-size: clamp(10px, 1vh, 40px);
    font-family: 'Lexend Zetta';
    font-weight: 400;
}

/*spaceboy position and size */
.spaceboy {
    grid-row: 3;
    grid-column: 2/3;
    justify-self: center;
    align-self: center;
    
    position: absolute;
    z-index: -1;
    opacity: 0.35;


}

/* Adjusting size for mobile */

@media (max-width: 768px) {
    body {
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow-y: auto;
        padding: 1rem;
        height: auto;
    }

    .spaceboy {
        position: static;
        width: 250px;
        height: 251px;
        
    }
    

    .homepage-main-links {
        order: 1;
        align-items: center;
        text-align: center;
        gap: 0.25rem;
    }

    .homepage-main-links a {
        font-size: 2rem;
        font-family: 'Lexend Zetta';
    }

    .homepage-description {
        order: 2;
        text-align: center;
        font-size: 1rem;
        margin-top: 1rem;
        font-family: 'Lexend Zetta';
        font-weight: 400;
    }
}