body {
    margin: 0%;
    --s: 53px; /* control the size*/
    --c1: #30592b;
    --c2: #305f2b;
    --c3: #305d2b;

    background:
        repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 180deg) 
        calc(.5*var(--s)) calc(.5*var(--s)*0.577),
        repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 180deg);
    background-size: var(--s) calc(var(--s)*0.577);
}    

a {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

.text-center {
    margin: auto;
    width: 60%;
}

.height-fill-text {
    min-height: calc(100vh - 15rem);
}

.standard-font {
    font-family: "Kanit", sans-serif;
    font-size: 14pt;
    color: rgb(224, 224, 224);
}

.main-text {

    margin-bottom: 3rem;
}

.main-text a:link{
    text-decoration: underline;
    color: rgb(255, 234, 234);
}

.main-text a:visited{
    text-decoration: underline;
    color: rgb(255, 234, 234);
}

.main-text a:active{
    text-decoration: underline;
    color: rgb(255, 234, 234);
}

.nominh {
    min-height: 0px;
}

.image-middle {
    object-fit: contain;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    opacity: 80%;
}

.banner-container {
    padding-bottom: 6vh;
    font-size: 15pt;
    font-family: "Baloo Bhaina 2", sans-serif;
    font-weight: 700;
    min-height: 40vh;
    background: linear-gradient(rgb(192, 46, 46), 95%, transparent);
}

.hltext {
    color: rgb(255, 216, 216);
    padding-top: 2vh;
    text-align: center;
    letter-spacing: 8px;
}

.banner-container p {
    margin-bottom: 20px;
    margin-top: 0%;
}

.nameimg-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nameimg-container img {
    max-width: 100%;
    max-height: 100%;
}

.boxtari-name {
    color: rgb(255, 216, 216);
    font-family: "Shadows Into Light", cursive;
    font-size: 50pt;
    padding-right: 20px ;
}

.topbar {
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    overflow: hidden;
    background-color: rgba(25, 25, 25, 0.3);
}

.topbar a {
    float: left;
    color: white;
    text-align: center;
    padding-top: 13px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 16px;
    text-decoration: none;
    font-size: 12pt;
    transition-duration: 0.4s;
}

.topbar a:hover {
    background-color: rgb(21, 20, 20);
}

.namelink a {
    float: left;
    font-family: "Pixelify Sans", sans-serif;
    padding-top: 8px;
    padding-bottom: 2px;
    padding-left: 0px;
    padding-right: 10px;
    font-size: 20pt;
    font-weight: 600;
    transition: none;
}

.namelink a:hover {
    background-color: rgba(25, 25, 25, 0.0);
}

.imglink a {
    padding-top: 11px;
    padding-bottom: 0px;
    padding-right: 7px;
}

.imglink a:hover {
    background-color: rgba(25, 25, 25, 0.0);
}

.thin-line {
    height: 5px;
    background: linear-gradient(to right, rgb(192, 46, 46), white, rgb(25, 25, 25));
}

.footer {
    width: 100%;
    margin: auto;
    text-align: center;
    height: 15rem;
    overflow: hidden;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 300;
    background-color: rgb(22, 16, 16);
    font-size: 12pt;
    font-style: normal;
    padding-top: 2vh;
}

.footer-text {
    width: 80%;
    margin: auto;
}

.post-listings {
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 300;
    margin: auto;
    width: 60%;
    min-height: calc(100vh - 15rem);
}

.post-listings a {
    transition-duration: 0.2;
}

.post-listings a:link,a:active,a:visited {
    color: white;
}

.post-listings a:hover {
    color: antiquewhite;
}

.post-excerpt {
    background-color: rgba(5, 5, 5, 0.5);
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 1px;
    padding-bottom: 1px;
    border-radius: 20px;
    margin-top: 10px;

    transition: transform .2s;
}

.game-container {
    overflow-x: auto;
    background-color: rgba(5, 5, 5, 0.5);
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 20px;
    margin-top: 10px;
    transition: transform .2s;
}

.title-generic {
    text-align: center;
}

.github-button a{
    padding-top: 7px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 7px;
    text-decoration: none;
    font-size: 12pt;
    font-weight: 700;
    border-radius: 10px;
    color: white;
    background-color: #111111;
    text-align: center;
}

.coffee-button a{
    padding-top: 7px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 7px;
    text-decoration: none;
    font-size: 12pt;
    font-weight: 700;
    border-radius: 10px;
    color: white;
    background-color: #056f9d;
    text-align: center;
}

.twitter-button a{
    padding-top: 7px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 7px;
    text-decoration: none;
    font-size: 12pt;
    font-weight: 700;
    border-radius: 10px;
    color: white;
    background-color: #50afd8;
    text-align: center;
}

.itch-button a{
    padding-top: 7px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 7px;
    text-decoration: none;
    font-size: 12pt;
    font-weight: 700;
    border-radius: 10px;
    color: white;
    background-color: #fa5c5c;
    text-align: center;
}

.button-generic {
    margin-top: 30px;
    transition: transform .2s;
}

.button-generic:hover {
    transform: scale(1.02)
}

.game-container:hover {
    transform: scale(1.02)
}

.post-thumbnail-container {
    width: 30%;
}

.post-excerpt a:link,a:active,a:visited,a:hover {
    color: white;
}

.game-description p {
    margin-top: 0px;
}
.post-excerpt:hover {
    transform: scale(1.02)
}

.post-excerpt p {
    margin-top: 0%;
}

.small-headings h1 {
    font-size: 12pt;
}

.small-headings h2 {
    font-size: 12pt;
}

.small-headings h3 {
    font-size: 12pt;
}

.small-headings h4 {
    font-size: 12pt;
}

.small-headings h5 {
    font-size: 12pt;
}

.small-headings h6 {
    font-size: 12pt;
}