*,::after,::before{padding:0;margin:0;box-sizing:border-box;list-style:none}body{font-family:"Nunito",sans-serif;background-image:linear-gradient(to right bottom, #fbdb89, #f48982);background-repeat:no-repeat;background-size:cover}a{text-decoration:none}.clickable{cursor:pointer}.heading{display:none}.container{width:60%;margin:auto;background-color:#f9f5f3;height:100vh}.logo-font{font-family:"Comforter",cursive;letter-spacing:.3rem;font-size:2rem;color:#655a56}.text-primary{color:#f48982}nav{display:flex;justify-content:space-evenly;align-items:center;flex-wrap:wrap;padding:2rem}nav .logo-container{display:flex;justify-content:left;align-items:center;padding:1rem;gap:1rem}nav .logo-container .logo__img{height:4rem;width:4rem;border:2px solid #655a56;border-radius:50%}nav .logo-container .logo__img svg{margin:1rem 1rem}nav .navigation{display:flex;justify-content:center;align-items:center;flex-wrap:wrap}nav .navigation>ul{list-style:none;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4rem}nav .navigation>ul>li{color:#655a56;font-size:1.3rem}.cards{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:2rem}.cards .card{max-width:18rem;border-radius:5px;display:flex;flex-direction:column;align-items:center;border:1px solid #655a56;padding:1rem}.cards .card .card-image>img{overflow:hidden;object-fit:cover;width:15rem}.cards .card .card-text{display:flex;width:100%;justify-content:space-between;color:#f59a83;font-size:1.2rem}.cards .card .card-text .card__title{margin-top:1.5rem}.cards .card .card-text .like-btn{display:flex;flex-direction:column;align-items:flex-start;margin-top:1rem}.cards .card .likes{width:100%;display:flex;color:#f59a83;justify-content:flex-end}.cards .card .btn-container{width:100%;margin:1rem 0}.cards .card .btn-container .btn{padding:1rem;text-align:center;color:#f9f5f3;border-radius:5px;width:100%;background-color:#968b87;box-shadow:2px 2px 2px #655a56}.cards .card .btn-container .btn:hover{background-color:#655a56;cursor:pointer}.comments-popup{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:60%;margin:.4rem auto;display:none;transition:1s;height:100%;overflow-y:scroll}.comments-popup .recipe{position:relative;border:1px solid #655a56;border-radius:.4rem;display:flex;justify-content:center;align-items:center;flex-direction:column}.comments-popup .recipe .close-btn{position:absolute;right:1rem;top:.4rem;background:none;font-size:2rem;font-weight:700;border:none;color:#655a56}.comments-popup .recipe__image{margin-top:1.6rem}.comments-popup .recipe__text{margin:1rem 0;width:80%}.comments-popup .recipe__text h2{text-align:center;color:#655a56;margin-bottom:.5rem}.comments-popup .recipe__text .details{display:flex;justify-content:space-between;align-items:center;color:#655a56;text-align:justify}.comments-popup .recipe .comments{width:70%;color:#655a56}.comments-popup .recipe .comments__title{text-align:center;color:#655a56}.comments-popup .recipe .comments .comments-list{margin:10px auto;padding-left:1.3rem}.comments-popup .recipe .comments .comments-list .comment-item .username{text-transform:capitalize;font-weight:bolder}.comments-popup .recipe .comments .comments-list .comment-item .comment-msg{font-style:italic}.comments-popup .recipe .add-comment{display:flex;justify-content:center;align-items:center;flex-direction:column}.comments-popup .recipe .add-comment h2{color:#655a56;padding:.4rem 0 1rem}.comments-popup .recipe .add-comment .new-comment{width:100%}.comments-popup .recipe .add-comment .new-comment .form{width:100%;display:flex;justify-content:space-between;align-items:center;flex-direction:column}.comments-popup .recipe .add-comment .new-comment .form .input-name,.comments-popup .recipe .add-comment .new-comment .form textarea{width:100%;padding:.4rem;font-size:1rem;color:#655a56;margin-bottom:.5rem}.comments-popup .recipe .add-comment .new-comment .form .add-comment-btn{padding:1rem;font-size:1rem;text-align:center;color:#f9f5f3;border-radius:5px;width:100%;background-color:#968b87;box-shadow:2px 2px 2px #655a56;margin-bottom:1rem}.loader{margin:auto;text-align:center}.loader>svg{transform-origin:50% 50%;animation:rotate 1.5s infinite linear}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.pagination-container{width:79%;display:flex;justify-content:flex-end;margin:auto;padding:1rem;gap:80%}.pagination-container .pagination{background-image:linear-gradient(to right bottom, #fbdb89, #f48982);background-repeat:no-repeat;background-size:cover;border:none;color:#f9f5f3;padding:.5rem;border-radius:50px;width:6rem;display:flex;justify-content:space-around;align-items:center;cursor:pointer}.pagination-container .pagination:hover{background-image:linear-gradient(to right bottom, #fbda85, #f4857e)}.footer{margin-top:2rem;width:100%}.footer .footer-container{border-top:1px solid #655a56;color:#655a56;padding:1rem 0;font-size:1.15rem}.footer .footer-container .footer__text{text-align:right;padding-right:.95rem}.footer .footer-container .footer__text .creator{font-weight:700;color:#655a56}.footer .footer-container .footer__text .creator:hover{font-size:1.18rem}