@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;800;900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Mouse+Memoirs&display=swap);.phone-nav{background-color:#000;display:flex;display:none;flex-direction:column;height:65%;opacity:90%;padding:20px;position:absolute;right:0;top:0;transition:all 2s ease-in;width:50%}.phone-nav .close{align-self:flex-end;cursor:pointer;font-size:35px;margin-bottom:20px}.phone-nav nav{align-items:flex-end;display:flex;flex-direction:column;font-size:30px;gap:40px;justify-content:flex-end}.phone-nav a{color:#fff;cursor:pointer;text-decoration:none}.phone-nav a:active,.phone-nav a:hover{color:red;opacity:1px}header{align-items:center;background-color:#000;border-bottom:1px solid #fff;display:flex;height:100px;justify-content:space-between;margin-bottom:20px;padding:0 30px}header .logo{cursor:pointer;height:60px}header .logo img{height:100%}header nav{display:flex;gap:30px}header nav .link{color:#fff;cursor:pointer;text-decoration:none}.home{display:flex;flex-direction:column;gap:20px;padding:25px}.home h1{font-size:30px;font-weight:500}.home nav{align-items:center;display:flex;gap:20px;justify-content:space-between;margin:20px 0}.home nav .searchbar{background-color:#fff;border-radius:30px;width:50%}.home nav .searchbar input{background-color:transparent;border:none;padding:10px 20px;width:100%}.home nav .page{display:flex;gap:20px}.home nav .page .pagination{align-items:center;display:flex;gap:10px}.personnage-grid{display:flex;flex-wrap:wrap;gap:10px;min-height:100vh;width:100%}.personnage-card{color:#fff;cursor:pointer;text-decoration:none;width:calc(25% - 8px)}.personnage-card h2{font-size:16px;margin-bottom:5px;text-align:center}.personnage-card img{height:300px;object-fit:cover;width:100%}.personnage-card:hover{opacity:80%}.character{display:flex;gap:30px;padding:0 30px;width:100vw}.character .left-character{height:600px;width:40%}.character .left-character img{height:100%;object-fit:cover;width:100%}.character .rigth-character{height:600px;width:60%}.character .rigth-character .titles{height:20%}.character .rigth-character .titles .favoris{align-items:center;display:flex;flex-direction:row;justify-content:center;margin-bottom:30px}.character .rigth-character .titles .favoris .icon{cursor:pointer;font-size:30px;height:50px;position:relative;width:50px}.character .rigth-character .titles .favoris .icon img{height:90%;left:-4px;object-fit:contain;position:absolute;width:85%}.character .rigth-character .titles h1{font-weight:600;text-align:center;width:90%}.character .rigth-character .comics{height:80%;width:100%}.character .rigth-character .comics .comic-caroussel{display:flex;flex-wrap:nowrap;gap:10px;height:100%;overflow:hidden;overflow-x:scroll;width:100%}.character .rigth-character .comics .comic-caroussel .comic-card{align-items:center;background-color:#fff;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;padding:10px;position:relative;width:100%}.character .rigth-character .comics .comic-caroussel .comic-card h3{color:#000;font-size:15px;font-weight:600;height:40px;overflow:hidden;white-space:nowrap;width:235px}.character .rigth-character .comics .comic-caroussel .comic-card .image{background-color:blue;height:400px;width:300px}.character .rigth-character .comics .comic-caroussel .comic-card .image img{height:100%;object-fit:cover;width:100%}.charac-description{padding:20px 30px}.comic-card:hover{opacity:40%}.description-card:hover{opacity:1}.comics-page{display:flex;flex-direction:column;gap:20px;min-height:100vh;padding:20px 50px}.comics-page .comics-page-header{display:flex;flex-direction:column;gap:20px;margin-bottom:20px}.comics-page .comics-page-header nav{align-items:center;display:flex;gap:20px;justify-content:space-between;margin:20px 0}.comics-page .comics-page-header nav .searchbar{background-color:#fff;border-radius:30px;width:50%}.comics-page .comics-page-header nav .searchbar input{background-color:transparent;border:none;padding:10px 20px;width:100%}.comics-page .comics-page-header nav .page{display:flex;gap:20px}.comics-page .comics-page-header nav .page .pagination{align-items:center;display:flex;gap:10px}.comics-page .comics-card{background-color:#fff;border-radius:10px;display:flex;gap:30px;padding:10px 30px;position:relative;width:100%}.comics-page .comics-card .flex{display:flex;justify-content:space-between}.comics-page .comics-card .icon{color:#000;cursor:pointer;font-size:35px;height:50px;position:relative;width:50px}.comics-page .comics-card .icon img{height:80%;object-fit:cover;position:absolute;right:11px;top:8px;width:80%}.comics-page .comics-card .image{height:200px;width:150px}.comics-page .comics-card .image img{height:100%;object-fit:contain;width:100%}.comics-page .comics-card .description{color:#000;display:flex;flex:1 1;flex-direction:column;gap:10px;padding-top:10px}.signup{align-items:center;display:flex;flex-direction:column;justify-content:center;width:100%}.signup h1{background-color:red;font-family:Mouse Memoirs,sans-serif;font-size:55px;line-height:30px;margin-top:20px;padding:10px 5px;text-transform:uppercase}.signup .signup-container{align-items:center;display:flex;flex-direction:column;height:450px;margin-top:30px;width:50%}.signup .signup-container form{background-color:#fff;border-radius:5px;display:flex;flex-direction:column;height:100%;justify-content:space-between;padding:30px 20px;position:relative;width:100%}.signup .signup-container form .elements{display:flex;flex-direction:column;gap:20px}.signup .signup-container form .input-wrap{display:flex}.signup .signup-container form input{border:1px solid #d3d3d3;border-radius:5px;flex:1 1;padding:10px}.signup .signup-container form #addPicture{display:none}.signup .signup-container form .add-picture{align-items:center;border:1px solid #d3d3d3;border-radius:5px;color:red;cursor:pointer;display:flex;flex:1 1;font-size:14px;font-weight:500;justify-content:center;padding:10px}.signup .signup-container form .add-picture span{margin-right:20px}.signup .signup-container form input::-webkit-input-placeholder{color:#d3d3d3}.signup .signup-container form input::placeholder{color:#d3d3d3}.signup .signup-container form h3{color:#000;font-size:30px;font-weight:600;width:300px}.signup .signup-container form .btn-container{display:flex}.signup .signup-container form .hidden{width:300px}.signup .signup-container form button{align-self:flex-end;background-color:red;border:none;border-radius:10px;color:#fff;cursor:pointer;flex:1 1;font-family:Mouse Memoirs,sans-serif;font-size:30px;font-weight:500;height:50px;width:30%}.signup .signup-container form .preview{bottom:20px;height:150px;left:20px;position:absolute;width:150px}.signup .signup-container form .preview img{border:2px solid #000;border-radius:50%;height:100%;object-fit:cover;width:100%}.login{align-items:center;display:flex;flex-direction:column;justify-content:center;width:100%}.login h1{background-color:red;font-family:Mouse Memoirs,sans-serif;font-size:55px;line-height:30px;margin-top:20px;padding:10px 5px;text-transform:uppercase}.login .signup-container{align-items:center;display:flex;flex-direction:column;height:300px;margin-top:30px;width:48%}.login .signup-container form{background-color:#fff;border-radius:5px;display:flex;flex-direction:column;height:100%;justify-content:space-between;padding:30px 20px;position:relative;width:100%}.login .signup-container form .elements{display:flex;flex-direction:column;gap:20px}.login .signup-container form .input-wrap{display:flex}.login .signup-container form input{border:1px solid #989393;border-radius:5px;flex:1 1;padding:10px}.login .signup-container form input::-webkit-input-placeholder{color:#d3d3d3}.login .signup-container form input::placeholder{color:#d3d3d3}.login .signup-container form h3{color:#000;font-size:30px;font-weight:600;width:300px}.login .signup-container form .btn-container{display:flex}.login .signup-container form .hidden{width:300px}.login .signup-container form button{align-self:flex-end;background-color:red;border:none;border-radius:10px;color:#fff;cursor:pointer;flex:1 1;font-family:Mouse Memoirs,sans-serif;font-size:15px;font-size:30px;font-weight:500;height:50px;width:30%}.login .signup-container form .preview{bottom:20px;height:150px;left:20px;position:absolute;width:150px}.login .signup-container form .preview img{border:2px solid #000;border-radius:50%;height:100%;object-fit:cover;width:100%}.profil nav{align-items:center;display:flex;height:50px;justify-content:space-between;padding:0 30px}.profil nav h1{font-size:35px}.profil nav h1 span{text-transform:capitalize}.profil nav button{background-color:#ed171e;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:16px;padding:8px 10px}.profil .profil-wrapper{display:flex;gap:20px;padding:30px}.profil .profil-wrapper .left-container{color:#000;display:flex;flex-direction:column;gap:20px;min-height:60%;width:50%}.profil .profil-wrapper .left-container .favorites{align-items:center;background-color:#fff;border-radius:10px;display:flex;flex-direction:column;gap:20px;justify-content:center;min-height:200px;padding:20px 10px}.profil .profil-wrapper .left-container .fav-container{display:flex;flex-wrap:wrap;gap:20px;height:100%;width:100%}.profil .profil-wrapper .left-container .fav-container .favChar-card{align-items:center;display:flex;flex-direction:column;gap:5px;width:calc(15% + 13px)}.profil .profil-wrapper .left-container .fav-container h1{color:#000;font-size:12px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;width:90px}.profil .profil-wrapper .left-container .fav-container .image{cursor:pointer;height:100px;width:100px}.profil .profil-wrapper .left-container .fav-container .image img{border-radius:50%;height:100%;object-fit:cover;width:100%}.profil .profil-wrapper .left-container img:hover{opacity:80%}.profil .profil-wrapper .right-container{background-color:#fff;border-radius:10px;min-height:60%;padding:20px 10px;width:50%}.profil .profil-wrapper .right-container h1{color:#000;margin-bottom:20px;text-align:center}.profil .profil-wrapper .right-container .avatar-flex{align-items:center;display:flex;justify-content:center}.profil .profil-wrapper .right-container .avatar{background-color:red;height:200px;width:200px}.profil .profil-wrapper .right-container .avatar img{height:100%;object-fit:cover;width:100%}.profil .profil-wrapper .right-container .info-container{background-color:#ededed;border-radius:10px;margin-top:20px;padding:5px 10px;width:70%}.profil .profil-wrapper .right-container .info-container .title{color:#000;font-size:20px}.profil .profil-wrapper .right-container .info-container .dynamic{color:#000;font-size:15px}.profil .profil-wrapper .right-container .info-container .pseudo{text-transform:capitalize}.profil .profil-wrapper .right-container button{background-color:#000;border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:20px;margin-top:50px;padding:10px}.profil .profil-wrapper .right-container .flex-container{align-items:center;display:flex;flex-direction:column;justify-content:center}*{box-sizing:border-box;font-family:Poppins,sans-serif;font-weight:400;margin:0;padding:0}input:focus{outline:none}body{background-color:hsla(0,3%,6%,.957);color:#fff}.wrapper{margin:0 auto;max-width:1400px}.nav-phone{display:none}.show{display:block}.hidden{display:none}@media(max-width:1000px){.personnage-card{width:calc(33% - 5px)}}@media(max-width:900px){.home{gap:10px;padding:10px 25px}.home h1{font-size:25px}.home nav{align-items:flex-start;flex-direction:column;gap:15px;justify-content:space-between;margin:20px 0}.home nav .searchbar{height:30px}.home nav .searchbar input{height:100%}.home nav .page button{height:20px;width:20px}.home nav .page p{font-size:13px}.comics-page-header nav{align-items:flex-start;flex-direction:column;gap:15px;justify-content:space-between;margin:20px 0}.comics-page-header nav .searchbar{height:30px}.comics-page-header nav .searchbar input{height:100%}.comics-page-header nav .page button{height:20px;width:20px}.comics-page-header nav .page p{font-size:13px}}@media(max-width:680px){.personnage-card{width:calc(50% - 5px)}.home h1{text-align:center}header nav{display:none}header .nav-phone{color:#fff;cursor:pointer;display:block;font-size:30px}}@media(max-width:680px)and (max-width:560px){.personnage-card{width:calc(100% - 5px)}}
/*# sourceMappingURL=main.8a6032f6.css.map*/