@import"https://fonts.googleapis.com/css2?family=Parisienne&display=swap";*{padding:0;margin:0;box-sizing:border-box}body{font-family:sans-serif}section{display:flex}.marge{width:150px;writing-mode:vertical-lr;text-orientation:unset;transform:rotate(180deg) translate(150px);text-align:right;padding-bottom:100px;font-size:50px;font-weight:900;border-left:3px solid black;padding-left:10px;background-color:#fff;transition:.5s ease-out;z-index:90}.marge p span{color:#f1960e}.cv{width:100%;width:1200px;margin:0 auto;overflow:hidden}.header-container{height:700px;margin:0 auto;width:100%}.header{display:flex;flex-direction:row;align-items:end;justify-content:center;margin-top:80px;margin-left:50px;height:270px;overflow:hidden;min-width:870px;position:relative}.rideau-haut{position:absolute;width:100vw;height:100vh;background-color:#fff;z-index:70;transform:translate(0);animation-name:rideau;-webkit-animation-name:rideau;animation-duration:1s;-webkit-animation-duration:1s;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;animation-delay:.5s;-webkit-animation-delay:.5s}@keyframes rideau{0%{transform:translate(0);opacity:1}99%{opacity:1;transform:translate(100vw)}to{opacity:0;z-index:-100;display:none}}figure{z-index:3}.circle{position:absolute;width:160px;height:160px;border-radius:50%;display:flex;justify-content:center;align-items:center;top:400px;left:200px;transition:1s ease-in-out;animation:logoquitourne 30s linear infinite}.circle .text{position:absolute;width:100%;height:100%}.circle .text span{position:absolute;left:50%;transform-origin:0 80px}@keyframes logoquitourne{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.relative{position:relative}.sun{position:absolute;width:290px;height:290px;border-radius:50%;background-color:#ef9e08;transform:translate(380px,-100px);z-index:1}#itsme{position:absolute;transform:translate(310px,-160px);font-family:Parisienne,cursive;font-size:25px}.itsme{position:absolute;width:200px;transform:translate(230px,-130px)}.absolute{position:absolute;padding:20px;border-radius:10px;opacity:0;transform-origin:0;transform:rotate(30deg);font-size:1rem}.reveal{animation:reveal .6s forwards}@keyframes reveal{0%{opacity:0}to{transform:rotate(0);opacity:1}}.header h2{margin-bottom:50px;margin-right:30px;font-size:30px}h2 span{padding:0;margin:0;transition:.2s;cursor:pointer}h2 span:hover{color:#ef8411}.accroche{width:400px;color:gray;font-style:italic;transform:translate(-150px,-280px);padding-left:20px}.bg-grey{width:100vw;height:3px;position:absolute;left:0;transform:translateY(-px);z-index:11;background-color:#131313}.petite-boule{width:20px;height:20px;background-color:orange;border-radius:50%;transition:.2s ease-out;transform:translate(200px,-50%);z-index:11}.page-blanche{position:absolute;width:100vw;height:800px;background-color:#fff;z-index:10;animation:page-reveal 2s forwards ease-in-out;animation-delay:2s}@keyframes page-reveal{50%{transform:translate(100%)}to{transform:translate(200%);display:none}}.skill{padding-top:100px}.skill h2{margin-bottom:30px;text-align:right}.skill p,.work p{padding-bottom:10px}.hover-me{width:200px;height:100px;position:absolute;transform:translate(130px,180px)}.fleche{position:absolute;width:100px;transform:translate(270px,250px)}.fleche img{width:300px}.hover-me p{font-size:20px;font-weight:900}.skills{width:370px;position:absolute;right:50%;transform:translate(100%)}.skill-flex{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.skill-flex p{margin-right:50px;padding:0}.adobe-jauge,.figma-jauge,.photoshop-jauge,.html-jauge,.css-jauge,.javascript-jauge{width:200px;height:10px;background-color:#e3e3e3;border-radius:10px}.php-jauge{width:200px;height:10px;background-color:#e3e3e3;border-radius:10px;transition:.1s linear}.level{height:10px;border-radius:10px;width:0%;transition:1s ease-in-out}.adobe{background-color:orange;width:30%}.figma{background-color:orange;width:60%}.photoshop{background-color:orange;width:30%}.html{background-color:orange;width:95%}.css{background-color:orange;width:85%}.javascript{background-color:orange;width:70%}.php{background-color:orange;width:60%}main{display:flex;justify-content:center;margin-top:100px;margin-bottom:100px;perspective:1000px;transform:translateY(80px)}.work{padding-top:50px}.card{width:100px;height:300px;padding:10px;border:1px solid grey;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:.3s;margin:10px;border-radius:5px;overflow:hidden;position:relative;cursor:pointer}.card h2{font-size:1em;color:#656565;text-decoration:underline}.card h3{writing-mode:vertical-lr;text-orientation:upright;text-align:center;position:absolute;left:10px;font-size:120px;bottom:0;color:#e7c194}.card .big{font-weight:900;font-size:300px;position:absolute;color:#fad08d21;z-index:-1;top:0;left:0}.active{width:300px;transform:rotate(0);writing-mode:horizontal-tb;border:2px solid orange;background:#fff1;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 5px 15px 1px #febd4358}.active h2{font-size:30px;margin-bottom:50px;writing-mode:horizontal-tb;text-orientation:unset;color:#ee8d26}.active p{font-weight:900;color:gray;padding:10px;z-index:-1}.undisplay{display:none}.bandeau{position:absolute;left:0;width:100vw;height:90px;font-size:60px;padding:5px 0;border-top:3px solid black;border-bottom:3px solid black;text-wrap:nowrap;overflow:hidden}.bandeau p{animation:bandeau 60s linear infinite}@keyframes bandeau{to{transform:translate(-200%)}}@media screen and (max-width: 980px){.header{margin:10px 10px 0;justify-content:flex-start}.relative{transform:translate(150px,30px);margin-right:100px}.accroche{transform:translate(-100px,-200px)}.absolute{font-size:14px;width:350px}.itsme{transform:scale(.8) translate(300px,-100px)}#itsme{transform:translate(280px,-100px);font-size:19px}.header img{width:140px}.sun{width:150px;height:150px;transform:translate(350px,-60px)}}