* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    max-width: 3000px;
    margin: auto;
}

header {
    height: 4rem;
    display: flex;
    align-items: center;
    div {
        height: 1.5rem;
        font-size: 1.3rem;
        font-weight: 900;  
        margin-left: 1.6rem;
    }
}

main {
    overflow: hidden;
}

.hero {
    height: 800px;
    background-color: black;
    display: grid;
    place-content: center;
    h1 {
        font-family:sans-serif;
        font-size: 6rem;
        font-weight: 900;
        padding-inline: 4rem;
        text-align: center; 
        background: linear-gradient(to right, rgb(154, 3, 255) 20%, rgb(255, 0, 183) 80%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }
}

footer {
    border-top: 1px solid black;
    height: 400px;
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    display: grid;
    place-content: center;
}

/***** MEDIA QUERIES  *****/  
@media (max-width: 500px) {
    body {
        user-select: none;
    }
    .hero {
        height: 400px;
        h1 {
            font-size: 3rem;
        }
    }
    .band {
        height: 300px;  
    }
    .pic {
        min-width: 300px;
        font-size: 9rem;
        p {
            font-size: 1.2rem;
            margin-inline: 2.2rem;
            padding-bottom: 1rem;
        }
    }
}