How to get parent node in css using the checkbox trick (Hamburger Menu)

I browsed through the internet but found nothing to this topic...
HTML

<header class="IndexHeader">
            <nav class="navigation">                    
                    <input type="checkbox" id="check"/>
                    <label class="Hamburger" for="check">&#9776;</label>
                    <label class="schliessen" for="check">&#9932;</label>
                <ul class="IndexNavliste">
                    my navbar
                </ul>  
            </nav>            
        </header>

CSS

@media (max-width: 900px){
    .Hamburger{
        display: block;
    }
    .IndexNavliste{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: none;
    }
    .IndexNavliste li{
        display: block;
        margin-bottom: 20px;
    }
    .IndexNavliste li a:hover{
        color: black;
    }
    #check:checked + .Hamburger ~ .IndexNavliste{
        display: block;
    }
    #check:checked + .Hamburger{
        display: none;
    }
    #check:checked + .Hamburger ~ .schliessen{
        display: block;
    }
}

This Code works fine for me. Now I also need to get the <header class="IndexHeader>" to change the background and width and height. I tried like this:

#check:checked + .Hamburger ~ .IndexHeader{
        background-color: cornflowerblue;
        width: 100%;
        height: 100vh;
    }

This doesn't work, I think because the checkbox only can get the siblings and not the parents right? Does somebody know how to get the header so that I can change my background, width and height?