/*
Theme Name: DigitalEagle
Author: Stephen Phillips
Author URI: http://stephen.digitaleagle.net
Description: My personal theme for digitaleagle.net
Version: 0.1
*/

:root {
--primary: #2D75FF;
--primary-dark: #1A5CD8;
--secondary: #FF6B6B;
--dark: #1E2A47;
--light: #F7F9FC;
--gray: #6C757D;
--transition: all 0.3s ease;
}

h1.post-title {
    font-size: 65px;
}
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: var(--dark);
    background-color: var(--gray);
    /* overflow-x: hidden; */
}
.header {
    background-color: var(--light);
}

div.nav-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 1em;
}
div.nav-bar-main {
    flex-grow: 1;
}
div.nav-bar-main::after {
    background: linear-gradient(to right, var(--primary) 17.85%, var(--primary-dark) 53.28%, var(--secondary) 100%);
    display: block;
    content: "";
    height: 6px;
    width: 100%;
    border-radius: 1em;
}
div.nav-bar-content {
    display: flex;
    flex-direction: row;
    align-items: center;
}
div.nav-bar-spacer-left {
    flex-grow: 3;
}
div.nav-bar-spacer-right {
    flex-grow: 1;
}
div.nav-bar-title-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}
span.nav-bar-title {
    font-size: 20px;
    white-space: nowrap;
}
span.nav-bar-subtitle {
    line-height: 10px;
    white-space: nowrap;
}
.nav-bar-divider {
    font-size: 1.5em;
    padding-left: 1.25em;
}
#menu-top-bar-menu {
    display: flex;
    flex-direction: row;
    list-style-type: none;
}
#menu-top-bar-menu li {
    display: flex;
    align-items: center;
}
#menu-top-bar-menu li:not(:last-child)::after {
    display: inline;
    content: "/";
    font-size: 1.5em;
    padding-left: 1.25em;
    padding-right: 1.25em;
}
#menu-top-bar-menu a,
#menu-top-bar-menu a:visited {
    color: var(--primary-dark);
}
#menu-top-bar-menu a:hover {
    color: var(--secondary);
}

.post-title-row {
    display: flex;
    flex-direction: row;
    background: linear-gradient(to right, var(--primary), var(--primary-dark));
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}
.post-title-cell a,
.post-title-cell a:visited {
    color: var(--light);
    text-decoration-line: underline;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.5em;
}

.post-attr-box {
    display: flex;
    align-items: end;
    color: white;
    padding: 1em;
}


.main-content-row {
    display: flex;
    flex-direction: row;
}
.main-content-container {
    max-width: 800px;
    background-color: var(--light);
    padding: 3em;
    flex-grow: 1;
}
.sidebar {
    flex-grow: 1;
}


.bg-transition-left {
    background: linear-gradient(to right, var(--gray), var(--light));
    width: 1em;
}
.bg-transition-right {
    background: linear-gradient(to right, var(--light), var(--gray));
    width: 1em;
}

/* --------------------
     Front Page
   -------------------- */
.flyin {
    font-size: 90px;
    white-space: nowrap;
    color: var(--secondary);
    writing-mode: vertical-lr;
    /* transform: rotate(-90deg); */
    position: absolute;
    left: 300px;
    top: 230px;
    animation: fadeIn 2s ease-out forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0; /* Start invisible */
    transform: translateY(-20px); /* Start slightly below final position */
  }
  to {
    opacity: 1; /* End visible */
    transform: translateY(0); /* End in final position */
  }
}
.gutter {
    flex-grow: 1;
}
.content-feature-row {
    display: flex;
    flex-direction: row;
}
.content-feature {
    flex-grow: 1;
    background-color: var(--light);
    max-width: 1000px;
    display: flex;
    box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
    padding: 2em;
}
.content-feature h3 {
    color: var(--secondary);
}
.content-column {
    display: flex;
    flex-direction: column;
}
.content-recent-box {
    background-color: var(--light);
    position: relative;
    left: -5em;
    top: 1em;
    padding: 1em;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}
div.recent-post img {
    float: left;
    padding-right: .5em;
    padding-top: .3em;
}
div.recent-post:not(:last-child) {
    border-bottom: var(--dark) solid 1px;
    padding-bottom: .5em;
    margin-bottom: .5em;
}
.content-column-spacer {
    height: 2em;
}
.content-recent-box a,
.content-recent-box a:visited,
.post-card a,
.post-card a:visited {
    color: var(--primary-dark);
    text-decoration-line: underline;
}
div.post-card {
    background-color: var(--light);
    display: inline-block;
    width: 300px;
    height: 150px;
    margin-bottom: 2em;
    margin-right: .5em;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.75);
    padding: 1em;
    text-align: center;
}
.post-list {
    margin-top: 2em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}