* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'Stussy Script Regular';
    src: url('/fonts/StussyScript-Regular.woff2') format('woff2'),
        url('/fonts/StussyScript-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Ink Free';
    src: url('/fonts/Inkfree.woff2') format('woff2'),
        url('/fonts/InkFree.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




body {
    font-family: Ink Free;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    display: flex;
    width: 200px;
}

.nav-links {
    list-style-type: none;
    display: flex;
    padding-right: 20px;
}

.nav-links li {
    margin-left: 45px;
}

.nav-links a {
    color: #000;
    text-decoration: none;
    font-size: 35px;
}

.nav-links a:hover {
    color: #0083d4;
}

h1 {
    text-align: center;
    font-size: 55px;
    font-family: 'Stussy Script Regular';
    font-weight: lighter;
}


#imgcontainer {
    width: 1200px;
    height: 600px;
    background-size: 1200px;
    max-width: 1500px;
    background-image: url('../medias/etagere.jpg');
    position: relative;
    margin: 0 auto;
    background-repeat: no-repeat;
}

.boite1 img {
    width: 230px;
    position: absolute;
    top: 100px;
    left: 390px;
    transition: transform 400ms;
}

.boite1 img:hover {
    transform: scale(1.2);
}

.boite2 img {
    width: 230px;
    position: absolute;
    top: 100px;
    left: 575px;
    transition: transform 400ms;
}

.boite2 img:hover {
    transform: scale(1.2);
}

.boite3 img {
    width: 230px;
    position: absolute;
    top: 100px;
    left: 760px;
    transition: transform 400ms;
}

.boite3 img:hover {
    transform: scale(1.2);
}

.boite4 img {
    width: 230px;
    position: absolute;
    top: 365px;
    left: 200px;
    transition: transform 400ms;
}

.boite4 img:hover {
    transform: scale(1.2);
}

.boite5 img {
    width: 230px;
    position: absolute;
    top: 365px;
    left: 385px;
    transition: transform 400ms;
}

.boite5 img:hover {
    transform: scale(1.2);
}

.boite6 img {
    width: 230px;
    position: absolute;
    top: 365px;
    left: 570px;
    transition: transform 400ms;
}

.boite6 img:hover {
    transform: scale(1.2);
}

.flèche2 img{
    width: 100px;
    position: absolute;
    top: 100px;
    left: 970px;
}

.clique {
    font-size: 15px;
    font-family: 'Ink Free';
    font-weight: lighter;
    position: absolute;
    top: 60px;
    left: 1000px;
    transform: rotate(5deg);
}

#quisuis-je {
    background-image: url('../medias/matete.png');
    width: 1100px;
    position: relative;
    margin-right: 10px;
    height: 1000px;
    background-size: 1200px;
    max-width: 1200px;
    background-repeat: no-repeat;
}

h2 {
    font-size: 70px;
    position: relative;
    top: 150px;
    left: 1200px;
    max-width: 400px;
    overflow: hidden;
}

p {
    font-size: 38px;
    font-family: 'Ink Free';
}

.paragraphe1 {
    position: absolute;
    top: 90px;
    left: 550px;
    transform: rotate(-15deg);
}

.paragraphe2 {
    position: absolute;
    top: 300px;
    left: 620px;
    transform: rotate(-15deg);
}

.paragraphe3 {
    position: absolute;
    top: 560px;
    left: 680px;
    transform: rotate(-15deg);
}

.fleche img {
    position: absolute;
    width: 150px;
    top: 630px;
    left: 550px;
}

.button {
    font-family: 'Stussy Script Regular';
    font-size: 40px;
    color: #000000;
    text-decoration: none;
    position: absolute;
    top: 750px;
    left: 220px;
    transform: rotate(-15deg);
}

.button:hover {
    color: #fd68c6;
}


.compétences {
    font-size: 70px;
    position: relative;
    top: 100px;
    left: 100px;
    max-width: 600px;
    overflow: hidden;
}

#compétences .audiovisuel {
    background-image: url('../medias/audiovisuel.png');
    width: 1100px;
    position: relative;
    margin-right: 10px;
    height: 1000px;
    background-size: 750px;
    max-width: 1100px;
    background-repeat: no-repeat;
    top: 170px;
    left: 100px;
}

.premiere {
    position: absolute;
    display: inline-block;
    top: 100px;
    left: 150px;
}

.premiere img {
    position: absolute;
    width: 200px;
    transition: transform 0.6s linear;
    z-index: 10;
}

.premiere:hover img {
    transform: rotate(360deg);
}

.capcut {
    position: absolute;
    display: inline-block;
    top: 95px;
    left: 430px;
}

.capcut img {
    position: absolute;
    width: 210px;
    transition: transform 0.5s linear;
    z-index: 10;
}

.capcut:hover img {
    transform: rotate(360deg);
}


.audiovisuel .audio {
    font-family: 'Stussy Script Regular';
    font-weight: lighter;
    position: absolute;
    font-size: 60px;
    top: -30px;
    left: 100px;
    transform: rotate(-2deg);
}

#compétences .graphisme {
    background-image: url('../medias/graphisme.png');
    width: 1500px;
    position: relative;
    margin-right: 10px;
    height: 1300px;
    background-size: 1500px;
    max-width: 1500px;
    background-repeat: no-repeat;
    top: -570px;
    left: 130px;
    z-index: 10;
}

.photoshop {
    position: absolute;
    display: inline-block;
    top: 370px;
    left: 120px;
    transform: rotate(-10deg);
}

.photoshop img {
    position: absolute;
    width: 180px;
    transition: transform 0.6s linear;
    z-index: 10;
}

