* {
    box-sizing: border-box;
    margin: 0;
}
body {
    margin: 0;
    min-height: 100vh;
    font-family: Montserrat, sans-serif;
    /* font-family: sans-serif; */
    /* font-family: monospace; */
}

div.images {
    position: relative;
    height: 100vh;

    /* background: linear-gradient(rgb(66, 1, 66), rgb(0, 102, 136)); */
    background: linear-gradient(rgb(66, 1, 66), rgb(0, 102, 136), rgb(66, 1, 66));

    img {
        position: absolute;
        inset: 0px;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* let gradient background overlay the moon background color*/
    img[alt="Moon"] {
        mix-blend-mode: screen;
    }

    h1 {
        position: absolute;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        color: white;
        white-space: nowrap;
        font-size: clamp(3rem, 8vw, 5.5rem);
        letter-spacing: 2px;
    }
}


/* text section */
section {
    position: relative;
    z-index: 100;
    
    /* responsive padding using min */
    padding: min(4rem, 5%);
    background: rgb(43, 2, 43);
    color: whitesmoke;

    & > * { padding-block: 10px };

    h2 {
        font-size: 3rem;
    }

    p {
        font-size: 1.1rem;
    }
}