/* CSS HEX 
--alice-blue: #def0f8ff;
--aero: #2fb8daff;
--prussian-blue: #023047ff;
--selective-yellow: #ffb703ff;
--ut-orange: #fb8500ff;
*/

:root {
    --bg: #def0f8ff;
    --text:#023047ff;
    --title:#ffb703ff;
    --subtitle:#2fb8daff;
    --accent:#fb8500ff;
    }

@font-face {
    font-family: "chunkFivePrint";
    src: url(/fonts/chunkFivePrint.ttf) format('truetype');
}

@font-face {
    font-family: "EBGaramond-SC12";
    src: url(/fonts/EBGaramondSC12-Regular.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: "Raleway";
    src: url(/fonts/Raleway-Regular.ttf) format('truetype');
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: "Raleway";
    src: url(/fonts/Raleway-Light.ttf) format('truetype');
    font-display: swap;
    font-weight: 300;
}

@font-face {
    font-family: "Raleway";
    src: url(/fonts/Raleway-Bold.ttf) format('truetype');
    font-display: swap;
    font-weight: 700;
}

strong {
    font-weight: 700;
}

html, body, * {
    margin: 0;
    padding: 0; 
    box-sizing: border-box;
}

body {
    font-family: Raleway;
    font-weight: 300;
    color: var(--text);
    background-color: var(--bg);
}

h1 {
    font-family: chunkFivePrint;
    font-size: 3.5rem;
    color: var(--title);
    text-shadow: 2px 2px 4px var(--subtitle) ;
    margin: 0;
}

h2,h3,h4 {
    font-family: Raleway;
    font-weight: 700;
}

h2 {
    color: var(--title);
}

a h2:hover {
    color: var(--subtitle)
}

h3,h4 {
    color: var(--subtitle);
}

a h3:hover {
    color: var(--accent);
}

.subtitle {
    font-family: EBGaramond-SC12;
    color: var(--subtitle);
    margin-top: 0;
    font-size: 1.5rem;
}

span {
    color: var(--accent);
}

ul {
    list-style: none;
}

.nav-container li a {
    text-decoration: none;
    padding: 1rem 2rem;
    font-weight: 400;
}

li a {
    color: var(--subtitle);
}

li a:hover {
    color: var(--accent);
}

article a {
    text-decoration: none;
    color: var(--accent);
}

.border {
    border: 0.8rem double var(--subtitle);
    border-radius: 1.5rem;
    padding: 0.5em;
}

.img-thumb {
    max-width: 75%;
    height: auto;
    clip-path: circle(50%);
}

/* Fixed square display for incoming 1200px square images */
.img-post,
.img-feature,
.img-recent {
  width: 250px;               /* desired square size on desktop */
  height: 250px;
  object-fit: cover;          /* crop to fit square without distortion */
  flex: 0 0 250px;           /* don't shrink/grow in flex layout */
  float: left;               /* allow text to wrap on the right */
  margin: 0 1rem 1rem 0;     /* spacing: right & bottom gaps */
  border: 2px solid var(--title);
  border-radius: 0.5rem;
}

.img-feature {
    width: 400px;
    height: auto;
    border-radius: 1rem;
}

/* Support choosing a right-aligned image if author adds a class */
.img-right {
  float: right;
  margin: 0 0 1rem 1rem;
}

/* Ensure media-block uses normal flow so float wrapping works */
.media-block {
  display: block;            /* allow floats to be used inside */
  overflow: visible;
  clear: both;               /* prevents previous floats from colliding */
}

/* When image and paragraph are siblings, allow paragraph text to wrap */
.media-block img + .post-content,
.media-block .post-content + img {
  display: block;
}


/****** LAYOUT *******/

.container {
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    justify-content: space-between;
    align-items: stretch;
}

header, footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.nav-container {
    display: flex;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.centerpage {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

main {
    flex-basis: 75%;
    border: 1px red solid;
    display: flex;
    flex-direction: column;
    margin-right: 0.5em;
}

aside {
    flex-basis: 25%;
    border: 1px red solid;
    text-align: center;
    line-height: 1.5;
}

.img-recent {
    max-width: 200px;
    height: auto;
    border-radius: 0.5rem;
}


.article-feature {
    display: flex;
    padding: 0.5rem;
}

.article-recent {
    display: flex;
    padding: 0.5rem;
}

.article-current {
    padding: 0.5rem;
}

.post-title {
    margin-bottom: 0.5rem;
    text-shadow: 1px 1px 2px var(--subtitle) ;
    font-family: EBGaramond-SC12;
    font-size: 2rem;
    font-weight: 900;
}



.recent-text {
    margin-left: 1rem;
}

.post-content {
    margin-bottom: 1.5rem;
    letter-spacing: 0.1em;
    line-height: 1.5rem;
    flex: 1;
}



    /* ========= RESPONSIVE ========*/

@media screen and (max-width: 600px) {
    .centerpage {
        flex-direction: column;
    }

    header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    main, aside {
        flex-basis: 100%;
        margin-right: 0;
        margin-bottom: 1em;
    }

    .img-post,
    .img-feature {
        max-width: 100%;
        height: auto;
    }

    .media-block {
        flex-direction: column;
        align-items: center;
    }
}