/* Fonts chosen using Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Mukta:wght@200;300;400;500;600;700;800&display=swap');

/* Overall default css setup */
* {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    font-family: 'Mukta', sans-serif;
    color: #000;
    background-color: #409eb7;
}

/* Header including text logo and navigation bar which is also a hamburger menu for smaller device screens */

#header-color {
    background-color: #e4e4e4;
}

#logo {
    font-family: 'Bebas Neue', cursive;
    font-size: 30px;
    letter-spacing: 1px;
    float: left;
    padding-top: 10px;
    color: #409eb7;
}

#logo:hover {
    color: #082d58;
}

#menulist {
    margin-left: auto;
}

#menulist a {
    font-size: 20px;
    color: #409eb7;
    letter-spacing: 1px;
    margin: 5px;
    font-weight: 500;  
}

#menulist a:hover {
    color: #082d58;
    font-size: 30px;
}

#menulist .active {
    color: #f2993e;
}

/* Media queries for logo and hamburger menu on smaller screens*/

@media screen and (max-width: 365px) {
    #logo {
        font-size: 24px;
    }

    .navbar-toggler {
        padding: 0.4px 0.6px;      
    }
}

/* Images */

#hero-image {
    background: url("../images/hero-image.jpg") no-repeat center center;  
    height: 800px; 
    width: 100%;
    border-radius: 5%;
    background-size: cover; 
    margin: 10px 10px 10px auto;
    border: solid 2px #FFFF00;
    padding: 0;
}

#euro-logo {
    background: url("../images/euro2020.webp") no-repeat center center;  
    height: 400px; 
    width: 100%;
    background-size: contain; 
    margin-left: 15px;
    margin-bottom: 15px;
}

#euro-trophy {
    background: url("../images/eurotrophy.webp") no-repeat center center;
    height: 400px;
    width: auto;
    background-size: cover;
    margin-bottom: 15px;
}

#quiz-image-one {
    background: url("../images/quiz-question-one.jpg") no-repeat center center;
    height: 250px;
    width: auto;
    background-size: contain;
    margin-top: 20px;
}

#quiz-image-two {
    background: url("../images/quiz-question-two.jpg") no-repeat center center;
    height: 250px;
    width: auto;
    background-size: contain;
    margin-top: 20px;
}

#quiz-image-three {
    background: url("../images/quiz-question-three.webp") no-repeat center center;
    height: 250px;
    width: auto;
    background-size: contain;
    margin-top: 20px;
}

#quiz-image-four {
    background: url("../images/quiz-question-four.jpg") no-repeat center center;
    height: 250px;
    width: auto;
    background-size: contain;
    margin-top: 20px;
}

#quiz-image-five {
    background: url("../images/quiz-question-five.jpg") no-repeat center center;
    height: 250px;
    width: auto;
    background-size: contain;
    margin-top: 20px;
}

#quiz-image-six {
    background: url("../images/quiz-question-six.png") no-repeat center center;
    height: 250px;
    width: auto;
    background-size: contain;
    margin-top: 20px;
}

/* Media queries for euro logo image on bigger screen sizes */

@media screen and (min-width: 768px) {
    #euro-logo {
        margin: 15px;
        height: 350px;
    }
}

/* Media queries for hero image on smaller screen sizes */

@media screen and (max-width: 767px) {
    #hero-image {
        height: 400px; 
    }
}

@media screen and (min-width: 768px) and (max-width: 1400px) {
    #hero-image {
        height: 1000px; 
    }
}

/* Media queries for euro logo image on smaller and screen sizes */

@media screen and (max-width: 375px) {
    #euro-logo {
        height: 300px;
    }
}

/* Media queries for euro trophy image on bigger screen sizes */

@media screen and (min-width: 768px) and (max-width: 850px) {
    #euro-trophy {
        height: 700px;
        margin-top: 25px;
    }
}

@media screen and (min-width: 851px) and (max-width: 992px) {
    #euro-trophy {
        height: 600px;
        margin-top: 20px;
    }
}

@media screen and (min-width: 993px) and (max-width: 1200px) {
    #euro-trophy {
        height: 500px;
        margin-top: 20px;
    }
}

/* Media queries for quiz image one on smaller screen sizes */

@media screen and (max-width: 375px) {
    #quiz-image-one, #quiz-image-two, #quiz-image-three #quiz-image-four, #quiz-image-five, #quiz-image-six {
        height: 180px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
    #quiz-image-one, #quiz-image-two, #quiz-image-three #quiz-image-four, #quiz-image-five, #quiz-image-six {
        margin-top: 50px;
    }
}

