/* Google Fonts impoty */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Noto+Sans:wght@400;700&display=swap');

:root {
  --primary-font: 'Noto Sans';
  --secondary-font: 'Merriweather';
  --footer-clearance: 4rem;
  --panel-top: 5rem;
}

/* Global Styles */
html, body {
 background-color: #B12631;
  height: 100%;          
  margin: 0;             
  display: flex;
  flex-direction: column;
}

main {
    flex: 1;
    padding-bottom: var(--footer-clearance);
}

h1, h2 {
    font-family: var(--secondary-font);
    color: #F1C40F;
    padding-top: 0.5rem;
    text-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

h3 {
    font-family: var(--secondary-font);
    color: #F1C40F;
    text-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Main box/screen areas styling */

/* Styling for landing page box area */
#home-quiz-box-area
{
    background-color:rgba(255, 255, 255, 0.02);
    border-radius:20px;
    max-width: 800px;
    margin: auto;
    margin-top: 10rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
    margin-top: 5rem;
}


/* Styling for Instructions box */
#instruction-box-area
{
    background-color:rgba(255, 255, 255, 0.02);
    border-radius:20px;
    max-width: 800px;
    margin: auto;
    margin-top: 10rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
    margin-top: 5rem;
}

/* Styling for username input area */
#username-input-area
{
    background-color:rgba(255, 255, 255, 0.02);
    border-radius:20px;
    max-width: 800px;
    margin: auto;
    margin-top: 10rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
}

/* Styling for quiz box area */
#end-quiz-area
{
    background-color:rgba(255, 255, 255, 0.02);
    border-radius:20px;
    max-width: 800px;
    margin: auto;
    margin-top: 7rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
    position: relative;
    z-index: 1;

}

/* Styling to make end of quiz score standout */
#end-of-quiz {
    color: #151D26;
    font-size: 1.5rem;
    font-weight: bold;
}

#end-of-quiz .score-number {
    color: #F1C40F;
    font-size: 1.5rem;
    font-weight: bolder;
}

#end-of-quiz .time-left {
    color: #151D26;
    font-size: 1.5rem;
    font-weight: bold;
}

/* Styling for category selection screen */
#category-options-area
{
    background-color:rgba(255, 255, 255, 0.02);
    border-radius:20px;
    max-width: 800px;
    margin: auto;
    margin-top: 7rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
}

#category-options-area h2 {
    margin-bottom: 1rem;
}

/* Styling for quiz countdown area */
#quiz-countdown-area {
    background-color:rgba(255, 255, 255, 0.02);
    border-radius:20px;
    max-width: 800px;
    margin: auto;
    margin-top: 10rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
}

#quiz-countdown-area p {
    color: #ECF0F1;
    font-weight: bold;
}

#questions-answers-area {
    background-color:rgba(255, 255, 255, 0.02);
    border-radius:20px;
    max-width: 800px;
    margin: auto;
    margin-top: 7rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
}

/* Make timer & scoring system stand out more */
#timer {
    font-size: 1.5rem;
    font-weight: 650;
    font-family: var(--secondary-font);
}

#scoring {
    font-size: 1.5rem;
    font-weight: 650;
    font-family: var(--secondary-font);
}

#question-counter {
  display: block;            
  margin-top: .25rem;          
  text-align: center;          
  font-size: 1.5rem;
  font-weight: 650;
  font-family: var(--secondary-font);
  color: #1A252F;              
}

/* Styling for leaderbaord area */
#leaderboard-area {
    background-color:rgba(255, 255, 255, 0.02);
    border-radius:20px;
    max-width: 800px;
    margin:  3rem auto;
    margin-top: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
}

#username-input-area button {
    margin-top: 1rem;
}

/* Styling for buttons */
#end-of-quiz-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.5rem;
    margin-top: 2rem;
    gap: 1rem;
}

