body {
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='10' height='10' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform=''%3E%3Crect width='100%25' height='100%25' fill='rgba(42, 41, 41,1)'/%3E%3Cpath d='M-10-1h60v2h-60z' fill='rgba(58, 57, 57,1)' filter='url(%23filter-doodad-1)'/%3E%3Cpath d='M-10 39h60v2h-60z' fill='rgba(58, 57, 57,1)' filter='url(%23filter-doodad-1)'/%3E%3Cpath d='M-10 29h60v2h-60z' fill='rgba(52, 51, 51,1)' filter='url(%23filter-doodad-2)'/%3E%3Cpath d='M29-10v60h2v-60z' fill='rgba(52, 51, 51,1)' filter='url(%23filter-doodad-2)'/%3E%3Cpath d='M9-10v60h2v-60z' fill='rgba(58, 57, 57,1)' filter='url(%23filter-doodad-1)'/%3E%3C/pattern%3E%3Cfilter id='filter-doodad-1'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2' type='fractalNoise' result='result1'/%3E%3CfeDisplacementMap in2='result1' scale='13' result='result2' xChannelSelector='R' in='SourceGraphic'/%3E%3CfeComposite in2='result2' in='SourceGraphic' operator='atop' result='fbSourceGraphic'/%3E%3C/filter%3E%3Cfilter id='filter-doodad-2'%3E%3CfeTurbulence baseFrequency='1.7000000000000002' numOctaves='2' type='fractalNoise' result='result1'/%3E%3CfeDisplacementMap in2='result1' scale='14' result='result2' xChannelSelector='R' in='SourceGraphic'/%3E%3CfeComposite in2='result2' in='SourceGraphic' operator='atop' result='fbSourceGraphic'/%3E%3C/filter%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ");
}

.hnav {
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    overflow: hidden;
    background-color: rgba(25, 25, 25, .5);
}
.hnav a {
    float: left;
    color: white;
    text-align: center;
    padding: 0.75em 1em;
    text-decoration: none;
    font-size: 12pt;
    transform: translateY(17.5%);
}

.hnav .badge {
    transform: translateY(0%);
    height: 40px;
    float: right;
    padding-left: 0.25%;
    padding-right: 0.25%;
}

.hnav #first-badge {
    padding-right: 1%;
}

.hnav .badge img {
    height: 100%;
}

.namelink a {
    float: left;
    color: white;
    text-align: center;
    padding: 4px 0.7em;
    text-decoration: none;
    font-size: 20pt;
    font-weight: 700;
}

main {
    width: 60%;
    margin: auto;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 300;
    font-size: 14pt;
    font-style: normal;
    margin-bottom: 3rem;
    min-height: calc(100vh - 15rem);
}

main a {
    color: rgb(206, 206, 206);
}

main a:hover {
    color: rgb(255, 255, 255);
}

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(25, 25, 25);
    font-size: 12pt;
    font-style: normal;
}

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

main header {
    font-weight: 400;
}

.big-image {
    width: 100%;
    height: 300px;
    overflow: hidden;
    text-align: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 35pt;
    line-height: 0.9;
    position: relative;
}

.big-image img {
    opacity: 70%;
}

.big-image-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.big-image-text p {
    margin-bottom: 0%;
}

.button-round-generic {
    background-color: white;
    border: none;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 14pt;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transition-duration: 0.4s;
    border-radius: 5px;
}

.button-round-generic-container a{
    color:black;
}

.button-round-generic-container a:hover{
    color: white;
}

.button-round-generic:hover {
    background-color: black;
}

.button-develop {
    background-color: rgb(61, 59, 59);
    color:  white;
}

.button-develop:hover {
    background-color: white;
    color:  black;
}

.button-download {
    background-color: rgb(55, 55, 148);
    color:  white;
}

.button-download:hover {
    background-color: white;
    color:  black;
}

.big-image img {
    width: 100%;
    height: 300px;
}

body {
    margin: 0%;
}

.post-description {
	margin-top: 7px;
}

.post-description * {
	line-height: 0.0625em;
}

.post-description>span {
	font-size: medium;
}

.post-description {
	margin-bottom: 37px;
}