/* Reset margins and set a clean system font */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Page background and layout alignment */
body {
  background-color: #640071;
  color: #f8fafc;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  text-align: center;
  padding: 0;
}

/* Heading styling */
h1 {
  font-size: 2.5rem;
  margin-bottom: 12px;
  color: #38bdf8;
  text-align: center;
}

/* Paragraph styling */
p {
  font-size: 1.1rem;
  color: #94a3b8;
}

#HomeRef{
  z-index: 1000;
  position:sticky;
}

.top {
  position: relative;
  top: 30px;
  width: 100%;
  background: transparent;
}

.presenter {
  top: 58px;
  text-align: left;
  padding-left: 10%;
}

.AIimg {
  width: 100%;
  max-width: 1400px;
  height: auto;
  margin: 50px auto 0;
  display: block;
  border-radius: 30px;
}

@media (max-width: 768px) {
  .AIimg {
    width: 100%;
    border-radius:10px;
  }
}

/*#disclaimer{
  width: 100%;
  height: auto;
  margin-top: -25px;
  text-align: left;
  font-size: 1rem;
  color:#3920c5;
  padding-left: 20px
}*/


.button {
  background: transparent;
  border: none;
  color: rgb(108, 138, 23);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 36px;
  font-weight: 900;
  margin: 10px;
  cursor: pointer;
  border-radius: 12px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  transition: color 0.2s ease;
  text-decoration: none;
}

/* Your existing grid CSS */
.short-films {
  padding: 10px;
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.film {
  flex: 1 1 calc(50% - 12px);
  min-width: 0;
  max-width: 640px;
  margin: 20px auto;
}

/* Customizing the Plyr Player Theme */
.plyr {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  --plyr-color-main: #6c8a17; /* Matches your navbar green */
  --plyr-video-control-background-hover: #6c8a17;
}

/* Clean video title styling */
.film p {
  font-family: inherit;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 8px;
}

@media (max-width: 640px) {
  .film {
    flex-basis: 100%;
  }
}

#info-head{
  text-align: center;
  width: 100%;
  scroll-margin-top: 120px;
  font-size: 4rem;
  margin-top: 50px;
  border-bottom: 4px solid currentColor;
}

#short-films-head{
  text-align: center;
  width: 100%;
  scroll-margin-top: 120px;
  margin-top: 50px;
}

#milan-vp,
#curt-vp {
  margin: 0 0 12px;
  text-align: center;
  border-bottom: 4px solid currentColor;
  font-size: 1.3rem;
  color: #38bdf8;
}

#info-text {
  text-align: center;
  width: 100%;
  max-width: 70ch;
  margin: 0 auto;
  color: #94a3b8;
  white-space: pre-line;
}

@media (max-width: 768px) {
  .top {
    top: 0; 
    position: static;
  }

  .top.presenter {
    position: relative;
    top: 0;
    padding-left: 5%;
    transform: translateY(18px);
}

  
  p.top[style] {
    padding-right: 20px !important; 
    padding-top: 0px !important;
  }

  #info-text {
    margin-top: 20px; 
    padding: 0 15px;  
  }
}

#disclaimer-info{
  text-align: center;
  width: 100%;
  margin-top: 30px;
  color: #f3f5f8;
  font-size: 0.9rem;
  border: 2px solid #000000;
}

.button:hover {
  color: #a9cf1f;
}

.button:active {
  color: #cd3011;
}

.button-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color:#000000
}

/* --- MOBILE FIX (Screens under 768px) --- */
@media (max-width: 768px) {
  .button-bar {
    flex-wrap: nowrap;          /* Force buttons onto ONE single row */
    overflow-x: auto;           /* Allow side-scrolling if they exceed width */
    justify-content: flex-start;/* Align neatly from the left */
    padding: 3px 4px;
  }

  .button {
    font-size: 15.5px;            /* Drop from 36px to readable 16px */
    padding: 8px 12px;          /* Shrink giant padding */
    margin: 2px 4px;            /* Reduce margins */
    white-space: nowrap;        /* Prevent text inside buttons from breaking */
  }
}

@media (max-width: 380px) {
  .button-bar {
    padding: 3px 3px;
  }

  .button {
    font-size: 16px;
    padding: 6px 7px;
    margin: 3px 2px;
  }
}

#TitleText {
  position: static;
  width: 100%;
  text-align: center;
}

.app {
  width: 100%;
  margin-top: 175px;
  margin-bottom: 100px;
  min-height: 50vh;
  background-color: #1e293b;
  border-radius: 15px;
  padding: 20px;
}

#quiz-head {
  font-size: 2rem;
  margin-bottom: 100px;
  scroll-margin-top: 110px;
  color: #38bdf8;
  text-align: center;
}

.app h1 {
  font-size: 4rem;
  margin-bottom: 10px;
  color: #38bdf8;
  border-bottom: 4px solid currentColor;
  padding-bottom: 20px;
}

.quiz{
  padding: 20px;
  top: 50px;
}

.quiz h2 {
  font-size: 2rem;
  margin-bottom: 30px;
  color: #38bdf8;
}

.btn {
  background-color: #faf9f9; 
  border-radius: 8px;
  border: 2px solid #dbcecc;
  width: 50%;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  margin: 10px;
  color:#000000;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}
.btn:hover:not([disabled]) {
  background-color: #000000; 
  color: #ffffff;
}
.btn:disabled {
  cursor: no-drop;
}

#next-btn {
  background-color: #4c077b; 
  border-radius: 8px;
  border: 2px solid #dbcecc;
  width: 25%;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  margin: 20px auto;
  color:#ffffff;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  display: block;
}

#next-btn:hover {
  background-color: #a728f5; 
  color: #bdb6b6;
}

.correct {
  background: #0c923b; 
}
.incorrect {
  background: #d02a10; 
}

#sources-head {
  text-align: center;
  width: 100%;
  scroll-margin-top: 160px;
  margin-top: 50px;
  font-size: 2rem;
  color: #38bdf8;
  border-bottom: 4px solid currentColor;
}

#source-text {
  text-align: center;
  width: 100%;
  max-width: 70ch;
  margin: 0 auto;
  color: #94a3b8;
  white-space: pre-line;
  margin-bottom: 150px;

}

.source-link {
  color: #889093;
  text-decoration: none;
  transition: color 0.2s ease;
}
.source-link:hover{
  color: #a9cf1f;
}

#stop-image {
  position: relative;
  width: 100%;
  max-height: 400px;
  margin: 50px auto 0;
  border-radius: 30px;
  margin-bottom: 100px;
  cursor: pointer;
}


#outtake-btn {
  background-color: #4c077b; 
  border-radius: 8px;
  border: 2px solid #dbcecc;
  width: 25%;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  margin: 20px auto;
  color:#ffffff;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

#outtake-btn:hover {
  background-color: #91a50c; 
}

#outtake-btn:active {
  background-color: #9e1f0c; 
}