.heroImage{
    z-index:0;
    height: 100vh;
    width: 100vw;
    position: relative;
    overflow: hidden;
    margin: 0%;
    display: grid;
    place-items: center;
}

.heroImage::before {
    inset: 0;
    background-image:linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../images/grandCan.png");
    background-repeat: no-repeat;
    background-size: cover;
    position:absolute;
    content:'';
    filter:blur(1px);
}

.heroSection{
    align-items: center;
    text-align: center;
    color: white;
    font-family: "Monoton", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1400%;
    position: relative;
    z-index: 1;
}
#heroText{
    text-decoration: none;
    margin: 0;
}
#heroInfoButton{
    color: white;
}

#heroInfoButton:hover{
    animation: colorChange 3s infinite alternate;
}

@keyframes colorChange {
    0% {
      color: #ffffff; /* Starting color */
    }
    100% {
      color: var(--yellow); /* Ending color */
    }
}

/******************************************************* 


                    MOBILE STYLING                              


********************************************************/

@media (max-width: 480px) {
    .heroSection{
        align-items: center;
        text-align: center;
        overflow-wrap: break-word;
        color: white;
        font-family: "Monoton", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 600%;
        position: relative;
        z-index: 1;
    }
    
    .heroTextLeft{
        width: 100vw;
    }

    #heroText {
        width: 100vw;             
        padding: 0;         
    }

    .textsplit {
        width: 100vw;
        align-self: flex-end;    
        text-align: right;             
    }

    #heroText {
        display: flex;
        text-align: left;   
        flex-direction: column;

    }

    #heroInfoButton {
        width: 100vw;  
        right: 0;
        align-self: flex-end;
        text-align: right; 
    }
}