/*GENERAL*/
/*@font-face {
    font-family: 'FiraCode';
    src: url(fonts/FiraCode-VariableFont_wght.ttf);
}*/

@font-face {
    font-family: 'Inconsolata';
    src: url(fonts/Inconsolata-VariableFont_wdth\,wght.ttf);
    font-weight: 600;
}

/*##########################################################*/
/*BODY*/
body {
    background: #292a2d;
    font-family: 'Inconsolata', 'Courier New';
    font-size: 16pt;
    color: #EEE;
    margin: 0em;
}

img {
    max-width: 100%;
    max-height: auto;
    margin: auto;
}

/*##########################################################*/
/*HEADER*/
header {
    z-index: 1;
    display: flex;
    position: fixed;
    width: 100%;
    line-height: 3.5em;
    background: #151617;
    box-shadow:  0em 0.16em 0.8em 0em rgba(0,0,0,0.55);
    /*font*/
    font-size: 1.2em;
}

header .title {
    margin-left: 3em;
    font-weight: bold;
    font-size: 1.6em;
    text-shadow: 0em 0em 0.2em rgba(175, 175, 175, 0.5);
}

header .title a{
    color: inherit;
    text-decoration: none;
}    

header .menu {
    margin-left: auto;
    margin-right: 3em;
}

header .menu a{
    color: inherit;
    text-decoration: none;
    margin-right: 2em;
}

header .menu a:last-child {
    margin-right: 0; /* No margin for the last menu item */
}

header .menu a:hover {
    transform: scale(1.02);
    text-shadow: 0em 0em 1em rgba(175, 175, 175, 0.9);
}

/*##########################################################*/
/*IMG*/
img.center-fit {
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

img.shadow{
    box-shadow: 0em 0.16em 0.8em 0em rgba(0,0,0,0.55);
}

/*##########################################################*/
/*div classes*/
.content {
    display: block;
    padding-top: 5.5em;
    margin: 0 auto;
    width: 85%;
}

.content.no-header-offset {
    padding-top: 1em;
}

.content img {
    margin: auto;
}

.content.blog img {
    display: block;
}

.center {
    margin: auto;
}

.wip{
    text-align: center;
}

/*##########################################################*/
/*ARTICLE*/
article {
    padding: 1em 0em;
    border-bottom: .15em dashed #505050;
}

article img {
    width: 20em;
    height: 10em;
    object-fit: cover;
    object-position: 0% 20%;
    transition: transform 0.15s ease;
    margin: 0 auto;  
}

article img:hover {
    transform: scale(1.02);
    box-shadow: 0em 0.16em 0.8em 0em rgba(0,0,0,0.55);
}

article h1 {
    color:#c21734;
}

a {
    text-decoration: none;
    color: #8e2b3d;
}

@keyframes pulsate {
    0% {
        text-shadow: 0em 0em 0.2em #850000;
    }
    50% {
        text-shadow: 0em 0em 0.7em #850000;
    }
    100% {
        text-shadow: 0em 0em 0.2em #850000;
    }
}

article h1:hover{

}

article .publish-date {
    opacity: 0.5;
    margin-bottom: 0.5em;
}

article .preview {

}

article .readmore {
    margin-top: 0.5em;
}

article .readmore :hover{
}

article .readmore a {
    color: #8e2b3d;
    text-decoration: none;
}   

/*##########################################################*/
/*Image*/
.thumbnail {
    cursor: pointer;
}

.image_view {
    display: none;
}

.image_view:target {
    display: flex;
    position: fixed;
    inset: 0px 0px 0px 0px;
    justify-content: center;
    align-items: center;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.8);
}

.image_view img {
    max-width: 80%;
    max-height: 80%;
}

.image_view a {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
}

.image_view a:hover,
.image_view a:focus {
    color: #bbb;
}


/*##########################################################*/
/*TTRPG*/
.blogarticle {
    /* Add styles for the main content section on the TTRPG page here */
}

.blogarticle img {
    text-align: center;
}

.blogarticle p {
    margin-bottom: 1em; /* Example: Add space below paragraphs */
}

.blogarticle h2 {
    color: #a80000; /* Example: Customize heading color */
}
/*##########################################################*/
/*TTRPG*/
.ttrpg {
    text-align: center;
}

.ttrpg img {
    width: 30em;
    height: 15em;
}

.ttrpg img:hover{
    transform: scale(1.02);
    box-shadow: 0em 0.16em 0.8em 0em rgba(0,0,0,0.55);
}

.ttrpg p {
    /* Styles for paragraphs within the TTRPG main content section */
    margin-bottom: 1em; /* Example: Add space below paragraphs */
}

.ttrpg h2 {
    /* Styles for heading 2 within the TTRPG main content section */
    color: #a80000; /* Example: Customize heading color */
}

/*##########################################################*/
/*FOOTER*/
footer {
    opacity: 0.5;
    position: relative;
    bottom: 0;
    width: 100%;
    text-align: center;
    /*padding: 10px;*/
    border-top: 1px transparent #ccc; /* Trennlinie oberhalb des Footers */
}