/* -----------------------------
   colors used
   -----------------------------
    #000000
    #020203
    #4d84c4
    #a51c30
    #f5f5f8
    #ebebeb
    #ffffff
    
    You can see the color palette (minus the white and black) at: 
    https://coolors.co/a51c30-4d84c4-020203-ebebeb-f5f5f8
*/

/* -----------------------------
   fonts used
   -----------------------------
Note that Roboto and "Roboto Condensed" are available from the linked fonts already in the HTML

font-family stack for most things:
    Roboto, Arial, sans-serif;

font-family stack for 'condensed' elements, such as hX headings, header navigation, and links in the 'Explore'  section:
    'Roboto Condensed', Arial, sans-serif;
   -----------------------------  */

/* -----------------------------
   background images used
   -----------------------------
../images/hes_shield_wordmark.svg   - This is the HES Shield and HES Wordmark
../images/campus_bridge_river.jpg   - This is the background image for the 
                                      "Explore" section
../images/arrow-right.svg    - This is the crimson arrow next to the 
                                      hypertext links in the "Explore" sections
../images/mortar-board.svg          - The "cap" in Student Success stories 'program'
../images/map-marker.svg            - The map marker in Student Success 
                                      stories 'hometown'

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

/* -----------------------------
   Styles for Body
   ----------------------------- */

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


body {
    font-family: Roboto, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* -----------------------------
   Styles for footer
   ----------------------------- */

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


footer {
   bottom: 0;
   background-color: #DAC4F7;
}

footer p {
 padding: 1rem;
 margin: 0;
}

/* -----------------------------
   Styles for header
   ----------------------------- */

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

header{
   background-color: #DAC4F7;
}

input[type=radio]:hover{
   cursor: pointer;
 }
nav{
   background-color: #F4989C;
   height: 50px;
   padding: 1rem;
}
.quizdom{
   color: black;
   text-align: center;
   font-family: 'Roboto Condensed', Arial, sans-serif;
   padding: 1rem;
   margin: 0;
   font-variant: small-caps;
}
/* -----------------------------
   Styles for header secondary nav
   ----------------------------- */

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

.secondary ul{
   list-style-type: none;
   display: inline-flex;
   float: left;
   clear:left;
}

.secondary a {
   margin: 1rem;
   text-decoration: none;
   color: black;
   font-weight: bold;
   font-family: 'Roboto Condensed', Arial, sans-serif;
}



/* -----------------------------
   Styles for "Quizzes"
   ----------------------------- */

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


.quiz{
   background-image: url("../images/salt-harvesting.jpg");
   background-repeat: no-repeat;
   /* height: 600px; */
   background-position:center;
   background-size: cover;
}
.foodquiz{
   background-image: url("../images/pizza.jpg");
   background-repeat: no-repeat;
   /* height: 600px; */
   background-position:center;
   background-size: cover;
}

.readerquiz{
   background-image: url("../images/salt-harvesting.jpg");
   background-repeat: no-repeat;
   /* height: 600px; */
   background-position:center;
   background-size: cover;
}
.quiz-description, .foodquiz-description, .personality-description, .readerquiz-description {
   font-weight: bold;
}

#questions{
   background-color: white;
   margin: 3rem;
   margin-bottom: 0;
}

#about-contact{
   background-color: white;
   margin: 3rem;
   margin-bottom: 0;
   padding: 1rem;
   height: 600px;
}

#submitButton{
  
   padding: 1rem;
}
.questions{
   margin: 1rem;
   padding: 1rem;
}
.personality{
   background-image: url("../images/umbrellas.jpg");
   background-repeat: no-repeat;
   /* height: 600px; */
   background-position:center;
   background-size: cover;
}
.personality h1, .quiz h1, .foodquiz h1, .readerquiz h1 {
   color: black;
   text-align: center;
   padding: 1rem;
   font-size: 2rem;
   font-family: 'Roboto Condensed', Arial, sans-serif;
   margin: 0;
}

.personality-description, .quiz-description, .foodquiz-description, .readerquiz-description{
   text-align: center;
   margin-left: 1rem; 
   margin-right: 1rem; 
}
#answer, #answer2{
   display: none;
}
.desc{
   margin: 1rem;
   padding: 1rem;
}
#retake{
   margin: 1rem;
}
.personality p{
   text-align: left;
}
#log{
   margin: 1rem;
   padding-top: 1rem;
   text-align: center;
   font-weight: bold;
}
.personality button, .quiz button, .foodquiz button, .readerquiz button{
   background-color: #ACECF7;
   border: none;
   color: black;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin-left: 1rem;
   cursor: pointer;
}
button[disabled] {
   opacity: 0.5;
   pointer-events: none;
 } 
.articles{
   display: flex;
   justify-content: center;
   gap: 2rem 2rem;
   flex-wrap: wrap;
   padding-bottom: 1rem;
}
.articles article{
   background-color: #ffffff;
   flex-basis: calc(33.33% - 5rem);
   padding: 0.5rem;
}
article img{
   margin-left: 1.2rem;
   margin-top: 1rem;
   height: 360px;
   width:360px;
}
article h3{
   font-family: 'Roboto Condensed', Arial, sans-serif;
   margin-left: 1.2rem;
}


article p{
   margin-left: 1.2rem;
   text-align: left;
   margin-right: 1rem;
}

/* Media Query for Tablet and Desktop Viewport */ 
@media screen and (min-width: 550px), print { 

   .personality h1, .quiz h1, .foodquiz h1, .readerquiz h1{
      color: black;
      text-align: center;
      padding: 2rem;
      /* font-size: 3rem; */
      font-family: 'Roboto Condensed', Arial, sans-serif;
      margin: 0;
      text-shadow: 1px 1px white;
   }

}