/* 
MY JOURNAL — STYLE SHEET

This file controls how your HTML LOOKS.

Don't worry if you don't understand everything yet.
Change things, experiment and see what happens! */

/*
2. BASIC SETTINGS
 */

/* This makes sizing easier to understand */

*{box-sizing: border-box;}

/* Smooth scrolling when clicking links */

html {
scroll-behavior: smooth;
}

/* The entire webpage */

body {
margin: 0;

background: #f3ead8;

color: #29231e;

/*
   Georgia gives us the old-fashioned newspaper /
   diary feeling.

   You can replace it with another font later.
*/

font-family: Georgia, "Times New Roman", serif;

line-height: 1.7;

}

/* 
3. LINKS
 */

a {

color: #743c32;

text-decoration: none;

transition: 0.2s ease;

}

/* What happens when your mouse goes over a link */

a:hover {

text-decoration: underline;

}

/* 
4. HEADER
 */

.site-header {

width: 90%;

/*
   This prevents your website from becoming
   ridiculously wide on large screens.
*/

max-width: 1100px;

margin: auto;

}

/* Small information at the very top */

.top-line {

display: flex;

justify-content: space-between;

padding: 12px 0;

border-bottom: 1px solid #8d806e;

font-size: 11px;

letter-spacing: 2px;

color: #766b5d;

}

/* 
5. WEBSITE TITLE
 */

.masthead {

text-align: center;

padding: 35px 10px 25px;

}

/* THE */

.small-heading {

margin: 0;

font-size: 13px;

letter-spacing: 6px;

}

/* MY JOURNAL */

.masthead h1 {

margin: 0;

font-size: 70px;

line-height: 1;

letter-spacing: -3px;

}

/* The sentence below your title */

.tagline {

margin-top: 15px;

font-style: italic;

color: #766b5d;

}

/* 
6. NAVIGATION BAR
 */

.navigation {

display: flex;

justify-content: center;

flex-wrap: wrap;

/*
   "double" creates the old newspaper-style
   double line.
*/

border-top: 3px double #29231e;

border-bottom: 3px double #29231e;

}

/* Each navigation button */

.navigation a {

padding: 12px 20px;

color: #29231e;

font-size: 12px;

letter-spacing: 2px;

}

/* When someone hovers over a navigation button */

.navigation a:hover {

background: #29231e;

color: #f3ead8;

text-decoration: none;

}

/* 
7. MAIN PAGE
 */

.page-container {

width: 90%;

max-width: 1100px;

margin: 45px auto;

}

/* 
8. WELCOME SECTION
 */

.intro {
  
max-width: 700px;

margin: 0 auto 50px;

text-align: center;

}

.date {

font-size: 11px;

letter-spacing: 2px;

color: #766b5d;

}

.intro h2 {

font-size: 32px;

margin: 10px 0;

}

/* 
9. FEATURED ARTICLE
 */

.featured {

border-top: 3px solid #29231e;

border-bottom: 1px solid #8d806e;

padding: 25px 0;

}

/* Little red heading such as FEATURED / JOURNAL */

.section-label {

font-size: 11px;

font-weight: bold;

letter-spacing: 3px;

color: #743c32;

margin-bottom: 12px;

}

/* Puts the article and image beside each other */

.featured-content {

display: grid;

grid-template-columns: 1.3fr 1fr;

gap: 35px;

align-items: center;

}

.featured-text h2 {

font-size: 40px;

margin: 5px 0 15px;

}

/* Featured image */

.featured-image img {

width: 100%;

max-height: 350px;

object-fit: cover;

/*
   Gives photographs a slightly vintage appearance.
*/

filter: sepia(15%);

}

/* 
10. THREE NEWSPAPER COLUMNS
 */

.columns {
  
display: grid;

grid-template-columns: repeat(3, 1fr);

border-bottom: 1px solid #8d806e;

}

.columns article {

padding: 30px;

border-right: 1px solid #8d806e;

}

/* Removes the line from the final column */

.columns article:last-child {

border-right: none;

}

.columns h3 {

font-size: 22px;

}

.currently {

padding-left: 20px;

}

/* 
11. QUOTE
 */

.quote {

text-align: center;

padding: 60px 20px;

max-width: 750px;

margin: auto;

}

.quote-mark {

font-size: 70px;

line-height: 0;

}

.quote p {

font-size: 25px;

font-style: italic;

}

.quote-author {

font-size: 11px;

letter-spacing: 3px;

}

/* 
12. DIRECTORY
 */

.directory {

border-top: 3px double #29231e;

padding-top: 30px;

}

.directory h2 {

font-size: 35px;

}

/*
The four page buttons are arranged in a grid.
*/

.directory-grid {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 12px;

}

/* Each page button */

.directory-grid a {

display: grid;

grid-template-columns: 45px 1fr;

grid-template-rows: auto auto;

padding: 20px;

border: 1px solid #8d806e;

color: #29231e;

}

/* Hover effect */

.directory-grid a:hover {

background: #e4d5bb;

text-decoration: none;

}

/* Number on the left */

.directory-grid span {

grid-row: span 2;

font-size: 25px;

color: #743c32;

}

/* Page title */

.directory-grid strong {

letter-spacing: 2px;

}

/* Small description */

.directory-grid small {

color: #766b5d;

}

/* 
13. FOOTER
 */

footer {

margin-top: 70px;

padding: 30px 20px;

border-top: 3px double #29231e;

text-align: center;

font-size: 11px;

color: #766b5d;

}

/*This section changes the layout when someone visits
your website on a small screen.
*/

@media (max-width: 700px) {

/* Hide the middle piece of information
   at the very top on phones */

.top-line span:nth-child(2) {

    display: none;

}


.top-line {

    font-size: 9px;

}


/* Smaller navigation */

.navigation a {

    padding: 10px;

    font-size: 10px;

}


/* Put the featured article above
   the image on mobile */

.featured-content {

    grid-template-columns: 1fr;

}


/* Turn the three columns into
   three vertical sections */

.columns {

    grid-template-columns: 1fr;

}


.columns article {

    border-right: none;

    border-bottom: 1px solid #8d806e;

}


/* Turn the directory into
   one column */

.directory-grid {

    grid-template-columns: 1fr;

}


/* Smaller website title */

.masthead h1 {

    font-size: 48px;

}
```

}