.Topnav{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:20px;position:sticky;top:0px;background:#fff;z-index:2;padding:10px;transition:.2s ease-in-out}.Topnav .logo{height:50px;margin-right:8px}.Topnav .toggle{height:45px;width:45px;transition:.2s ease-in-out;cursor:pointer}.Topnav .toggle:hover{transform:scale(1.03)}.Topnav h1{font-weight:400;text-transform:capitalize}.Topnav .search{display:flex;align-items:center;position:relative}.Topnav .search img{height:20px;width:20px;position:absolute;left:20px}.Topnav .search input{width:600px;height:32px;padding:24px 54px;border:2px solid #f9f9f9;outline:none;border-radius:30px;font-family:var(--font);transition:.2s ease;font-size:15px;color:var(--grey)}.Topnav .search input:focus{border:2px solid var(--light-grey)}.Header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}.Header p{color:var(--light-grey);margin-bottom:6px;text-transform:capitalize}.Header h1{color:var(--dark);font-size:24px}.Header button{padding:10px 32px;border:2px solid #f9f9f9;background:transparent;border-radius:25px;text-align:center;color:var(--dark);cursor:pointer;transition:.2s ease;font-family:var(--font)}.Header button:hover{border:1.5px solid var(--light-grey)}.Blogs{display:flex;align-items:left;justify-content:space-evenly;flex-wrap:wrap}.Blogs a{text-decoration:none}.Blogs .card{width:350px;border-radius:10px;overflow:hidden;padding:10px;margin-bottom:40px;border:2px solid #f9f9f9;transition:.2s ease}.Blogs .card:hover{transform:scale(1.02);box-shadow:0 8px 50px #0000001a}.Blogs .card span{background-size:cover;display:block;height:200px;width:100%;margin-bottom:16px;border-radius:5px}.Blogs .card h1{color:var(--dark);font-size:20px;margin-bottom:16px;font-weight:600}.Blogs .card .description{color:var(--grey);height:7ch;overflow:hidden;margin-bottom:8px}.Blogs .card footer{display:flex;align-items:center;margin-bottom:16px}.Blogs .card footer .author{color:var(--grey);font-size:16px;margin-right:16px}.Blogs .card footer .source{font-size:14px;color:var(--light-grey);margin-right:8px}.error{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:40px}.error h1{color:var(--dark);margin-top:40px}.error button{height:50px;width:300px;max-width:100%;background:var(--grey);color:#fff;border:none;border-radius:30px;font-size:16px;font-family:var(--font);transition:.2s ease-in-out;cursor:pointer}.error button:hover{opacity:.8}@media only screen and (min-device-width: 0) and (max-device-width: 767px){body{font-size:18px;line-height:1.5}.Topnav{display:block;width:100%}.Topnav .logo,.Topnav .toggle{display:none}.Topnav input{width:70%}.Header button{display:none}.error button{width:100%}}html{scroll-behavior:smooth;--bg: #f0f8ff;--primary-color: #0e6ffc;--dark: hsl(202, 57%, 15%);--grey: hsl(201, 23%, 34%);--light-grey: hsl(203, 15%, 47%);--filler: #fff;--font: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}html[data-theme=dark]{--bg: red;--text-color: #d3d3d3;--filler: #0000001a}*{box-sizing:border-box;padding:0;margin:0}:root{font-family:var(--font);font-size:16px;line-height:24px;font-weight:400}body{color:var(--dark);padding:20px}