html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}

.home-page {
    background-image: url("../images/football-pitch-vertical.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding-top: 2.2rem;
}

.home-page img {
    height: 6rem;
    width: 6rem;
}

h1 {
    font-size: 3rem;
    font-weight: bolder;
    text-align: center;
    margin: 0 1rem;
    word-break: break-word;
    color: black;
}

h2 {
    font-size: 2.4rem;
    font-weight: bolder;
    text-align: center;
    margin: 0 1rem;
    word-break: break-word;
}

h3 {
    font-size: 2rem;
    font-weight: bolder;
    text-align: center;
    margin: 0 1rem;
    word-break: break-word;
    color: black;
}

a {
    height: 3rem;
    width: 7rem;
    background-color: grey;
    color: navy;
    font-size: 1.2rem;
    border: 1px solid black;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}

.instructions-body::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 0;
}

.instructions-body > * {
    position: relative;
    z-index: 1;
}

.instructions-body {
    background-image: url("../images/football-stadium.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.instructions-body p {
    font-size: 1.3rem;
    font-weight: bolder;
    text-align: center;
    margin: 0 1rem;
    word-break: break-word;
    color: black;
}

.final-score-body{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-image: url("../images/football-pitch-vertical.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.final-score {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0 1rem;
    text-align: center;
    word-break: break-word;
}

.final-score img {
    height: 10rem;
    max-width: 90%;
    margin: 1rem 0;
    object-fit: contain;
}

.final-score h2 {
    font-size: 3rem;
    font-weight: bolder;
}

.final-score h4 {
    font-size: 2.8rem;
    margin: 2rem 0 1rem;
    font-weight: bolder;
}

.final-score h5 {
    font-size: 1.8rem;
    font-weight: bolder;
}

.questions-body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.questions {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 97vh;
    justify-content: center;
    align-items: center;
    word-break: break-word;
    text-align: center;
    box-sizing: border-box;
    padding: 1rem;
    gap: 1rem;
}

.questions h2 {
    font-size: 2.5rem;
    word-break: break-word;
    margin: 0.5rem 0 ;
}

.questions h6 {
    font-size: 1.2rem;
    margin-top: 0;
}

.questions button {
    height: 2rem;
    width: 60%;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    line-height: 1;
    flex-shrink: 0;
}

.next-question {
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-self: center;
    text-align: center;
    background-color: rgb(163, 162, 162);
    height: 3rem
!important;
    padding: 0.4rem;
    font-size: 1.2rem
!important;    
} 

#you-scored,
#computer-scored {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    word-break: break-word;
    text-align: center;
    box-sizing: border-box;
    padding: 1rem;
    background-image: url("../images/football-pitch-vertical.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-weight: bolder;
    position: absolute;
    z-index: 9999;
}

#you-scored img {
    width: 100%;
    max-width: 90vw;
    height: auto;
    display: block;
    object-fit: contain;
    margin-top: 5rem;
    margin-bottom: 5rem;
}

#computer-scored img {
    width: 100%;
    max-width: 90vw;
    height: auto;
    display: block;
    object-fit: contain;
    margin-top: 5rem;
    margin-bottom: 5rem;
}

#you-scored h2 {
    background-color: rgba(255, 255, 255, 0.2);
    font-size: 3.5rem;
}

#computer-scored h2 {
    color: darkred;
    background-color: rgba(255, 255, 255, 0.2);
    font-size: 3.5rem;
}

.continue-button {
    height: 3rem;
    width: 9rem;
}

.correct-answers {
    background-color: lightgreen;
}

.wrong-answers {
    background-color: lightcoral;
}

#end-of-quiz {
    background-image: url("../images/ref-whistle.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 97vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
}

#end-of-quiz h2{
    font-size: 3.5rem;
    color: navy;
    background-color:  rgba(255, 255, 255, 0.5);
    margin-bottom: 3rem;
    text-align: center;
    margin-top: 55%;
}

#check-score {
    height: 5rem;
    width: 10rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-items: center;
}

footer {
    display: flex;
    width: 100%;
    height: 3vh;
    align-items: center;
    justify-content: center;
    background-color: darkgrey;
}

footer a {
    padding: 0;
    margin: 0;
    height: 100%;
    font-size: 0.9rem;
}

