:root{
    /*global variables*/
}

body{
    margin: 0px;
    float: left;
}

.navbar{
    height: 100vh;
    display: flex;
    align-items: center;
}
.menuItem{
    color: rgb(171, 2, 2);
    font-size: clamp(2rem, 4vw, 4rem);
    font-family:serif;
    display: block;
    text-decoration: none;
    padding: clamp(0.25rem, 0,5vw, 1rem) 0rem;
    transition: all 400ms ease;
    z-index: 2;
}
.menubar{
  /*
  margin-left: clamp(0.2rem, 20vw, 4rem);
  */
}

/*maalataan kaikki kohdat läpinäkyväksi*/
.menubar:hover > .menuItem {
    opacity: 0.3;
}
/*ylläolevan override valitun kohdan osalta*/
.menubar:hover > .menuItem:hover{
    opacity: 1;
}

#background-logo{
    height: 100vh;
    width: 100vh;
    background-image: url(img/logo.svg);
    background-position: 0% 10%;
    background-size: 12vmin;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 5%;
    z-index: -1;
    transition: all 800ms ease;
}
.menubar:hover ~ #background-logo{
    background-size: 11vmin;
    opacity: 3%;
}

.menubar[index="0"] + #background-logo{
    background-position: 0% -25%;
}
.menubar[index="1"] + #background-logo{
    background-position: 0% -50%;
}
.menubar[index="2"] + #background-logo{
    background-position: 0% -75%;
}
.menubar[index="3"] + #background-logo{
    background-position: 0% -100%;
}
.menubar[index="4"] + #background-logo{
    background-position: 0% -125%;
}
.menubar[index="5"] + #background-logo{
    background-position: 0% -150%;
}
/*.active{
    size: 50vh;
    color: blue;
}*/
.card{
    
}