:root{--bg:#0b1529;--bgSoft:#1f3050;--text:#dee4eb;--textSoft:#cbd2d9}@font-face{font-family:roboto;src:url("{{ (resources.Get "fonts/Roboto-Regular.woff2" | fingerprint).RelPermalink}}") format('woff2');
 font-weight: 400; font-style: normal; font-display: swap;}@font-face{font-family:roboto;font-weight:700;font-style:normal;url"{{ (resources.Get "fonts/Roboto-Bold.woff2" | fingerprint).RelPermalink }}"src:) format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto'; font-weight: 400; font-style: italic; src: url("{{ (resources.Get "fonts/Roboto-Italic.woff2" | fingerprint).RelPermalink }}") format('woff2');
 font-display: swap; } * { margin: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: "Roboto", sans-serif; } header { box-shadow: rgba(0, 0, 0, 0.23) 0em 0.125em 0.5em; top: 0; padding: 0.5em 1em; position: sticky; background-color: var(--bg); } main { padding: 0 1.5em; margin: 3.6em 0; } body.light { --bg: #dee4eb; --bgSoft: #cbd2d9; --text: #0b1529; --textSoft: #1f3050; } a { color: inherit; text-decoration: none; } .img-fluid { width: 100%; height: auto; } .post-video { width: 100%; } .post-video-vertical{ width: 100%; } .figure-caption { font-size: 0.6rem; color: #555; text-align: center; font-style: italic; margin-top: 0.3125em; } .navbar { display: flex; justify-content: space-between; align-items: center; } .logo { font-weight: bold; font-size: 1.25rem; max-width: 5em; text-align: center; } .links { align-items: center; gap: 1.25em; display: flex; } .toggle { width: 3.125em; height: 1.375em; border-radius: 3.125em; cursor: pointer; display: flex; align-items: center; gap: 0.3125em; background-color: var(--bgSoft); border: 0.5px solid var(--textSoft); padding: 0.3125em; position: relative; } .ball { width: 1.25em; height: 1.25em; border-radius: 50%; position: absolute; left: 0.07em; background-color: var(--textSoft); border: 1px solid var(--bgSoft); } .light .ball { left: unset; right: 0.07em; } .links-about-me { font-weight: bold; } footer { display: flex; margin-top: 4em; padding: 0em 1em; font-size: 0.875rem; flex-direction: column; gap: 0.5em; } .social { display: flex; align-items: center; justify-content: center; gap: 0.625em; } .social span { font-size: 1rem; } footer nav { color: var(--textSoft); display: grid; gap: 1em; padding: 1em 0; text-align: center; align-items: center; grid-template-columns: repeat(auto-fit, minmax(7em, 1fr)); } footer hr { width: 90%; margin: auto; color: var(--bgSoft); } .articleContainer { gap: 5em; display: flex; flex-direction: column; } .listItemImage { width: 100%; object-fit: cover; } .listItemTexts { display: flex; flex-direction: column; gap: 0.825em; margin-top: 1.5em; } .listItemDetail { display: flex; align-items: center; gap: 0.625em; font-size: 0.875rem; } .listItemDetail time { color: var(--textSoft); font-size: 0.8rem; } .listItemAuthor { width: 2.1875em; height: 2.1875em; border-radius: 50%; object-fit: cover; } .pagination { margin-top: 2em; display: flex; gap: 0.625em; list-style: none; padding: 0; font-size: 1rem; justify-content: center; } .page-item.active { background-color: var(--text); color: var(--bg); } .page-item.disabled { background-color: var(--bgSoft); cursor: not-allowed; display: none; } .page-link { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .page-item { border: 1px solid gray; width: 1.875em; height: 1.875em; border-radius: 5px; } .singleHead { flex-direction: column; display: flex; align-items: center; justify-content: space-between; gap: 1.25em; } .singleHeadTexts { display: flex; flex-direction: column; gap: 1.25em; } .singleHeadTitle { font-size: 2.5rem; } .singleHeadDetail { display: flex; align-items: center; gap: 1em; } .singleHeadDate { color: var(--textSoft); font-size: 0.8rem; } .singleAvatar { width: 3.125em; height: 3.125em; border-radius: 50%; object-fit: cover; } .singleCategory { padding: 0.4em; border-radius: 0.5em; background-color: var(--bgSoft); color: var(--textSoft); } .singleHeadImage { width: 100%; object-fit: cover; } .singleContent { margin-top: 3.125em; height: 0%; font-size: 1.25rem; line-height: 1.5; } .singleContent p, .singleContent h1, .singleContent h2, .singleContent h3 { margin: 1em 0 0.5em 0; } .categoriesPageContainer { display: flex; gap: 3.125em; flex-direction: column; } .authors-container { display: flex; justify-content: space-between; flex-direction: column; gap: 2.5em; } .about-me { gap: 0; line-height: 1.5; } .categoryContainer { display: flex; flex-wrap: wrap; gap: 0.5em; } .about-me-image { display: block; margin: auto; width: 75%; border-radius: 50%; } .about-me h1 { margin-top: 1.5em; } .about-me p { margin-top: 0.5em; } .about-me ul { margin-top: 1em; padding: 0; list-style-position: inside; } .about-me ul li { margin-top: 0.5em; } .hyperlink { color: #0099ff; } .hyperlink:visited { color: purple; } .hyperlink:hover { color: #5385a5; } .hyperlink:active { color: red; } .author-posts ul { margin-left: 5em; padding: 0; list-style-position: inside; } .author-image { width: 2.5em; height: 2.5em; border-radius: 50%; object-fit: cover; margin-right: 0.5em; vertical-align: middle; } @media (min-width: 420px) { header { padding: 1em 1.5em; } main, footer { padding: 0em 1.5em; } .about-me-image { width: 70%; } } @media (min-width: 481px) { header { padding: 1em 1em; } main, footer { padding: 0em 1em; } .logo { max-width: unset; font-size: 1.5rem; } .toggle { width: 3.5em; height: 1.5em; } .ball { width: 1.35em; height: 1.35em; } .links-about-me { font-size: 1.15rem; } .articleContainer { gap: 2em; } .articleContainer article { display: flex; gap: 0.5em; } .articleImageContainer { width: 70%; } .listItemTexts { width: 100%; margin-top: 0.5em; } .about-me-image { width: 60%; } .categoriesPageContainer { font-size: 1.5rem; gap: 1em; } .singleHead { align-items: start; } } @media (min-width: 601px) { header { padding: 1.5em 2em; } main, footer { padding: 0 2em; } .pagination { font-size: 1.25rem; } footer nav a { padding: 0.25em; font-size: 1rem; } } @media (min-width: 769px) { header{ padding: 1.5em 3em; } main,footer{ padding: 0 4em; } .logo { font-size: 2rem; } .toggle { width: 4.5em; height: 2em; } .ball { height: 1.85em; width: 1.85em; } .listItemTexts a h1{ font-size: 2rem; } .listItemDescription{ font-size: 1.25rem; } .listItemDetail{ font-size: 1.15rem; } .listItemAuthor{ width: 2.8em; height:2.8em ; } .links-about-me{ font-size: 1.45rem; } .articleContainer article { gap: 1.5em; } .singleHead { flex-direction: row; } .singleHeadImage { width: 60%; } .singleContent { font-size: 1.5rem; } .img-fluid { width: 70%; } .post-video-vertical { width: 70%; } .about-me{ font-size: 1.5rem; } .singleHeadDescription{ font-size: 1.35rem; } .singleHeadDetail div p{ font-size: 1.35rem; } .singleHeadDate{ font-size: 1.2rem; } .social span{ font-size: 1.35rem; } footer nav a{ font-size: 1.25rem; } .singleCategory{ font-size: 1.2rem; } .articleContainer{ gap:6em; } .figure-caption{ text-align: left; } } @media (min-width:1025px) { .listItemTexts{ gap: 1.2em; } .about-me-image{ max-height: 20vw; max-width: 20vw; } .singleHeadImage{ max-height: 21.875em; object-fit: contain; } .img-fluid{ width: auto; max-height: 80vh; } .post-video-vertical{ max-height: 80vh; width: auto; } .post-video{ max-height: 80vh; width: auto; } .articleImageContainer{ max-width: 15.625em; } }}