#arsenal {
    background: linear-gradient(
    to right,
     white 0%,
     white 5%,
     red 6%, 
     red 94%, 
     white 95%,
     white 100%
     );
}

#aston-villa {
    background: linear-gradient(
    to right,
     rgb(111, 159, 175) 0%,
     rgb(111, 159, 175) 5%,
     maroon 6%, 
     maroon 94%, 
     rgb(111, 159, 175) 95%,
     rgb(111, 159, 175) 100%
     );
}

#aston-villa h2,
#aston-villa h6 {
    color: antiquewhite;
}

#bournemouth {
    background: linear-gradient(
    to right,
     rgb(1, 6, 8) 0%,
     rgb(1, 6, 8) 5%,
     maroon 6%, 
     maroon 35%, 
     rgb(1, 6, 8) 36%,
     rgb(1, 6, 8) 65%,
     maroon 66%, 
     maroon 95%, 
     rgb(1, 6, 8) 96%,
     rgb(1, 6, 8) 100%
     );
}

#bournemouth h2,
#bournemouth h6 {
    color: antiquewhite;
}

#brentford {
    background: linear-gradient(
    to right,
     white 0%,
     white 5%,
     red 6%, 
     red 35%, 
     white 36%,
     white 65%,
     red 66%, 
     red 95%, 
     white 96%,
     white 100%
     );    
}

#brentford h2,
#brentford h6 {
    background-color: rgba(255, 255, 255, 0.8);
}

#brighton {
    background: linear-gradient(
    to right,
     blue 0%, 
     blue 10%, 
     white 11%,
     white 21%,
     blue 22%, 
     blue 32%, 
     white 33%,
     white 43%,
     blue 44%, 
     blue 56%, 
     white 57%,
     white 67%,
     blue 68%, 
     blue 78%, 
     white 79%,
     white 89%,
     blue 90%, 
     blue 100%
     );       
}

#brighton h2,
#brighton h6 {
    background-color: rgba(255, 255, 255, 0.8);
}

#chelsea {
    background-color: navy;
}

#chelsea h2,
#chelsea h6 {
    color: antiquewhite;
}

#crystal-palace {
    background: linear-gradient(
    to right,
     red 0%,
     red 5%,
     blue 6%, 
     blue 35%, 
     red 36%,
     red 65%,
     blue 66%, 
     blue 95%, 
     red 96%,
     red 100%
     );    
}

#crystal-palace h2,
#crystal-palace h6 {
    background-color: rgba(255, 255, 255, 0.8);
}

#everton {
    background-color: blue;
}

#everton h2,
#everton h6 {
    color: antiquewhite;
}

#fulham {
    background: linear-gradient(
    to right,
     black 0%,
     black 2%,
     white 3%, 
     white 97%, 
     black 98%,
     black 100%
     );
}

#ipswich {
    background: linear-gradient(
    to right,
     white 0%,
     white 2%,
     blue 3%, 
     blue 17%, 
     white 18%,
     white 18%,
     blue 19%, 
     blue 33%, 
     white 34%,
     white 34%,
     blue 35%, 
     blue 49%, 
     white 50%,
     white 50%,
     blue 51%, 
     blue 65%, 
     white 66%,
     white 66%,
     blue 67%, 
     blue 81%,
     white 82%,
     white 82%,
     blue 83%, 
     blue 98%,
     white 99%,
     white 100%
     );       
}

#ipswich h2,
#ipswich h6 {
    background-color: rgba(255, 255, 255, 0.8);
}

#leicester {
    background: linear-gradient(
    to right,
     white 0%,
     white 1%,
     blue 2%, 
     blue 98%, 
     white 99%,
     white 100%
     );
}

#leicester h2,
#leicester h6 {
    color: antiquewhite;
}

