*{padding:0;margin:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#e0e0e0}button,select,textarea,input{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}button,select{cursor:pointer}#header{height:70px;display:flex;justify-content:space-around;align-items:center;box-shadow:0 0 2px #ccc;background-color:#e6e6e6;position:relative;z-index:10}#header nav ul{list-style:none;display:flex}#header nav ul button{font-size:15px;border:none;background-color:transparent;padding:5px 10px;border-radius:5px;cursor:pointer}#header nav ul button:hover{background-color:#80ff0050}#header nav ul button.active{background-color:#7fff00}@media (max-width: 550px){#header{flex-direction:column;height:auto;padding:10px}}@media (max-width: 376px){#header nav ul{justify-content:center;flex-wrap:wrap}}#sidebar{padding:20px 10px 10px;box-shadow:0 0 5px gray}#sidebar ul button{width:100%;display:block;border:none;border-radius:5px;padding:10px;text-align:start;background-color:transparent;cursor:pointer}#sidebar ul button:hover{background-color:#80ff0050}#sidebar ul button.active{background-color:#7fff00}#posts{padding:30px}#posts .post-cards{display:flex;justify-content:center;gap:30px;flex-wrap:wrap}@media (max-width: 560px){#posts{padding:30px 0}}@media (max-width: 350px){#posts .post-cards .card{width:96%}}#users{display:grid;grid-template-columns:250px 1fr}@media (max-width: 940px){#users{grid-template-columns:198px 1fr}}@media (max-width: 560px){#users{grid-template-columns:auto}#sidebar ul{display:flex;flex-wrap:wrap;justify-content:space-around}#sidebar ul button{width:max-content;display:inline-block}}#comments{padding:30px}#comments .comment-cards{display:flex;justify-content:center;gap:30px;flex-wrap:wrap}#comments .comment-cards .card{width:300px;padding:30px;border-radius:30px;background:#e0e0e0;box-shadow:20px 20px 60px #bebebe,-20px -20px 60px #fff}@media (max-width: 560px){#comments{padding:30px 0}}@media (max-width: 350px){#comments .comment-cards .card{width:96%}}#albums{padding:30px}#albums .album-cards{display:flex;justify-content:center;gap:30px;flex-wrap:wrap}#albums .album-cards .card{width:300px;padding:30px;border-radius:30px;background:#e0e0e0;box-shadow:20px 20px 60px #bebebe,-20px -20px 60px #fff}#albums .album-cards .card h4{font-weight:600}#albums .album-cards .card h4 span{font-weight:400}@media (max-width: 560px){#albums{padding:30px 0}}@media (max-width: 350px){#albums .album-cards .card{width:96%}}#todos{padding:30px}#todos .todo-cards{display:flex;justify-content:center;gap:30px;flex-wrap:wrap}.card{width:300px;padding:30px;border-radius:30px;background:#e0e0e0;box-shadow:20px 20px 60px #bebebe,-20px -20px 60px #fff}#todos .todo-cards .card h4{font-weight:600}#todos .todo-cards .card h4 span{font-weight:400}.loader{border:6px solid #f3f3f3;border-top:6px solid #7fff00;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:20px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.apiError{font-weight:600;color:red}@media (max-width: 560px){#todos{padding:30px 0}}@media (max-width: 350px){#todos .todo-cards .card{width:96%}}#contact .contact-container{width:80%;height:500px;border-radius:30px;margin:50px auto;display:flex;justify-content:center;align-items:center;gap:50px;background-color:#fff;box-shadow:20px 20px 60px #bebebe,-20px -20px 60px #fff}#contact .contact-container .contact-form{width:50%;height:400px;border-radius:30px}#contact .contact-container .contact-form input,#contact .contact-container .contact-form select,#contact .contact-container .contact-form textarea,#contact .contact-container .contact-form button{border:none;outline:none;font-size:15px;font-weight:700;background-color:#e6e6eea1;border-radius:8px;padding:15px;width:100%}#contact .contact-container .contact-form .input-group{display:flex;gap:20px;margin-bottom:20px}#contact .contact-container .contact-form textarea{resize:none}#contact .contact-container .contact-form .error{padding:10px;font-size:14px;color:red}#contact .contact-container .contact-form button{background-color:#7fff00}#contact .contact-container .contact-info{width:35%;height:400px;border-radius:30px;text-align:center}#contact .contact-container .contact-info .info-card{box-shadow:0 0 2px gray;border-radius:20px;padding:20px;margin-bottom:20px}#contact .contact-container .contact-info .info-card h3{font-weight:700;border-bottom:1px solid #ddd;padding-bottom:5px;margin-bottom:5px}#contact .contact-container .contact-info .info-card p{font-weight:600;color:gray}#contact .contact-container .contact-info>p{font-weight:600;color:gray}#contact .contact-container .contact-info>p span{color:#68cf00}@media (max-width: 1000px){#contact .contact-container{width:90%}}@media (max-width: 850px){#contact .contact-container{flex-direction:column;height:100%;padding:5vw}#contact .contact-container .contact-form{width:100%;height:auto}#contact .contact-container .contact-form textarea{height:100px}#contact .contact-container .contact-info{width:100%;height:auto;display:flex;flex-wrap:wrap;gap:30px}#contact .contact-container .contact-info .info-card{width:45%;margin-bottom:0}}@media (max-width: 670px){#contact .contact-container .contact-info{flex-direction:column;text-align:start}#contact .contact-container .contact-info .info-card{width:100%;padding:0;box-shadow:none}}@media (max-width: 380px){#contact .contact-container .contact-form .input-group{flex-direction:column}#contact .contact-container .contact-form button{padding:10px}}