#action-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.5rem;
    margin-top: 2rem;
    gap: 1rem;
}

 button {
 background-color: #1A252F;
 color: #ECF0F1;
 font-family: var(--primary-font);
 font-weight: bold;
 padding: 1rem;
 border: none;
 border-radius: 20px;
 width: 200px;
 cursor: pointer;
 transition: background-color 0.5s, transform 0.2s;
}

button:hover {
 background-color: #273846;
}

/* Remove default bootsrap border for buttons */
button:focus,
button:active {
    outline: none !important;
    box-shadow: none !important;
    transform:scale(1);
}

/* Buttons for 404 Page */

a.button {
 background-color: #1A252F;
 color: #ECF0F1;
 font-family: var(--primary-font);
 font-weight: bold;
 padding: 1rem;
 border: none;
 border-radius: 20px;
 width: 200px;
 cursor: pointer;
 transition: background-color 0.5s, transform 0.2s;
 text-decoration: none; 
 display: inline-block; 
}

a.button:hover {
 background-color: #273846;
}

a.button:focus,
a.button:active {
    outline: none !important;
    box-shadow: none !important;
    transform:scale(1);
}

/* Styling for answer buttons in quiz */
#answers .answer-button {
display: block;
margin: 10px auto; 
text-align: center;  
width: 100%; 
max-width: 500px;
}

/* Additional Styling for instruction box lists */
#instruction-box-area ol  {
    list-style-position: inside;
    counter-reset: step;
    padding-left: 0;
    margin: 0 0 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#instruction-box-area li  {
  position: relative;
  font-size: 1.25rem;
  text-align: left;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 15px;
  line-height: 1.5;
  color: #ECF0F1;
  padding: 0.5rem;
}

#instruction-box-area li::marker {
    font-weight: bold;
    color: #F1C40F;
}

/* Make leaderboard list layout more attractive */
#leaderboard-area ol {
    list-style-position: inside;
    counter-reset: step;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    margin: 0 0 1.5rem 0;
    gap: 0.25rem;
}

#leaderboard-area li {
  position: relative;
  font-size: 1.25rem;
  text-align: left;
  padding: 0.5rem;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.06);
  gap: 0.5rem;
  color: #ECF0F1;
}

#leaderboard-area li::marker {
  font-weight: bold;
  color: #F1C40F; 
}

/* Spanish flag added creating a circle with columns */
.spanish-flag {
  width: 80px;  
  height: 80px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 1rem auto 0;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.stripe {
    flex: 1;
}

.stripe.red {
    background-color: #B12631;
}

.stripe.yellow {
    background-color: #F1C40F;
}

/* Remove bootsrap deafult coloring for border of input & match to color theme */
#username-input {
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 0.5rem 1rem;
}

#username-input:focus {
  outline: none;
  border: 2px solid #F1C40F;
  box-shadow: none;
}

/* Additional Styling for fireworks feature */
#fireworks-celebration {
    position: fixed;
    z-index: 2;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Added to highlight timer and correct questions during quiz */
.highlight {
color: #F1C40F;
font-weight: bold;
}

/* Fix quiz buttons from remaining selected on mobile */

.answer-button:not(.correct):not(.wrong):focus,
.answer-button:not(.correct):not(.wrong):active,
.answer-button:not(.correct):not(.wrong):focus-visible { 
  background-color: #1A252F !important;                 
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
  touch-action: manipulation;
}

button, 
.answer-button,
.category-button {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* Added for color correction on right or wrong answers */
.answer-button { 
  transition: background-color 200ms ease;          
}
.answer-button.correct { 
  background-color: #28a745 !important;              
  color: #ECF0F1 !important;                          
}
.answer-button.wrong { 
  background-color: #dc3545 !important;              
  color: #ECF0F1 !important;                          
}

/* Styling for Footer */
#footer-area {
  background-color: #B12631;
  width: 100%;
  padding: 1.5rem 0.5rem;
  box-shadow: 0 -5px 15px rgba(0,0,0,0.4);
  text-align: center;
  font-family: var(--primary-font); 
}