#liverpool {
    background: linear-gradient(
    to right,
     gold 0%,
     gold 1%,
     rgb(160, 34, 34) 2%, 
     rgb(160, 34, 34) 17%, 
     gold 18%,
     gold 18%,
     rgb(160, 34, 34) 19%, 
     rgb(160, 34, 34) 33%, 
     gold 34%,
     gold 34%,
     rgb(160, 34, 34) 35%, 
     rgb(160, 34, 34) 49%, 
     gold 50%,
     gold 50%,
     rgb(160, 34, 34) 51%, 
     rgb(160, 34, 34) 65%, 
     gold 66%,
     gold 66%,
     rgb(160, 34, 34) 67%, 
     rgb(160, 34, 34) 81%,
     gold 82%,
     gold 82%,
     rgb(160, 34, 34) 83%, 
     rgb(160, 34, 34) 98%,
     gold 99%,
     gold 100%
     );   
}

#liverpool h2,
#liverpool h6 {
    background-color: rgba(255, 255, 255, 0.8);
}

#man-city {
    background-color: skyblue;
}

#man-utd {
    background: linear-gradient(
    to right,
     white 0%,
     white 1%,
     rgb(205, 24, 24) 2%, 
     rgb(205, 24, 24) 98%, 
     white 99%,
     white 100%
     );
}

#newcastle {
    background: linear-gradient(
    to right,
     black 0%,
     black 5%,
     white 6%, 
     white 35%, 
     black 36%,
     black 65%,
     white 66%, 
     white 95%, 
     black 96%,
     black 100%
     );   
}

#newcastle h2,
#newcastle h6 {
    background-color: rgba(255, 255, 255, 0.8);
}

#nottingham-forest {
    background: linear-gradient(
    to right,
     white 0%,
     white 1%,
     red 2%, 
     red 98%, 
     white 99%,
     white 100%
     );    
}

#southampton {
    background: linear-gradient(
    to right,
     red 0%, 
     red 12%, 
     white 13%,
     white 26%,
     red 27%, 
     red 41%, 
     white 42%,
     white 55%,
     red 56%, 
     red 70%, 
     white 71%,
     white 85%,
     red 86%, 
     red 100%
     );    
}

#southampton h2,
#southampton h6 {
    background-color: rgba(255, 255, 255, 0.8);
}

#tottenham {
        background: linear-gradient(
    to right,
     rgb(29, 11, 76) 0%,
     rgb(29, 11, 76) 4%,
     white 5%, 
     white 95%, 
     rgb(29, 11, 76) 96%,
     rgb(29, 11, 76) 100%
     );
}

#west-ham {
    background: linear-gradient(
    to right,
     rgb(111, 159, 175) 0%,
     rgb(111, 159, 175) 5%,
     maroon 6%, 
     maroon 94%, 
     rgb(111, 159, 175) 95%,
     rgb(111, 159, 175) 100%
     );
}

#west-ham h2,
#west-ham h6 {
    color: antiquewhite;
}

#wolves {
    background: linear-gradient(
    to right,
     black 0%,
     black 1%,
     rgb(183, 132, 3) 2%, 
     rgb(183, 132, 3) 98%, 
     black 99%,
     black 100%
     );    
}

@media (min-width: 768px) and (max-width: 1024px) {

    h1 {
        font-size: 4rem;
    }

    h3 {
        font-size: 3rem;
    }

    a {
        height: 6rem;
        width: 12rem;
        font-size: 2rem;
    }

    .home-page img {
        height: 10rem;
        width: 10rem;
    }

    .instructions-body p {
        font-size: 1.8rem;
    }

    .questions {
        height: 95vh;
    }

    .questions h2 {
        font-size: 3.5rem;
    }

    .questions h6 {
        font-size: 1.9rem;
        max-width: 80%;
    }

    .questions button {
        height: 3.5rem;
        width: 70%;
        font-size: 1.5rem;
    }

    .next-question {
        height: 3.5rem
        !important;
        font-size: 1.8rem
        !important;
        text-align: center
        !important;
    }

    .correct-answers,
    .wrong-answers {
        font-size: 1.5rem;
    }

    #you-scored h2,
    #computer-scored h2 {
        font-size: 4rem;
    }
    
    .continue-button {
        height: 6rem;
        width: 12rem;
        font-size: 1.5rem;
    }

    footer {
        height: 5vh;
    }

    footer a {
        font-size: 1.5rem;
    }

    #end-of-quiz {
        height: 95vh;
    }

    #end-of-quiz h2{
        font-size: 4.5rem;
    }

    #check-score {
        height: 8rem;
        width: 16rem;
        font-size: 1.8rem;
    }

    .final-score img {
        height: 15rem;
        width: 90%;
    }

    .final-score h2 {
        font-size: 4.5rem;
    }

    .final-score h4 {
        font-size: 4.2rem;
    }

    .final-score h5 {
        font-size: 2.2rem;
        font-weight: bolder;
    }

}