.photoshop:hover img {
    transform: rotate(360deg);
}

.illustrator {
    position: absolute;
    display: inline-block;
    top: 325px;
    left: 360px;
    transform: rotate(-10deg);
}

.illustrator img {
    position: absolute;
    width: 180px;
    transition: transform 0.5s linear;
    z-index: 10;
}

.illustrator:hover img {
    transform: rotate(360deg);
}

.indesign {
    position: absolute;
    display: inline-block;
    top: 280px;
    left: 600px;
    transform: rotate(-10deg);
}

.indesign img {
    position: absolute;
    width: 180px;
    transition: transform 0.5s linear;
    z-index: 10;
}

.indesign:hover img {
    transform: rotate(360deg);
}

.figma {
    position: absolute;
    display: inline-block;
    top: 215px;
    left: 780px;
    transform: rotate(-10deg);
    z-index: 15;
}

.figma img {
    position: absolute;
    width: 290px;
    transition: transform 0.5s linear;
}

.figma:hover img {
    transform: rotate(360deg);
}

.after {
    position: absolute;
    display: inline-block;
    top: 190px;
    left: 1090px;
    transform: rotate(-10deg);
    z-index: 15;
}

.after img {
    position: absolute;
    width: 180px;
    transition: transform 0.5s linear;
}

.after:hover img {
    transform: rotate(360deg);
}

.graphisme .graph {
    font-family: 'Stussy Script Regular';
    font-weight: lighter;
    position: absolute;
    font-size: 60px;
    top: 100px;
    left: 550px;
    transform: rotate(-12deg);
}

#compétences .web {
    background-image: url('../medias/web.png');
    width: 1000px;
    position: relative;
    height: 1100px;
    background-size: 500px;
    max-width: 600px;
    background-repeat: no-repeat;
    margin-top: -2250px;
    left: 1000px;
    z-index: 5;
}

.VSCode {
    position: absolute;
    display: inline-block;
    top: 140px;
    left: 130px;
    transform: rotate(-5deg);
}

.VSCode img {
    position: absolute;
    width: 200px;
    transition: transform 0.6s linear;
    z-index: 10;
}

.VSCode:hover img {
    transform: rotate(360deg);
}

.web .Web {
    font-family: 'Stussy Script Regular';
    font-weight: lighter;
    position: absolute;
    font-size: 60px;
    top: -20px;
    left: 200px;
    transform: rotate(-12deg);
}


#contact .contactermoi{
    background-image: url('../medias/surligneur.png');
    width: 1200px;
    position: relative;
    height: 600px;
    background-size: 1200px;
    max-width: 1200px;
    background-repeat: no-repeat;
    top: 300px;
    left: 130px;
}

.contactermoi {
    font-size: 150px;
    position: absolute;
    text-align: center;
    top: 300px;
    left: 250px;
    max-width: 1200px;
    overflow: hidden;
}

.linkedin img{
    width: 155px;
    position: relative;
    top: -500px;
    left: 680px;
    display: inline-block; 
}

.bulles1 {
    position: relative;
    display: inline-block;
    top: -700px;
    left: 900px;
}

.bulles1 img {
    position: relative;
    width: 500px;
}

.bulles2 {
    position: relative;
    display: inline-block;
    top: -220px;
    left: 450px;
    transform: rotate(-20deg);
}

.bulles2 img {
    position: relative;
    width: 600px;
}

.bulles3 {
    position: relative;
    display: inline-block;
    top: -300px;
    left: -550px;
}

.bulles3 img {
    position: relative;
    width: 400px;
}

p {
    font-family: 'Ink Free';
}

.telephone {
    position: absolute;
    font-size: 45px;
    top: 3280px;
    left: 950px;
    transform: rotate(-3deg);
}

.mail{
    position: absolute;
    font-size: 50px;
    top: 3775px;
    left: 1030px;
    transform: rotate(-20deg);
}

.copyright{
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    margin-top: -80px;
}


.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #333;
    color: white;
    font-size: 24px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
}


.scroll-to-top:hover {
    background-color: #6b6b6b;
    transform: scale(1.1);
}


@media (min-height: 800px) {
    .scroll-to-top {
        opacity: 1;
    }
}


/* @media screen and (max-width: 768px) {
    h1 {
        font-size: 3.5vw;
    }

    .logo img {
        width: 17vw;
    }

    .imgcontainer {
        width: 90%;
    }

    .imgcontainer img {
        width: 12vw;
    }

    .boite1 {
        top: 13vh;
        left: 23vw;
    }

    .boite2 {
        top: 13vh;
        left: 34vw;
    }

    .boite3 {
        top: 13vh;
        left: 45vw;
    }

    .boite4 {
        top: 43vh;
        left: 12vw;
    }

    .boite5 {
        top: 43vh;
        left: 23vw;
    }

    .boite6 {
        top: 43vh;
        left: 34vw;
    }
}


@media screen and (max-width: 480px) {
    h1 {
        font-size: 4vw;
    }

    .logo img {
        width: 12vw;
    }

    .imgcontainer img {
        width: 12vw;
    }

    .boite1 {
        top: 13vh;
        left: 23vw;
    }

    .boite2 {
        top: 13vh;
        left: 34vw;
    }

    .boite3 {
        top: 13vh;
        left: 45vw;
    }

    .boite4 {
        top: 43vh;
        left: 12vw;
    }

    .boite5 {
        top: 43vh;
        left: 23vw;
    }

    .boite6 {
        top: 43vh;
        left: 34vw;
    }
}*/