html, body {
    /* Scrollbar */
    scrollbar-width: thin !important;
    scrollbar-color: #E36153 #572B2B !important;
}


body {
    max-width: 100vw;
}


@font-face {
    font-family: 'PixelOperator';
    src: url('../fonts/PixelOperator.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.font-pixel {
    font-family: 'PixelOperator', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.font-sans {
    font-family: 'PixelOperator', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.simulation-map {
    width: 50vw;
    height: 50vh;
    margin: 10% auto;
    box-sizing: border-box;
    border-radius: 0;
    background: #292828 !important;
    /* border: 1px solid black !important; */
}

.character-preview {
    background: url("images/Animation.gif") no-repeat center center;
    background-size: contain;
    width: 256px;
    height: 384px;
    margin: auto auto;
    vertical-align: center;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-primary);
    background-color: var(--mud-palette-action-default-hover);
}

.main-content {
    min-height: 90vh;
    overflow-y: auto;
}

.main-content div {
    border-radius: 0 !important;
}

.post-wrapper {
    border-radius: 0;
}

.post-wrapper p {
    margin-bottom: 20px;
}

.post-wrapper p a {
    color: var(--mud-palette-primary);
}

.post-wrapper p a:hover {
    text-decoration: underline;
}

.post-content-text h2 {
    margin: 0 0 0.5em 0;
}

.post-content-text p {
    margin: 0 0 1em 0;
    line-height: 0.89em;
}

.grid-entries {
    padding: 20px;
}

.grid-entries a:hover .grid-entry {
    background-color: #292828 !important;
    /* animation */
    transition: background-color 0.3s ease;
}

.grid-entries .mud-card-header {
    padding: 0;
}

.grid-entries .mud-card-content {
    padding: 0;
}

.grid-entries .mud-card-actions {
    padding: 0 10px;
}

.grid-entry {
    padding: 5px;
    min-height: 110px;
}

.grid-entry h6 {
    padding: 0 10px;
}

.grid-entry p {
    padding: 0 10px;
    margin-bottom: 0;
}

.youtube-frame iframe {
    width: 100%;
    height: 750px;
}

.mud-timeline-item-content
{
    background-color: #292828 !important;
    padding: 10px !important;
}