Stylus: @media screen and (max-width: 425px) prevents stylus from creating css

Question

I've just started coding my CSS with Stylus and I've got one problem.

I'd like to change my CSS depending on the max-width. For this I use @media screen and (max-width: xyzpx). Which normally works fine for me. In my style.styl file I use the above multiple times, but when I enter my the last one, the browser just opens the plain html file and does not use the .styl file at all.

Here is my code:

@media screen and (max-width: 425px)
  header 
    height 110px
    background-image url(/images/banner_425.jpg)
    a
        &.logo
        height 36px 
        background rgba(0,0,0,.65) url(/images/logo_small.svg) no-repeat center center
        background-size 126px 17px 

    .hero 
        width 100% 
        left 0 
        top 46px 
        text-align center 

        h1 
            font-size 1em
            margin-bottom 10px 

        a
            &.btn 
                padding 2px 30px 
                font-size .8em
                span 
                    display none 

Answer 1

You have an indentation error.

    &.logo
    height 36px 
    background rgba(0,0,0,.65) url(/images/logo_small.svg) no-repeat center center
    background-size 126px 17px

Should be:

&.logo
    height 36px 
    background rgba(0,0,0,.65) url(/images/logo_small.svg) no-repeat center center
    background-size 126px 17px

But in general I would strongly recommend using Rupture for media queries in Stylus