:root {
    --max-width: 1300px;

    --brandeis-blue: #1a73e8;
    --burnt-sienna: #ee6c4d;
    --rich-black: #011627;
    --mint-green: #c9fbff;
    --tiffany-blue: #83c5be;
    --baby-powder: #fdfffc;
    --transparent: #ffffff00;

    --blue-gray: #72a0cf;
    --paynes-gray: #536182;

    --text-color: var(--rich-black);
    --bg-color: var(--baby-powder);
    --main-color: var(--brandeis-blue);
    --alt-color: var(--burnt-sienna);
    --alt-bg-color: var(--tiffany-blue);

    --head-bg-color: #fdfffccc;
    --nav-bg-color: var(--baby-powder);
    --nav-color: var(--text-color);
    --nav-hover-color: var(--alt-color);
    --nav-active-color: var(--main-color);

    --body-bg-color: var(--baby-powder);

    --foot-text-color: var(--mint-green);
    --foot-bg-color: var(--rich-black);
    --foot-a-color: var(--alt-color);
    --foot-hover-color: var(--main-color);

    --blog-post-color: var(--paynes-gray);
    --blog-title-color: #ffffff;
    --blog-title-hover: var(--burnt-sienna);
}

body {
    font-family: 'Verdana', sans-serif;
    font-size: 1em;
    margin: 0;
    padding: 0;
    color: var(--text-color);
    background: var(--body-bg-color);
}

a {
    color: var(--main-color);
    text-decoration: none;
}

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

img {
    border: 0;
    margin: 0;
    padding: 0;
}

#head {
    max-width: var(--max-width);
    margin: 0 auto;
}

#page-header {
    position: fixed;
    top: 0;
    height: 100px;
    width: 100%;
    overflow: hidden;
    background: var(--head-bg-color);
    font-size: 16px;
    margin: 0;
    padding: 0;
}

#tbtn-small-logo {
    vertical-align: middle;
    width: 100px;
    height: 100px;
}

div#navbar-logo {
   display: inline-block;
}

div#navbar-logo a {
    padding: 0 20px;
}

#navbar {
    position: fixed;
    width: 100%;
    height: 100%;
    background: var(--nav-bg-color);
    overflow: hidden;
    max-height: 0;
    transition: max-height .25s ease-out;
}
#navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#navbar li {
    margin: 0;
    padding: 0;
}

ul#navbar-nav a {
    display: block;
    padding: 20px 10px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--nav-color);
    border-bottom: 3px solid var(--rich-black);
}

ul#navbar-nav a:hover {
    color: var(--nav-hover-color);
    border-bottom: 3px solid var(--nav-hover-color);
}

ul#navbar-nav li.active a {
    color: var(--nav-active-color);
    border-bottom: 3px solid var(--nav-active-color);
}

ul#navbar-lang {
    margin: 20px 0 0 0;
    padding: 100px 0 0 0;
    background: no-repeat top url("/static/i18n@100.png");
}

ul#navbar-lang a {
    display: block;
    padding: 20px 10px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--nav-color);
    border-bottom: 3px solid var(--rich-black);
}

ul#navbar-lang a:hover {
    color: var(--nav-hover-color);
    border-bottom: 3px solid var(--nav-hover-color);
}

ul#navbar-lang li.active a {
    color: var(--nav-active-color);
    border-bottom: 3px solid var(--nav-active-color);
}

.hamb{
    cursor: pointer;
    float: right;
    padding: 47px 25px;
}

.hamb-line {
    background: var(--rich-black);
    display: block;
    height: 6px;
    position: relative;
    width: 50px;
}

.hamb-line::before,
.hamb-line::after{
    background: var(--rich-black);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
.hamb-line::before{
    top: 15px;
}
.hamb-line::after{
    top: -15px;
}

.side-menu {
    display: none;
}
.side-menu:checked ~ #navbar {
    max-height: 100%;
    max-width: var(--max-width);
}
.side-menu:checked ~ .hamb .hamb-line {
    background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
    transform: rotate(-45deg);
    top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
    transform: rotate(45deg);
    top:0;
}

/*
header nav {
    display: flex;
    height: 100px;
    margin: 0;
}

header ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

header li {
    margin: 0;
    padding: 0;
}

#tbtn-small-logo {
    width: 100px;
    height: 100px;
}

div#navbar-logo {
   display: inline-flex;
}

div#navbar-logo a {
    padding: 0 20px;
}

ul#navbar-nav {
    display: inline-flex;
    justify-content: flex-start;
    flex-grow: 1;
    flex-shrink: 0;
}

ul#navbar-nav li {
    display: inline-flex;
}

ul#navbar-nav a {
    display: flex;
    flex-grow: 1;
    align-items: flex-end;
    padding: 20px;
    font-weight: bold;
    color: var(--nav-color);
    border-bottom: 3px solid var(--transparent);
}

ul#navbar-nav a:hover {
    color: var(--nav-hover-color);
    border-bottom: 3px solid var(--nav-hover-color);
}

ul#navbar-nav li.active a {
    color: var(--nav-active-color);
    border-bottom: 3px solid var(--nav-active-color);
}

ul#navbar-lang {
    display: inline-grid;
}
ul#navbar-lang li.active {
    display: inline-grid;
    align-items: end;
    height: 100px;
}
ul#navbar-lang li.alternative {
    display: none;
    align-items: center;
    justify-items: center;
    height: 50px;
    background: var(--head-bg-color);
}

ul#navbar-lang:hover li.alternative {
     display: inline-grid;
}

ul#navbar-lang a {
    padding: 20px;
}

ul#navbar-lang li.active a {
    border-bottom: 3px solid var(--nav-active-color);
}

ul#navbar-lang li.active a:hover {
    border-bottom: 3px solid var(--nav-hover-color);
}

ul#navbar-lang li.alternative a {
    padding: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    display: inline-grid;
}

*/