/* Timeline */

.timeline-title {
    color: #082d58;
    font-size: 20px;
    text-align: left;
}

.timeline-item {
    padding: 4em 1em 0em;
    position: relative;
    border-left: 1px solid #082d58 ;
    text-align: center;
}

.timeline-item p {
    padding: 0;
    margin: 0;
    color: #082d58;
}

.timeline-link {
    text-decoration: none;
    text-align: left;
}

.timeline-item p:hover {
    color: #FFFF00;  
}

.timeline-item::before {
    content: attr(data-dates);
    position: absolute;
    left: 1.6em;
    top: 1.5em;
    display: block;
    font-family: 'Mukta', sans-serif;
    font-weight: 400;
    font-size: 18px;
    padding: 0;
    margin: 0;
    color: #082d58;
}

.timeline-item::after {
    width: 12px;
    height: 12px;
    display: block;
    top: 2.4em;
    position: absolute;
    left: -6px;
    border-radius: 12px;
    content: '';
    background: #082d58;
}

/* Media queries for timeline for smaller screen sizes*/

@media screen and (max-width: 767px) and (min-width: 343px) {
    .timeline-item p {
        font-size: 20px;
    }   
}

@media screen and (max-width: 365px) {
    .timeline-title {
        font-size: 18px;
    }
}

/* Headers */

.sub-header {
    color: #082d58;
    padding-top: 100px;
    text-align: center;
}

.host-sub-header {
    color: #082d58;
    padding-bottom: 20px;
}

/* Paragraphs and Ordered List */

.para-content, .ol-content {
    color: #082d58;
}

/* Buttons */

#outer-find-out-more-btn, #outer-feedback-btn {
    padding-top: 20px;
}


#outer-find-out-more-btn, #outer-quiz-btn, #outer-feedback-btn {
    text-align: center;
}

#outer-submit-answers-btn {
    padding-top: 0px;
    text-align: center;
}

#outer-results-btn, #outer-answers-btn, #try-again-btn {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: center;
}

/* Media queries for screen sizes up to 1300px */
@media screen and (max-width: 1300px) {
    #outer-results-btn, #outer-answers-btn, #try-again-btn {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

#outer-submit-feedback-btn {
    text-align: center;
}

#submit-feedback-btn {
    margin-top: 20px;
}

#find-out-more-btn, #quiz-btn, #submit-feedback-btn {
    background-color: #082d58;
    border-radius: 20px; 
    width: 200px;
    height: 40px;
}

#feedback-btn {
    color:#409eb7;
    background-color: #082d58;
    border-radius: 20px; 
    width: 250px;
    height: 40px;
    padding: 7px 60px;
}

#submit-answers-btn {
    background-color: #f2993e;
    color: #082d58;
    border-radius: 20px;
    width: 300px;
    height: 50px;
    font-size: 25px;
    text-transform: uppercase;
}

.hide-btn {
    display: none;
    margin: auto;
}

.results-btn {
    background-color: #f2993e;
    color: #082d58;
    border-radius: 20px;
    width: 300px;
    height: 50px;
    font-size: 25px;
    text-transform: uppercase;
}

.answers-btn {
    background-color: #e4e4e4;
    color: #082d58;
    border-radius: 20px;
    width: 300px;
    height: 50px;
    font-size: 25px;
    text-transform: uppercase;
    padding: 5px 80px;
}

.try-again-btn {
    background-color: #e4e4e4;
    color: #082d58;
    border-radius: 20px;
    width: 300px;
    height: 50px;
    font-size: 25px;
    text-transform: uppercase;
    padding-top: 5px;
}

/* Media queries for small mobile screen sizes - padding to align text inside buttons */
@media screen and (max-width: 320px) {
    .try-again-btn, .answers-btn {
        padding-top: 10px;
    }
}

.answers-btn:hover, .try-again-btn:hover {
    background-color: #FFFF00;   
}

/* Buttons at the bottom of the quiz adjusted in size on very small mobile screen sizes */
@media screen and (max-width: 320px) {
    .results-btn, .answers-btn, .try-again-btn, #submit-answers-btn {
        width: 250px;
        font-size: 20px;
    }
}

.btn-color {
    color: #409eb7;
}

.btn-color:hover {
    color: #082d58;
}

#find-out-more-btn:hover, #quiz-btn:hover, #feedback-btn:hover, #submit-answers-btn:hover, 
#submit-feedback-btn:hover {
    background-color: #FFFF00;
    color: #082d58;
}

.outer-quiz-btn, .clue-btn, .outer-answers-btn {
    padding-top: 20px;
    text-align: center;
}

