:root {  --color-primary: #18181A;
 --color-secondary: #75757C;
 --color-dark: #364C62;
 --color-light: #F5F5F5;
 --font-family-primary: "Roboto Mono", monospace;
 --font-family-secondary: "Rubik Mono One", sans-serif;
 --td: 150ms;
 --te: cubic-bezier(0.215, 0.61, 0.355, 1);
}

nav {background:#fff}
body {background-repeat:no-repeat; background-size:cover; min-height:100vh; height:100%}
#main {background:#ffffffaa}


.video-btn {border-radius:0; text-align:left; padding:.5rem 1rem; width:100%; border-bottom:1px solid #ccc; color:#212529; text-decoration:none; display:flex; align-items:center; justify-content:space-between}

.video-btn small {border-radius:.25rem; background:#f8f9fa; color:#212529bf; display:inline-block; line-height:1; text-align:center; white-space:nowrap; vertical-align:baseline; padding:.25rem .25rem; font-size:.75rem; font-weight:bold}

.video-btn:hover {background:#eee; cursor:pointer}
.video-btn i {margin-right:.5rem; font-family:FontAwesome; font-style:normal}

.video-btn i::before {content:"\f04b"; /* FA 4.7 play icon */ display:inline-block; transition:transform 0.3s ease, color 0.3s ease}
.video-btn:hover i::before {transform:rotate(360deg) scale(1.2); color:#000}
.video-btn.active-video {background-color:#f6eedf; font-weight:bold; color:#0d6efd; border-left:10px solid #0d6efd}
.video-btn.active-video i {color:#0d6efd}

.quicktake .video-btn i {color:#0dcaf0!important}
.reading .video-btn i {color:#198754}
.analysis .video-btn i {color:#dc3545}

.quicktake, .reading, .analysis, .prologue {border-bottom:1px solid #000!important}

button.accordion-button {font-weight:bold}

.navbar .navbar-brand { display: block; width: 100%; }

.page-container { display: flex; flex-direction: column; min-height: 100vh; justify-content: center; margin: 0 auto; max-width: 45rem; padding: 1rem; }
.page-container > * + * { margin-top: 1.5rem; }
.nav-main { align-items: center; display: flex; height: 100%; justify-content: center; left: -100%; position: fixed;  transition: left 0s calc(var(--td) * 2), transform 0s calc(var(--td) * 2);
width: 100%; z-index:99}
.nav-main::before, .nav-main::after { content: ""; background-color: var(--color-primary); height: 50%; left: 0; position: absolute; transform: translateX(-110%); transform-origin: 0 50%;  transition: transform calc(var(--td) * 2) var(--td) var(--te);
width: 100%; z-index: -100; }
.nav-main::before { top: 0; }
.nav-main::after { bottom: 0; }
.nav-main .menu__item { opacity: 0; transform: translateX(-1rem); transition: opacity var(--td) var(--te), transform var(--td) var(--te); }
[id=main-navigation-toggle] { opacity: 0; position: fixed; top: -100%; }
[id=main-navigation-toggle] ~ label { cursor: pointer; position: fixed; right: 1rem; top: 1rem; z-index: 100; }
[id=main-navigation-toggle] ~ label span { display: block; height: 2rem; padding: 0.5rem; position: relative;  transition: transform calc(var(--td) * 3) var(--te);
width: 2rem; }
[id=main-navigation-toggle] ~ label span::before, [id=main-navigation-toggle] ~ label span::after { background-color: var(--color-dark); bottom: 0; content: ""; height: 4px; left: 0; margin: auto; position: absolute; right: 0;  transition: transform calc(var(--td) * 3) var(--te);
top: 0; width: calc(100% - 1rem); }
[id=main-navigation-toggle] ~ label span::before { transform: rotate(0) translateY(-100%); }
[id=main-navigation-toggle] ~ label span::after { transform: rotate(0) translateY(100%); }
[id=main-navigation-toggle]:checked ~ label span { transform: rotate(1turn); }
[id=main-navigation-toggle]:checked ~ label span::before { transform: rotate(45deg); }
[id=main-navigation-toggle]:checked ~ label span::after { transform: rotate(-45deg); }
[id=main-navigation-toggle]:checked ~ .nav-main { left: 0; transition: transform 0s; }
[id=main-navigation-toggle]:checked ~ .nav-main::before, [id=main-navigation-toggle]:checked ~ .nav-main::after { transform: translateX(0); transition-delay: 0s; }
[id=main-navigation-toggle]:checked ~ .nav-main::after { transition-delay: calc(var(--td) / 2); }
[id=main-navigation-toggle]:checked ~ .nav-main .menu__item { opacity: 1; transform: translateX(0);  transition: opacity calc(var(--td) * 2) var(--te), transform calc(var(--td) * 2) var(--te);
}
[id=main-navigation-toggle]:checked ~ .nav-main .menu__item:nth-child(1) {
 transition-delay: calc(var(--td) * 2 * (1 * 0.25)); z-index: -1; }
[id=main-navigation-toggle]:checked ~ .nav-main .menu__item:nth-child(2) {
 transition-delay: calc(var(--td) * 2 * (2 * 0.25)); z-index: -2; }
[id=main-navigation-toggle]:checked ~ .nav-main .menu__item:nth-child(3) {
 transition-delay: calc(var(--td) * 2 * (3 * 0.25)); z-index: -3; }
[id=main-navigation-toggle]:checked ~ .nav-main .menu__item:nth-child(4) {
 transition-delay: calc(var(--td) * 2 * (4 * 0.25)); z-index: -4; }
[id=main-navigation-toggle]:checked ~ .nav-main .menu__item:nth-child(5) {
 transition-delay: calc(var(--td) * 2 * (5 * 0.25)); z-index: -5; }
.menu { position: relative; text-align: center; z-index: 1; }
.menu > .menu__item { font-family: var(--font-family-secondary); font-size: 10vmin; }
.submenu { left: 0; opacity: 0; position: absolute; transform: translateY(-10%); top: 100%; width: 100%; visibility: hidden; z-index: 2; }
.submenu .menu__item { font-family: var(--font-family-primary); font-size: 3.5vmin; width: 100%; }
.submenu .menu__link { color: var(--color-secondary); text-shadow: 1px 1px 0 var(--color-primary), 2px 2px 0 var(--color-primary); }
.submenu .menu__link::before, .submenu .menu__link::after { display: none; }
.menu__item { display: block; position: relative; }
.menu__item:hover .menu__link::before, .menu__item:hover .menu__link::after { animation: blink 1s var(--td) steps(1, end) forwards infinite; transform: translateX(calc(100% - 0.5rem));  transition-duration: calc(var(--td) * 3);
}
.menu__item:hover .menu__link::after { transition-delay: calc(var(--td) / 2); }
.menu__item:hover .submenu { opacity: 1; transform: translateY(0);  transition: transform calc(var(--td) * 2) calc(var(--td) * 3) var(--te), opacity calc(var(--td) * 2) calc(var(--td) * 3) var(--te), visibility 0s calc(var(--td) * 3);
visibility: visible; }
.menu__link { color: var(--color-dark); display: inline-block; font-weight: normal; overflow: hidden; padding: 0.5rem 1rem 0.125rem; position: relative; text-decoration: none; transition: color var(--td) var(--te), opacity var(--td) var(--te), transform var(--td) var(--te); z-index: 1; }
.menu__link::before, .menu__link::after { content: ""; background-color: var(--color-light); height: 50%; left: 0; position: absolute; transform: translateX(-110%); transform-origin: 0 50%; transition: transform 0s var(--te); width: 100%; z-index: -1; }
.menu__link::before { top: 0; }
.menu__link::after { bottom: 0; }
.menu:not(:focus-within):not(:hover) .menu__item .menu__link { opacity: 1; transform: translate(0, 0); }
.menu__item {  --pull: 30%;
}
.menu__item .menu__link { opacity: 0.25;  transition-duration: calc(var(--td) * 3);
 transform: translate(0, calc(var(--pull) * -1));
}
.menu__item .submenu .menu__link { opacity: 1; }
.menu__item:hover > .menu__link { color: var(--color-secondary); opacity: 1; transform: translate(0, 0); }
.menu__item:hover > .menu__link:hover { color: var(--color-light); transition-delay: 0s; }
.menu__item:hover ~ .menu__item > .menu__link {
 transition-duration: calc(var(--td) * 3); transform: translate(0, var(--pull)); }
 @keyframes blink {
 50%, 100% {
 opacity: 0;
}
}

@media (min-width: 768px) {
.h-md-275 { height: 275px; }
.h-md-305 { height: 305px; }
}

.blog-header-logo { font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; font-size: 2.25rem; }
.blog-header-logo:hover { text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; }
.flex-auto { flex: 0 0 auto; }
.h-275 { height: 275px; }
.h-305 { height: 305px; }

.h-md-305 {box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px!important; transition-duration:.25s; transform: scale(1)}
.h-md-305:hover {box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px!important; transform: scale(1.05)!important}

.blog-pagination { margin-bottom: 4rem; }
.blog-post { margin-bottom: 4rem; }
.blog-post-meta { margin-bottom: 1.25rem; color: #727272; }

.navbar-nav .nav-link { font-size: 1.1rem; /* Larger nav items */ margin-left: 1rem;  /* Left margin between items */ }
@media (min-width: 992px) {
.navbar-align-bottom { align-items: end !important; /* Bottom align on large screens */ }
}

@media (min-width: 992px) {
  .navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }

  /* Rotate caret only on hover */
  .navbar-nav .dropdown:hover .dropdown-toggle::after {
    transform: rotate(180deg);
  }
}
.navbar-nav .dropdown-toggle::after {
  transition: transform 0.3s ease;
}