@media (min-width: 1025px) {

    .home-page {
        background-image: url("../images/football-pitch.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 100vh;
        overflow-x: hidden;
        padding: 0;
    }

    h1 {
        font-size: 5.5rem;
    }

    h3 {
        font-size: 3.5rem;
    }

    .home-page img {
        height: 10rem;
        width: 10rem;
    }

    .questions {
        height: 95vh;
    }

    .questions h2 {
        font-size: 3rem;
    }

    .questions h6 {
        font-size: 1.6rem;
        width: 80%;
    }

    .correct-answers,
    .wrong-answers {
        font-size: 1.1rem;
        width: 60%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    footer {
        height: 5vh;
    }

    #you-scored,
    #computer-scored {
        background-image: url("../images/football-pitch.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    #you-scored img,
    #computer-scored img {
        height: 25rem;
        width: 90%;
    }

    #end-of-quiz {
        height: 95vh;
    }

    #end-of-quiz h2 {
        margin-top: 20%;
        font-size: 5rem;
    }

    .final-score-body{
        background-image: url("../images/football-pitch.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .final-score h2 {
        font-size: 5rem;
    }

    .final-score h4 {
        font-size: 4rem;
    }

    .final-score img {
        height: 17rem;
        width: 90%;
    }


}

/* --- Samsung-safe mobile fixes --- */
html {
  -webkit-text-size-adjust: 100%; /* stop Samsung/Android auto scaling */
  text-size-adjust: 100%;
}

@media (max-width: 600px) {

  /* General text */
  body {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  h3 {
    font-size: 1rem;
  }

  p {
    font-size: 0.9rem;
  }

  /* Instructions */
  .instructions-body p {
    font-size: 0.9rem;
  }

  body, .questions-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* full viewport height */
    margin: 0;
    padding: 0;
}

  /* Questions */
    .questions {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1 1 auto;          /* grow and shrink to fit */
        padding: 0.5rem;
        box-sizing: border-box;
        overflow: hidden;        /* no scrolling */
        gap: 0.5rem;
    }

    .questions h2 {
        font-size: clamp(1rem, 5vw, 1.8rem);
        margin: 0.2rem 0;
    }

    .questions h6 {
        font-size: clamp(0.8rem, 3.5vw, 1.2rem);
        margin: 0.1rem 0;
    }

    .questions button, .next-question {
        width: 85%;
        max-width: 240px;
        font-size: clamp(0.8rem, 3vw, 1rem);
        height: auto;
        padding: 0.3rem 0.5rem;
    }


  .next-question {
    font-size: 1rem !important;
    height: 2.5rem !important;
  }

  .correct-answers,
  .wrong-answers {
    font-size: 0.9rem;
  }

  /* Final score */
  .final-score h2 {
    font-size: 1.4rem;
  }

  .final-score h4 {
    font-size: 1.2rem;
  }

  .final-score h5 {
    font-size: 1rem;
  }

  .final-score img {
    max-width: 90%;
    height: auto;
  }

  /* End of quiz */
  #end-of-quiz h2 {
    font-size: 1.5rem;
    margin-top: 40%;
  }

  #check-score {
    font-size: 0.9rem;
    width: 8rem;
    height: 3rem;
  }

  /* Images */
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Buttons */
  button,
  .continue-button,
  a {
    font-size: 0.9rem;
    width: 100%;
    max-width: 280px;
    height: 2.5rem;
    margin: 0.5rem auto;
  }

  /* Footer */
    footer {
        flex-shrink: 0;   /* don’t shrink the footer */
        width: 100%;
        padding: 0.3rem;
    }

  footer a {
    font-size: 0.8rem;
  }

  .home-page {
    padding-top: 1rem;
  }

  #you-scored,
  #computer-scored {
    padding: 1rem;
  }

  #you-scored h2,
  #computer-scored h2 {
    font-size: 1.4rem;
  }
}