/*This code has been updated for an extra-credit opportunity to maek Project 1 better based on the feedback recieved and to make the webpage responsive. */

/*This is the general front for the whole page */
:root { 
font-family: Lusitana; 
font-weight: 100;
p {
  line-height: 1.6rem;
}
}


                            
/*Block One */
.blockone{background-color:#3D2626;}


/*Button styles */

.buttongroup {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  font-size: 1.4rem;
  padding: 2rem;
  color:#92C40B;
  background-color: #FFFEEC;
  font-weight: 400;
 margin-block-end: 3rem;
}

.miaresponse, .textlink {
  transition: all 0.3s ease-in-out;
}

.miaresponse:hover, .textlink:hover {
  color: red;
}


/*h1 style */
h1 {
  font-family:"Limelight", sans-serif;
  font-size: 7rem;
  color:red;
  text-align: center;
  padding: 1rem;
}

/*Title -> Colour style */
.co{
  color:#C710B1; 
  font-family: "Inria Serif", serif;
  font-weight: 700;
  font-style: normal;
}

.lo{
  color:#FFDC18;
  font-family: "Inria Serif", serif;
  font-weight: 700;
  font-style: normal;
}

.ur{
  color:#FF0000; 
  font-family: "Inria Serif", serif;
  font-weight: 700;
  font-style: normal;
}

/*Title -> Psychology style */
.psychology{
  color:white; 
  font-size: 4rem;
  font-family: "Inria Serif", serif;
  font-weight: 700;
  font-style: normal;
}


/*Note for Mia: The code below means all "h2" headings will be in font Limelight, each h2 is separated into three sections, and each section or "title" has a different color*/
h2 {
    font-family: "Limelight", sans-serif;
    font-size:800%;
}


/*Author's name */
.author {
  color:#92C40B; 
  font-weight: bold; 
  font-size: 1.5rem;
  padding-block-start: 3rem;
  font-family: "Inria Serif", serif;
  font-weight: 600;
  font-style: normal;
  justify-content: center;
  text-align: center;
}


/*Text one */
.intro p{
  color:white;
  font-size: 2rem;
  margin-top: 5rem;
  margin-bottom:3rem;
  line-height: 2.2rem;
  padding: 1rem;
}

  /*Text Two */
.sectionone p {
  font-size: 1.2rem;
  color:#F1FF95;
  padding: 1rem;
}

.sectionone {
    padding-block-end: 3rem;
}

 
/*Citation Box */
.citation {
  width: 100%;                 /* full-width background */
  margin: 3rem 0;
  padding: 2rem;           
  background-color: #f5f5f5;
  text-align: center;          /* center the list block */
}

.citation ol {
  /* display: inline-block;      */
  text-align: left;            
  margin: 0;
  padding-left: 2 rem;          /* indentation for numbers */
  max-width: 60rem;            /* keeps it readable */
}


/*Adding style to the first letter of each main article */

.sectionone::first-letter, .textfour::first-letter, .miasresponsearticle::first-letter {
  font-family: Homemade Apple, cursive;
  font-weight: 400;
  font-style: normal;
  font-size:200%;
  line-height: 0;
}

/*Citation list*/
ol {
    list-style-type: decimal;
    font-family: 'National park';
    font-size: 100%;
}


/*Block Two */
.blocktwo{background-color:#FFFEEC;}


.blocktwo {

.andculture {
  display: block;   
}

h2 {
  line-height: 4rem;
  font-family: "Inria Serif", serif;
  text-align: center;
  font-weight: 700;
  font-style: normal;
  padding: 1rem;
}

  h2 .colour {
  color:#C710B1; 
  font-size: 4.8rem;
  }
  
  h2 .and {
  font-size: 2rem;
  color:#000000; 
  }

  h2 .culture {
  font-size: 4.8rem;
  color:#CD5829; 
  }
  }

  .blocktwo h2 {
    padding-block-start: 4rem;
  }


/*Text Four*/
.colourandculturearticle .textfour {
  font-size: 1.2rem;
  color:#000000;
  padding: 1rem;
  padding-block-start: 2rem;
}

/*Colours paragraphs*/

.colourcontexts {
  padding: 1rem;
}

.black {
  color:#000000;
  padding-block-start: 2rem;
  font-size:4rem;
  font-weight: 600;
  color:black;
  font-family: "Anton", sans-serif; 
  font-style: normal;
}

.paragraphblack{
  font-size: 1.2rem;
  padding-block-start: 0.2rem;
  color:#000000;
}
/*-----------------------------------*/

.white{
  color: grey;
  font-family: "Bodoni Moda", serif;
  font-weight: 400;
  font-size: 4rem;
  padding-block-start: 2rem;
}

.paragraphwhite{
  font-size: 1.2rem;
  color:#000000;
  color: grey;
  padding-block-start: 0.2rem;
}
/*-----------------------------------*/

.yellow {
  color:#ceaf00;
  font-family: "Neonderthaw", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 4rem;
  padding-block-start: 2rem;
}

.paragraphyellow{
  font-size: 1.2rem;
  color:#ceaf00;
  padding-block-start: 0.2rem;
}

/*-----------------------------------*/

.green{
  color:#21881D;
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 4rem;
  padding-block-start: 2rem;
}

.paragraphgreen{
  font-size: 1.2rem;
  color:#21881D;
  padding-block-start: 0.2rem;
}

/*-----------------------------------*/

.blue{
  color:#3532DD;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 4rem;
  padding-block-start: 2rem;
  letter-spacing: 1rem;
}

.paragraphblue{
  font-size: 1.2rem;
  color:#3532DD;
  padding-block-start: 0.2rem;
}
/*-----------------------------------*/
.red{
  color:#FF0000;
  font-family: "Geologica", sans-serif;
  font-weight: 800;
  font-style:italic;
  font-size: 4rem;
  padding-block-start: 2rem;
  letter-spacing: 3rem;
}

.paragraphred{
  font-size: 1.2rem;
  color:#FF0000;         
  padding-block-start: 0.2rem;
  padding-block-end: 3rem;
}

/* Response Title */
.responsetitle{
  font-size: 4.8rem; 
  font-family: "Inria Serif", serif;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  padding: 1rem;
  color:#C710B1;
  padding-block-start: 4rem;
}

/* First paragraph in Mia's response */

/*Text Five */
.miasresponsearticle {
  font-size: 1.2rem;
  color:black;
  padding: 1rem;
  padding-block-end: 0rem;
}

.miasresponsearticle p {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

/*Quote*/

blockquote {

  font-weight: 500;
  font-size: 1.15rem;
  font-weight: 700;
  margin-block-start: 3rem;
  margin-block-end: 3rem;
  margin-inline-start: 0vw;
  margin-inline-end: 0vw;
  padding-inline-start: 9vw;
  width: 100%;
  z-index: 0;
  position: relative;
  display: flow-root;
}

  /* -----quote text style------*/

blockquote .quote, .quoteauthor {
  margin-inline-start: -1rem;
  margin-block-start: 7rem;
  line-height: 130%;
  position: relative;
  color:#D902CD;
  font-family: "Inria Serif", serif; 
  }

.quote {
  font-size: 1.5rem;
  }
    
.quoteauthor {
  margin-block-start: 2rem;
  font-weight: 600;
  font-size: 1.8rem;
  }

      /* quotation marks style */
blockquote::before {
  content: '“';
  position: absolute;
  top: -1.1rem;
  left: -0.36rem;
  font-style: normal;
  color: #D902CD;
  font-size: 12rem;
  font-family: serif;
  margin-inline-start: 1rem;
  }

blockquote::after {
  content: '”';
  position: absolute;
  bottom: -9rem;
  right: -0.05rem;
  font-style: normal;
  font-size: 12rem;
  color: #D902CD;
  font-family: serif;
  }


/* Text Six */
.textsix{
  font-size: 1.2rem;
  color:#000000;
  padding: 1rem;
  padding-block-start: 4rem;
  padding-block-end: 1rem;
}

.textsix p {
  margin-bottom: 2rem;
}


/* Question section at the end */
.question {
  padding-block-start: 0rem;
  padding-block-end: 2rem;
  p:nth-child(3) em {
    background-color: #f17d7c;
    padding: 1rem;
  }
  
  p:nth-child(5) {
  text-decoration: underline #F17D7D;
  text-decoration-thickness: 0.4rem;
  }
  }

.question p{
  padding: 1rem;
  margin-bottom: -0.5rem;
  line-height: 3rem;
  font-size: 2.5rem;
}

/*Footer*/
footer {
  text-align: center;
  justify-content: center;
}

  .credits {
    padding-block-end: 2rem;
  }

@media (min-width: 785px) {
  .intro, .sectionone, .colourandculturearticle .textfour, .colourcontexts, .miasresponsearticle, blockquote, .textsix, .citation {
    padding-inline-start: 4rem;
    padding-inline-end: 4rem;
  }

  .question {
    padding: 3rem;
  }

blockquote {
  margin-inline-start: 1rem;
  margin-inline-end: 1rem;
}

  blockquote::before {
  left: 1rem;
  }

blockquote::after {
  right: 4rem;
  }

  .buttongroup {
  gap:12rem;
}
}

body {
  overflow-x: hidden;
}

@media (min-width: 1080px) {
  .intro, .sectionone, .colourandculturearticle .textfour, .colourcontexts, .miasresponsearticle, blockquote, .textsix, .citation {
    padding-inline-start: 15rem;
    padding-inline-end: 15rem;
  }

  .question {
    padding: 14rem;
  }

blockquote {
  margin-inline-start: 1rem;
  margin-inline-end: 1rem;
}

  blockquote::before {
  left: 10rem;
  }

blockquote::after {
  right: 12rem;
  }

  .buttongroup {
  gap:40rem;
  font-size: 1.8rem;
}

.textsix {
  padding-block-end: -10rem;
}


.question {
  padding-block-start: 0rem;
  padding-block-end: 2rem;
  }

.question p{
  padding-block-end:3rem;
  padding: 1rem;
  /* margin-bottom: -0.5rem; */
  line-height: 4rem;
  font-size: 3rem;
}

h1 {
  font-size: 10rem;

  .psychology {
    font-size: 6rem;
    padding-block-start: 0.8rem;
  }
}


.intro {
  text-align: center;
}

.blocktwo {

  h2 .colour {
  font-size: 6rem;
  }
  
  h2 .and {
  font-size: 4rem;
  }

  h2 .culture {
    font-size: 6rem;
  }

  .andculture {
    padding-block-start: 1.8rem;
  }
  }

.responstitle {
  font-size: 6rem;
}
}