.navbar {
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
}
.navbar a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.navbar a.active {
  color: indianred;
}
.navbar a:hover {
  background-color: #fff;
  color: black;
}
input {
  background-color: #e65577;
  font-size: 20px;
  color: black;
  box-shadow: 3px 3px;
  border-color: black;
  border-width: 3px;
  width: 80%;
  padding: 20px;
  margin: 5px;
}
html {
  overscroll-behavior: none;
}
body {
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 497;
  font-style: normal;
  display: flexbox;
  padding-top: 30px;
  min-height: 100vh;
  background: #0c0e1c;
  background: linear-gradient(10deg, rgba(12, 14, 28, 1) 0%, rgba(41, 52, 68, 1) 100%);
}
.page-area, .blog-card {
       margin-top: 5px;
       background: rgba(159, 182, 208, 0.22);
       padding-top: 10px;
       padding-bottom: 10px;
       padding-left: 20px;
       padding-right: 20px;
       border-radius: 10px;
       border:1px solid slategray;
       box-shadow: 0px 0px 30px;
     }
p {
       color: white;
     }
h1 {
       color: white;
     }
h2 {
       color: white;
     }
a {
       color: darkorange;
     }
li {
       color: #fff;
     }
article {
       display: flex;
       gap: 10px;
     }
article img {
       overflow: hidden;
       border-radius: 20px;
       border:1px solid black;
}
article p {
       color: lightslategray;
     }
article h1 {
  margin-right: 3px;
}
.post-date {
  margin-left: auto;
  padding-right: 20px;
}
.thumbnail {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 30px;
  border:1px solid black;
}
footer {
    opacity: 0.3;
    padding-top: 30px;
    text-align: center;
}