#footer-area .footer-icons {
display: flex;
  justify-content: center;
  gap: 5rem;
  margin: 0.5rem 0;
}

#footer-area .footer-icons a {
  color:  #ECF0F1;
  font-size: 1.5rem;
  transition: color 0.3s ease, transform 0.2s ease;
}

#footer-area .footer-icons a:hover {
  color:  #1A252F;
  transform: scale(1.2);
}
  
/* NAV Bar Area Styling */
#header-area {
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-area {
  background-color: #B12631;
  box-shadow: 0 5px 15px rgba(0,0,0,0.4);
  padding: 1rem 2rem;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin-left: auto;
}

ul.nav-links {
    z-index: 200;
}

.nav-links .nav-link {
  cursor: pointer;
  font-family: var(--primary-font);
  font-weight: bold;
  font-size: 1rem;
  color: #ECF0F1;
  text-decoration: none;
}

.nav-links .nav-link:hover {
  color: #1A252F;
}


.menu-toggle {
  all: unset;
  cursor: pointer;
  display: none;  
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 25px;
  z-index: 300;  
  background: none;
  border: none;
  padding: 0;
  margin-left: auto;
}

.menu-toggle span {
  background-color:  #ECF0F1;
  display: block;
  width: 100%;
  height: 5px;
  border-radius: 2px;
  transition: all 0.3s ease; 
  margin: 2px 0; 
}

/* Added to fix issue relalting to menu button on mobile - stays transparent */
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:active,
.menu-toggle:focus {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/*Media Queries */

/* For tablet sized screens to stop text from wrapping */
@media (max-width: 768px) {
  #home-quiz-box-area {
       padding-left: 1rem;
       padding-right: 1rem;
       max-width: 100%;
  }

  #home-quiz-box-area h1 {
       font-size: 1.50rem;
  }

  #home-quiz-box-area h2 {
      font-size: 1.30rem;
      white-space: nowrap;
  }
}

/* For mobile or smaller sized screens to stop text from wrapping */
@media (max-width: 576px) {
    #home-quiz-box-area {
         padding-left: 1rem;
         padding-right: 1rem;
         max-width: 100%;
    }

    #home-quiz-box-area h1 {
        font-size: 1.30rem;

    }
    #home-quiz-box-area h2{
        font-size: 1.20rem;
        white-space: nowrap;
    }
}

/* Make NAV Bar Responsive on mid to small screens */    
@media (max-width: 1024px) {

.nav-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}
  .menu-toggle {
    display: block;
    margin-left: auto; 
    order: 1;
  }

  ul.nav-links {
    background-color: #B12631;
    position: static;
    width: 100%;
    display: block;
    padding: 0;
    margin: 0.5rem 0 0;
    max-height: 0;
    overflow: hidden;  
    transition: max-height 200ms ease;
    text-align: right;
    order: 2;
  }

  ul.nav-links.show {
    max-height: 150px; 
  }

  ul.nav-links .nav-link {
    padding: 0.5rem 0.25rem; 
    display: block; 
  }
}

/* Hover effects for desktop only to fix bug issue on mobile */
@media (hover: hover) and (pointer: fine) {
    button:not(:disabled):hover {
        transform: scale(1.05)
    }
}

/* Disable hover and active effect on touch devices*/
@media (hover: none) and (pointer: coarse) {
    button:hover,
    button:active {
     transform: none !important;
      background-color: #1A252F !important;
    }

.answer-button:not(.correct):not(.wrong):hover,        
.answer-button:not(.correct):not(.wrong):active,      
.answer-button:not(.correct):not(.wrong):focus,          
.answer-button:not(.correct):not(.wrong):focus-visible { 
  background-color: #1A252F !important;
  outline: none !important;
  box-shadow: none !important;
  }
}