/* 
author: Guilherme Rizzo Castanheira;
filename: times.css;
Date: October 22th;
*/

*,
*::after,
*::before{
    padding: 0rem;
    margin: 0;
    box-sizing: border-box;


}
html{ /*Defined the font size, background colour and texture */
  
    font-size: 16px;
    line-height: 1.6;
    background-color: hsla(0, 0%, 100%, 0.05);
    background-image: url("https://www.transparenttextures.com/patterns/diamond-upholstery.png");
    /*font-family: font stack required for body text */
}
h1, h2, h3, h4{

    /*font-family: font stack required for headings */
}
p{
    
}
.container{ /* Container with max-width of 1500px with flex-box. */ 
    display:flex;
    flex-direction: column;
    max-width: 1500px;
    height: auto;
}
.subnav{ 
  background-color: hsla(202, 100%, 54%, 0.43);
  padding: 1rem;
  display:flex;
  justify-content: flex-end;
  font-size: 1rem
}

.subnav a{ /* Removed the text decoration and align to the right */
   text-decoration: none;
  margin-right: 1rem;
  
}
.mainnav{ /* MainNav links spread with flex-flow and justify-contant. */
  
  padding: 1rem;
  display:flex;
  flex-flow:row wrap;
  justify-content: space-between;
  border-bottom-style: ridge;
  
  
}
.mainnav a{
  font-family: 'Open Sans', sans-serif;
  color: black;
  border: 2px;
  font-weight: lighter;
  text-decoration: none;
  font-size: 1.3rem;
  
}

.mainnav a:hover{ /* background colour with mouser coursor */
  
  background-color: hsla(202, 100%, 54%, 0.43);
  font-weight: bold;
  
}


.masthead{

}
.times-logo{
    background-color: 
    
}
.masthead h1{ /* text shadow for a better reading */ 
  padding: 1rem;  
  background-color: hsla(202, 100%, 54%, 0.43);
  text-align: center;
  font-family: 'Kreon', Arial serif;
  font-size: 3rem;
  text-shadow: 1px 2px 4px white;
  
}
  
.times-logo{ /* logo will fit its width with the page */
  display:flex;
  width: 100%;
  height: auto;
  }

}
.content{
  padding: 1rem;
  
}
.content .story{
  padding: 1rem;
  
}
.story.lead-story{ /* border and font size to make the lead-story subtly more important. */ 
  border-style: ridge;
  border-width: medium;
  border-color: hsla(202, 100%, 54%, 0.43);
  margin-top: 2rem;
  background
}

.lead-story h1.story-title { /* Story Title 1 Bigger than others */
 font-size: 3rem;
margin-top: 0rem;

}

h1.story-title{
  font-size: 2rem;
  font-family: 'Noto Serif', Arial,  serif;
  color: hsla(202, 100%, 40%, 1);
   margin: 2rem 0rem 0rem;
  
}
.story-img{ /*float image with the text */ 
  display:flex;
  float: right;
  max-width: 400px;
  min-width: inherit
  height: auto;
  padding: 1rem;
    
}
.story p{ /*story font style */
      font-family: 'Roboto', Tahoma, sans-serif;

}
.story blockquote{ /* float the blockquote, with bigger size. */
    quotes: "\201E" "\201D";
    float: right;
    font-size: 2rem;
    text-align: right;
    font-style: italic;
    padding: 1rem;
}
.story blockquote::before{
    content: open-quote;
}
.story blockquote::after{
    content: close-quote;
}
.story p.byline{ /* margin for the story byline */
    margin: 1rem 0rem;
}
p.byline span.author{ /* bold font for the author of the text */ 
  font-weight: bold;
    
}
p.byline span.pub{ /*font style for the dates */
  font-style: italic;
    
}
.foot{ /* grey background fot the footer */
    background-color: hsla(0, 0%, 13%, 0.38);
    padding: 1rem
}
.foot p{
  font-size: 1rem;
}