.quiz-btn {
    background-color: #082d58;
    border-radius: 20px; 
    width: 250px;
    height: 40px;
    color: #409eb7;
} 

.quiz-btn-correct {
    background-color: #f2993e;
    color: #082d58;
}

.quiz-btn-incorrect {
    background-color: #e4e4e4;
    color: #082d58;
}

.correct-answers-btn {
    background-color: #f2993e;
    border-radius: 20px; 
    width: 250px;
    height: 40px;
    color: #082d58;
    margin-top: 50px;
} 

/* Media Clip */

#media-clip {
    border: solid 2px #FFFF00;
    padding: 0;
}

/* Google map API key used - AIzaSyAQda9xmJ0kfmy2w5QsV2WTol9pY-iTWxo sourced from Google Maps Cloud Platform*/

#map2020 {
    height: 400px;
    width: auto;
    border: solid 2px #FFFF00;
    margin-left: 10px;
    margin-bottom: 15px;
}

/* Quiz */

.quiz-question {
    color: #e4e4e4;
    text-align: center;
    padding-bottom: 20px;
}

.quiz-center {
    color: #082d58;
    text-align: center;
}

.underline {
    text-decoration: none;
}

/* Feedback form */

textarea {
    height: 250px;
}

#form-header {
    margin-bottom: 30px;
}

.form-control {
    border: 1px solid #FFFF00;
    border-radius: 1rem;
    background-color: #e4e4e4;
    color: #082d58
}

/* Media query giving margin on smaller screen sizes between the name and email text boxes in the contact form */
@media screen and (max-width: 767px) {
    #email-box {
        margin-top: 20px;
    }
}

/* Footer */

footer {
    margin: 20px;
    padding: 0 0 10px 0;
}

.icon-balls {
    background-color: #e4e4e4;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    padding: 10px;
    margin: 30px 5px 10px auto;
    display: inline-block;
}

.icons, a {
    text-align: center;
    color: #082d58;
}

.icon-balls:hover {
    background-color: #FFFF00;
}

.copyright {
    margin-right: 10px;
    padding-top: 10px;
    color: #082d58;
    text-align: center;
    font-size: 20px;
}

/* Media queries for copright text in footer for small screen sizes */

@media screen and (max-width: 300px) {
    .copyright {
        font-size: 15px;
    }
}

/* Media queries for being screen sizes at 2000px and above */

@media screen and (min-width: 2000px) {
    #logo {
        font-size: 60px;
    }

    #menulist a {
        font-size: 40px;  
    }

    .sub-header {
        padding-top: 200px;
        padding-bottom: 50px;
        font-size: 56px;
    }

    #hero-image {
        height: 1600px; 
    }

    .timeline-title, .host-sub-header, .quiz-question, .quiz-center {
        font-size: 40px;
    }

    .timeline-item {
        font-size: 28px;
    }
    
    .timeline-item p {
        font-size: 28px;
    }

    .timeline-item::before {
        font-size: 28px;
    }

    #quiz-btn, #feedback-btn, #find-out-more-btn, .quiz-btn, .correct-answers-btn {
        width: 450px;
        height: 60px;
        border-radius: 40px;
    }

    .quiz-btn, .correct-answers-btn {
        font-size: 32px;
    }

    .btn-color {
        font-size: 32px;
    }

    .nav-link {
        padding: 0px;
    }

    #euro-logo, #euro-trophy, #media-clip, #map2020 { 
        height: 800px; 
    }

    .para-content, .ol-content {
        font-size: 32px;
    }

    .outer-quiz-btn, .clue-btn, .outer-answers-btn {
        padding-top: 32px;
    }

    #submit-answers-btn, .results-btn, .answers-btn, .try-again-btn {
        border-radius: 50px;
        width: 600px;
        height: 80px;
        font-size: 50px;
    }

    #outer-answers-btn, #try-again-btn {
        padding: 20px;
    }

    #quiz-image-one, #quiz-image-two, #quiz-image-three, #quiz-image-four, #quiz-image-five, #quiz-image-six {
        height: 500px;
    }

    #submit-feedback-btn {
        font-size: 32px;
        border-radius: 40px;
        width: 500px;
        height: 80px;
    }

    textarea {
        height: 700px;
    }
    
    #form-header {
        margin-bottom: 60px;
    }

    .form-control {
        font-size: 2rem;
    }

    .icon-balls {
        height: 70px;
        width: 70px;
        margin: 50px 10px 20px auto;
    }

    .icons, a {
       font-size: 35px;
    }

    .copyright {
        font-size: 40px;
    }
}

/* End of CSS */