@font-face {
    font-family: Oswald;
    src: url(/fonts/Oswald-VariableFont_wght.ttf);
    font-display: swap;
}



body{
    padding:0;
    margin:0;
    background-color: rgb(0, 0, 87);
}

nav{
    background-color: rgb(0, 0, 112);
    padding: 0rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    text-align: center;
    display: flex;
    justify-content: space-around;
    position: sticky;
    width: 100%;
    top: 0;
}

nav a{
    text-decoration: none;
    display: inline-block;
    font-size: 1.2rem;
}

nav div{
    background-color: black;
    border-radius: 1rem;
    width: 12rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}


nav div:hover{
    background-color: white;
}

nav div:hover a{
    text-decoration: none;
    animation-name: grow;
    animation-duration: 0.3s;
    transform: scale(1.15);
}

@keyframes grow{
    0%{transform: scale(1);}
    100%{transform: scale(1.15);}
}

#paolo{
    color: white;
    font-family: Oswald, Helvetica, sans-serif;
    transform: scale(2,2);
}


nav div a img{
    width: 4rem;
}

nav div:hover #hem{
    content: url(/webbutveckling/projekt/paolo/paoloswebb2/paobild2/wh.webp);
}

nav div:hover #projekt{
    content: url(/webbutveckling/projekt/paolo/paoloswebb2/paobild2/wp.webp);
}

nav div:hover #paolo{
    color: black;
}

nav div:hover #tekniker{
    content: url(/webbutveckling/projekt/paolo/paoloswebb2/paobild2/wt.webp);
}

nav div:hover #om{
    content: url(/webbutveckling/projekt/paolo/paoloswebb2/paobild2/wo.webp);
}

.bakbild{
    width: 100%;
    height: auto;
}

.arttext{
    text-align: center;
    font-size: 2rem;
    padding: 3rem;
    font-family: Oswald, Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: white;
}

.shh{
    visibility: hidden;
    transform: translateY(-20rem);
}

.projektdelare{
    font-style: italic;
}


@media (max-width: 600px){

    .navicon{
        transform: translateY(0.5rem);
    }

    #paolo{
        transform: scale(1.5,1.5);
    }

    .arttext{
        font-size: 1.5rem;
    }

    #links{
        font-size: 1rem;
    }

    nav div a img{
        width: 3rem;
    }
}