.tektur-<uniquifier> {
  font-family: "Tektur", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" <width>;
}


:root {
  --my-transition: all 0.2s cubic-bezier(0, 0.55, 0.45, 1) 0s;
  
  font-size: 14px;
  
  --size-s: 6px;
  --size-m: 12px;
  --size-l: 24px;
  --size-xl: 36px;
  
  --color-bg: #3D3751;
  --color-fg: #D7C6E8;
  --color-heading: #d9edff;
  --color-secondary: black;
  
  --link: #ffffffbd;
  --link-hover: #ffffffff;
  
  --accent: lightseagreen;
  --accent-light: #50fbdb;
  --accent-dark: #005d79;
  --accent-shadow: #ff1de1;
  --accent-shadow: #00175e;
  
}

body {
    color: var(--color-fg);
    background: var(--color-bg);
    font-family: "Tektur"
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom:.5rem;
  font-weight:bold;
  line-height:1.25;
  color: var(--color-heading);
  text-rendering:optimizeLegibility
}
h1 {
  font-size:2rem
}
h2 {
  margin-top:1rem;
  font-size:1.5rem
}
h3 {
  margin-top:1.5rem;
  font-size:1.25rem
}
h4,
h5,
h6 {
  margin-top:1rem;
  font-size:1rem
}

hr {
    height: 1px;
    border: none;
    background: var(--color-fg);
    opacity: 0.34;
}

a {
    color: var(--link);
}

a:hover {
    color: var(--link-hover);
}

.masthead-title a {
  color: var(--color-heading);
}

.container {
    max-width: 720px;
}

.fade-in {
    animation: fadein 0.2s;
}

.posts-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 8px;
    min-height: 600px;
}

.post-title {
    margin-bottom: 0px;
    font-size: 2.5em;
    font-weight: 900;
    font-variation-settings: "wdth" 200;
    color: var(--color-heading);
    
}

.post-full-title {
    margin-top: 0px;
    font-size: 2em;
    font-weight: bolder;
    color: var(--color-heading);
}


.post-title > a{
}

.post-date {
  margin-bottom: 0px;
  font-size: 1em;
  margin-top: calc(var(--post-hover-offset) * -1);
  color: var(--color-fg);
}

.post-full-date {
    margin-bottom: 0px;
    font-size: 0.8em;
    color: var(--accent-light);
}

article.post {
    background: radial-gradient(circle at 90% 90%, rgba(0, 255, 159, 0.9) 0%, rgba(71, 33, 255, 0.8) 100%);
    background-size: 100% 100%;
    background-position-y: 0px;
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column-reverse;
    overflow: hidden;
    --post-hover-offset: 0px;
    --post-hover-opacity: 0;
    aspect-ratio: 3 / 2;
    margin-bottom: 0px;
    box-shadow: 0px 4px var(--accent-shadow);
    color: var(--color-fg);
    min-height: 220px;
    position: relative;
}


.post {
    background: black;
    
}

.post:hover {
    --post-hover-offset: 24px;
    --post-hover-opacity: 1;
}

a.post-more {
    background-color: var(--color-bg);
    padding: 12px;
    border-radius: 6px;
    color: var(--color-fg);
    margin-left: auto;
    margin-bottom: auto;
    width: 36px;
    height: 36px;
    line-height: 50%;
    text-align: center;
    font-size: 1.7em;
}

a.post-more:hover {
    text-decoration: none;
}

.post-excerpt {
    margin-bottom: 0px;
    height: var(--post-hover-offset);
    opacity: var(--post-hover-opacity);
    transition: --my-transition;
    transition-property: height, opacity;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(0, 0.55, 0.45, 1) 0s;
}

.post-content {
    display: flex;
    flex-direction: column-reverse;
    transition: --my-transition;
    height: 100%;
}

.post-content:hover {
    text-decoration: none;
}


.post-content > a {
    text-decoration: none;
}


.post-content > a:hover {
    text-decoration: none;
}

.post-full-content {
    min-height: 600px;
}

.game-window {
    width: 100%;
    height: 360px;
    margin: auto;
    transform: translate(0px,50%) scale(200%);
    margin-bottom: 360px;
}

.post-header {
    padding: 12px;
    border-radius: 12px;
    background: radial-gradient(circle at 90% 200%, rgb(0, 255, 159) 0%, rgb(71, 33, 255) 100%);
    box-shadow: 0px 4px var(--accent-shadow);
    margin-bottom: 24px;
}

.post-tag {
    font-size: 0.8em;
    border-radius: 24px;
    background: var(--accent-dark);
}

.header-gradient{
    background: linear-gradient(180deg, #431777, transparent);
    height: 60px;
    position: relative;
    z-index: -1;
    margin-bottom: -60px;
}

.post-thumbnail {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: -1;
}