#page {
    margin: 0 auto;
    padding: 100px 0 30px 0;
}

.content {
    margin: 0;
    padding: 0;
    max-width: var(--max-width);
}

.block {
  margin: 0;
  padding: 0 20px;
}

.steamwidget iframe {
    margin: 0;
    display: block;
    width: 100%;
    height: 190px;
}

body.error404 #page {
    background: var(--mint-green);
}

footer {
    color: var(--foot-text-color);
    background: var(--foot-bg-color);
    padding: 20px 0;
    text-align: center;
}

#social-links {
    display: flex;
    justify-content: center;
    margin: 0 0 20px 0;
}

#social-links ul {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

#social-links li {
    display: inline-flex;
    margin: 0 10px;
    padding: 0;
}

footer p {
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

footer a {
    color: var(--foot-a-color);
}
footer a:hover {
    color: var(--foot-hover-color);
}

.badges {
    text-align: center;
}

.badge img {
    width: 210px;
}

.ttkbody #page {
    background: no-repeat top url('/take-the-king/ttk-covertart-mid-780.jpg') var(--body-bg-color);
}

.ttk-logo-block {
    margin: 0;
    padding: 236px 20px 20px;
}
.ttk-logo-block h1 {
    margin: 0;
    padding: 0;
    display: block;
    max-width: 450px;
    max-height: 253px;
    width: 100%;
    height: 100%;
}
img.ttklogo {
    width: 100%;
    height: 100%;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 5px;
}

.gallery a {
    overflow: hidden;
}

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

span.ttk {
    white-space: nowrap;
    font-weight: bold;
    color: #536182;
}

.imgblock-left {
    float: left;
}

.imgblock-right {
    float: right;
}

.clearblock {
    clear: both;
}

.blog-post-list {
    padding: 20px 0;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr;
}

.blog-post-preview {
    overflow: hidden;
}

.blog-post-preview header {
    height: 100px;
    margin: 0;
    padding: 0 20px;
    color: var(--blog-title-color);
    background: url(/static/gamepad-white@75.png) right no-repeat var(--blog-post-color);
    border-radius: 6px 6px 0 0;
}
.blog-post-preview h2 {
    margin: 0;
    padding: 40px 0 0 0;
}
.blog-post-preview h2 a {
    color: var(--blog-title-color);
}
.blog-post-preview h2 a:hover {
    color: var(--blog-title-hover);
}

.blog-post-preview .meta {
    margin: 0;
    padding: 0;
    font-style: italic;
    font-size: .9em;
}
.blog-post-preview .blog-post-body {
    margin-block-start: 20px;
    margin-block-end: 20px;
    padding: 0 20px;
    text-align: justify;
}

div.pagination {
    text-align: center;
}

.homepage .content {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
      "main"
      "secondary"
      "bottom";
}

.main {
    grid-area: main;
}

.secondary {
    grid-area: secondary;
}

.homepage .steamwidget {
    grid-area: bottom;
}

@media screen and (min-width: 780px) {
    #page-header {
        max-width: var(--max-width);
	display: flex;
    }
    #page {
        max-width: var(--max-width);
    }
    .hamb {
        display: none;
    }
    #navbar {
        background: unset;
        position: unset;
	width: unset;
        display: flex;
        max-height: 100px;
	height: 100px;
	flex-grow: 1;
    }
    #navbar-nav {
        display: inline-flex;
        justify-content: flex-start;
        flex-grow: 1;
        flex-shrink: 0;
    }
    #navbar ul {
        display: inline-flex;
	height: 100px;
    }
    #navbar li {
        display: flex;
	align-content: stretch;
    }
    ul#navbar-nav a {
        display: flex;
        align-items: flex-end;
        border-color: var(--transparent);
    }
    ul#navbar-lang {
        margin: 0;
        padding: 0;
        display: inline-grid;
    }
    ul#navbar-lang li {
        max-height: 100px;
        transition: max-height .25s ease-out;
    }
    ul#navbar-lang li.active {
        display: inline-grid;
        align-items: end;
        height: 100px;
    }
    ul#navbar-lang li.alternative {
        display: none;
        height: 50px;
        align-items: end;
    }
    ul#navbar-lang:hover li, ul#navbar-lang:focus-within li {
        max-height: 50px;
        display: inline-grid;
    }
    ul#navbar-lang:hover a, ul#navbar-lang:focus-within a {
        padding: 10px 20px;
    }
    
    ul#navbar-lang a {
        padding: 20px;
        transition: padding .25s ease-out;
    }
    
    ul#navbar-lang li.active a {
        border-bottom: 3px solid var(--nav-active-color);
    }
    
    ul#navbar-lang li.active a:hover {
        color: var(--nav-hover-color);
        border-bottom: 3px solid var(--nav-hover-color);
    }

    .homepage .content {
	margin: 0 20px;
        display: grid;
	grid-gap: 20px;
        grid-template-columns: auto 300px;
        grid-template-areas:
	  "main secondary"
	  "bottom bottom";
    }

    .homepage .block {
        padding: 0;
    }

    .ttkbody #page {
        background: no-repeat top url('/take-the-king/ttk-covertart-mid-1300.jpg') var(--body-bg-color);
    }
    .ttk-logo-block {
        padding: 236px 20px 20px;
    }
    .blog-post-list {
        grid-template-columns: 1fr 1fr;
    }

    .gallery {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-gap: 8px;
    }
}