.header{
    top: 0;
    background-color: rgba(13, 42, 42, 0.7);
    position: fixed;
    width: 100%;
    height: 90px;    
    z-index: 110;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-row: 1fr;
    backdrop-filter: blur(7px);
    display: flex;
    align-items: center;
    justify-content: space-around;
}

#header-name{
    display: none;
    color: rgb(48, 172, 200);
    font-size: clamp(10px, 5vw, 70px);
    cursor: default;
    z-index: 10;
    font-family: "Jersey 10", sans-serif;
    transition: all 0.3s;
}

#header-name:hover{
    cursor: pointer;
    color: rgb(68, 150, 168);
}

.header-button-projekt, .header-button-om-mig, .header-button-ta-kontakt{
    background-color: rgb(38, 192, 226);
    width: 18vw;
    height: clamp(45px, 100%, 4.5vw);
    border: none;
    border-radius: 3vh;
    font-size: clamp(1vw, 2.5vw, 12vw);
    cursor: pointer;
    transition: all 0.2s;
    font-family: "Jersey 10", sans-serif;
} 
.header-button-projekt:hover, .header-button-om-mig:hover, .header-button-ta-kontakt:hover{
    background-color: rgb(35, 134, 156);
}

@media (max-width: 400px) {
    #header-name{
    display: none;
}
    .header-button-projekt, .header-button-om-mig, .header-button-ta-kontakt{
    background-color: rgb(38, 192, 226);
    width: 30vw;
    height: 15vw;
    border: none;
    border-radius: 3vh;
    font-size: 5vw;
} 

}