body {
    display:flex;
    justify-content: center;

    background-color: rgb(21, 16, 41);
    color: white;
    font-family: "Inconsolata", monospace;
    margin: 0; padding: 0; border: 0; outline: 0;
}


h1, h2, h3, h4, h5, h6 {
  font-family: "Press Start 2P", monospace;
  font-optical-sizing: auto;
  font-style: normal;
}

.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 {
  font-family: "Gemunu Libre", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.post-content {
    padding: 15px 25px 15px 25px;
    background-color: rgba(0, 0, 0, 0.123);
    border: solid 2px white;
}

.post-content p {
    padding: 5px 0px 5px 0px;
}


a {
    text-decoration: none;
    color: inherit;
}

a span {
    
    transition: transform 0.2s cubic-bezier(.17,1.62,.53,1), background-color 0.1s ease-in-out;
    background-color:rgb(211, 38, 125);

    color: white;
    padding: 10px;
    display: inline-block;
    border: solid 2px transparent;


}
a:hover span {
    transform: scaleX(0.95) scaleY(1.2);
    background-color: rgb(77, 67, 218);
    border: solid 2px white;
}

.post-content a {
    
    transition: transform 0.2s cubic-bezier(.17,1.62,.53,1), background-color 0.1s ease-in-out;
    background-color:rgb(211, 38, 125);

    color: white;
    padding: 5px;
    display: inline-block;
    
border: solid 2px transparent;

}
.post-content a:hover {
    transform: scaleX(0.95) scaleY(1.2);
    background-color: rgb(77, 67, 218);
    border: solid 2px white;
}

.post-content p:has(img) {
    text-align: center;
}
.post-content img {
    max-width: 50%;
    max-height: 500px;
    margin: 20px;
    border: solid 2px white;
}

.post {
    text-decoration: none;
    padding: 5px;


    margin-bottom: 20px;
    padding: 10px 25px 10px 25px;
    background-color: rgba(0, 0, 0, 0.212);
    transition: transform 0.2s cubic-bezier(.17,1.62,.53,1), background-color 0.1s ease-in-out;
    border: solid 2px white;

}

.post:hover {
    background-color: rgba(30, 15, 238, 0.199);
    transform: scaleX(0.99) scaleY(1.05);
}


p {
  font-family: "Inconsolata", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 112.5;

    font-size: large;
    
}


.container {
  max-width: 800px;
  min-width: calc(max(50vw,500px));
  align-self: center;
  padding: 1rem;
  margin: 0px;
  top: 0px;
  position: absolute;
  min-height: 85vh;
  padding-top: 100px;
}

.content {

padding-bottom: 50px;
  min-height: 50vh;
}

.footer {
    width: 100%;
    height: 5vh;
    text-align: center;
}

.blog-container {
    padding: 50px;
    height: 55vh;
    overflow-y: auto;
    overflow-x: hidden;
    border: solid 2px white;
    background-color: rgba(0, 0, 0, 0.123);
}


.blog-container::-webkit-scrollbar {
    width: 16px;
}

.blog-container::-webkit-scrollbar-track {
    -webkit-border-radius: 0px;
    border-radius: 0px;
    background: rgba(0, 0, 0, 0); 
}

.blog-container::-webkit-scrollbar-thumb {
   -webkit-border-radius: 0px;
   border-radius: 0px;
   background: #ffffff;
}

.blog-container::-webkit-scrollbar-thumb:window-inactive {
    background: #ffffff;
}

.header {
    position:fixed;
    top: 0px;
    width: 100%;
    height: 100px;
    text-align: center;
    z-index: 100;
    background-color: rgba(26, 14, 73, 0.548);
    backdrop-filter: blur(10px);
}