@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");.container{display:flex;flex-wrap:wrap;justify-content:center;max-width:1200px;margin-block:2rem;gap:2rem}img{max-width:100%;display:block;object-fit:fill}.card{width:clamp(20rem,calc(20rem + 2vw),22rem);overflow:hidden;box-shadow:0 .1rem 1rem rgba(0,0,0,.1);border-radius:1em;background:#ece9e6;background:linear-gradient(90deg,#fff,#ece9e6)}.card,.card__body{display:flex;flex-direction:column}.card__body{padding:1rem;gap:.5rem}.tag{align-self:flex-start;padding:.25em .75em;border-radius:1em;font-size:.75rem}.tag+.tag{margin-left:.5em}.tag-blue{background:#56ccf2;background:linear-gradient(180deg,#2f80ed,#56ccf2);color:#fafafa}.tag-brown{background:#d1913c;background:linear-gradient(180deg,#ffd194,#d1913c);color:#fafafa}.tag-red{background:#cb2d3e;background:linear-gradient(180deg,#ef473a,#cb2d3e);color:#fafafa}.card__body h4{font-size:1.5rem;text-transform:capitalize}.card__footer{display:flex;padding:1rem;margin-top:auto}.user{display:flex;gap:.5rem}.user__image{border-radius:50%}.user__info>small{color:#666}*{box-sizing:border-box}.blog-card{display:flex;flex-direction:column;box-shadow:0 3px 7px -1px rgba(0,0,0,.1);margin:1rem auto 1.6%;background:#fff;line-height:1.4;border-radius:5px;overflow:hidden;z-index:0}.blog-card a{color:inherit}.blog-card a:hover{color:#3b70fc}.blog-card:hover .photo{transform:scale(1.3) rotate(3deg)}.blog-card .meta{position:relative;z-index:0;height:200px}.blog-card .photo{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:50%;transition:transform .2s}.blog-card .details,.blog-card .details ul{margin:auto;padding:0;list-style:none}.blog-card .details{position:absolute;top:0;bottom:0;left:-100%;margin:auto;transition:left .2s;background:rgba(0,0,0,.6);color:#fff;padding:10px;width:100%;font-size:.9rem}.blog-card .details a{text-decoration:dotted underline}.blog-card .details ul li{display:inline-block}.blog-card .details .author:before{font-family:FontAwesome;margin-right:10px;content:"\f007"}.blog-card .details .date:before{font-family:FontAwesome;margin-right:10px;content:"\f133"}.blog-card .details .tags ul:before{font-family:FontAwesome;content:"\f02b";margin-right:10px}.blog-card .details .tags li{margin-right:2px}.blog-card .details .tags li:first-child{margin-left:-4px}.blog-card .description{padding:1rem;background:#fff;position:relative;z-index:1}.blog-card .description h1{line-height:1;margin:0;font-size:1.7rem}.blog-card .description h2{font-size:1rem;font-weight:300;text-transform:uppercase;color:#a2a2a2;margin-top:5px}.blog-card .description .read-more{text-align:right}.blog-card .description .read-more a{color:#3b70fc;display:inline-block;position:relative}.blog-card .description .read-more a:after{content:"\f061";font-family:FontAwesome;margin-left:-10px;opacity:0;vertical-align:middle;transition:margin .3s,opacity .3s}.blog-card .description .read-more a:hover:after{margin-left:5px;opacity:1}.blog-card p{position:relative;margin:1rem 0 0}.blog-card p:first-of-type{margin-top:1.25rem}.blog-card p:first-of-type:before{content:"";position:absolute;height:5px;background:#3b70fc;width:35px;top:-.75rem;border-radius:3px}.blog-card:hover .details{left:0}@media (min-width:640px){.blog-card{flex-direction:row;max-width:700px}.blog-card .meta{flex-basis:40%;height:auto}.blog-card .description{flex-basis:60%}.blog-content a{color:#3b82f6;text-decoration:underline}.blog-card .description:before{transform:skewX(-3deg);content:"";background:#fff;width:30px;position:absolute;left:-10px;top:0;bottom:0;z-index:-1}.blog-card.alt{flex-direction:row-reverse}.blog-card.alt .description:before{left:inherit;right:-10px;transform:skew(3deg)}.blog-card.alt .details{padding-left:25px}}.blog-details-container{width:100%;display:flex;justify-content:center;align-items:center;background-color:#f9f9f9}.blog-details-container .content{width:100%;max-width:900px;text-align:justify;line-height:1.7}.blog-details-container img{max-width:100%;height:auto;border-radius:8px}.blog-details-container h1{font-size:2rem;font-weight:700;color:#000;margin-top:20px;margin-bottom:15px;text-align:left}.blog-details-container .metadata{display:flex;gap:10px;font-size:14px;color:#777;margin-bottom:15px}.blog-details-container .metadata img{width:16px;height:16px}.blog-details-container .categories{font-size:14px;color:#007bff;text-decoration:none}.blog-details-container .categories:hover{text-decoration:underline}.blog-details-container p{font-size:16px;line-height:1.8;color:#000;margin-bottom:20px}.blog-details-container h2,.blog-details-container h3{font-size:1.8rem;font-weight:700;margin-top:30px;margin-bottom:10px;color:#000}.blog-details-container ul{list-style-type:disc;margin-left:20px;margin-bottom:20px}.blog-details-container li{font-size:16px;line-height:1.6;color:#000;margin-bottom:10px}.blog-details-container ol{list-style-type:decimal;margin-left:20px;margin-bottom:20px}.blog-details-container ol li{font-size:16px;line-height:1.6;color:#000;margin-bottom:10px}.blog-details-container blockquote{font-style:italic;border-left:5px solid #ddd;padding-left:15px;margin:20px 0;font-size:16px;color:#555}.blog-details-container a{color:orange;text-decoration:none}.blog-details-container .side-panel-clashes a{color:#000;text-decoration:none}.blog-details-container a:hover{text-decoration:underline}.blog-details-container button{background-color:#ff7f00;color:#fff;border:none;padding:10px 20px;cursor:pointer;border-radius:5px;font-size:16px;margin-top:30px}.blog-details-container .side-panel-clashes button{margin-top:none!important;background-color:#fff;color:orange;border:1px solid orange;padding:5px 10px;cursor:pointer;border-radius:22px;font-size:16px;margin-top:10px}.blog-details-container button:hover{background-color:orange;color:#fff}.blog-details-container pre{background-color:#f5f5f5;padding:10px;border-radius:5px;margin-bottom:20px;overflow-x:auto}.blog-details-container code{font-size:1rem}.blog-details-container .breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;margin-bottom:20px}.blog-details-container .breadcrumb img{width:35px;height:35px}.blog-details-container .breadcrumb p{margin:0;font-size:14px;color:#555}.blog-details-container .breadcrumb b{margin:0 5px;color:#888}