body {
    margin: 0;
}

/* this .page part designs all the page objects
Here all sections (hero, second and third) are objects of page but also define other properties. 
*/
.page {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero {
    background-color: rgb(18, 14, 58);
    color: white;
}
.hero-content h1{
    font-size: 55px;
    font-family: Arial, sans-serif;
    font-weight: 450;

    letter-spacing: 2px;
    color: #adacac;

    text-shadow: 0 0 20px rgba(255,255,255,0.2);
}

.second {
    background-color: rgb(18, 14, 58);
    color: black;

    display: flex;
    flex-direction: column;  /* stack vertically */
    align-items: center;     /* center horizontally */
}

.second-page-title h1 {
    font-size: 30px;
    font-family: Arial, sans-serif;
    font-weight: 450;

    letter-spacing: 2px;
    color: #adacac;

    text-shadow: 0 0 20px rgba(255,255,255,0.2);
} 

.third {
    background-color: rgb(18, 14, 58);
    color: black;

    display: flex;
    flex-direction: column;     /* stack vertically */
    justify-content: flex-start; /* start from top */
    align-items: center;        /* center horizontally */

    padding-top: 40px;          /* spacing from top */
}

.third-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.third h2{
    font-size: 45px;
    font-family: Arial, sans-serif;
    font-weight: 450;

    letter-spacing: 2px;
    color: #adacac;

    text-shadow: 0 0 20px rgba(255,255,255,0.2);
}

.slider-container {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.slider-container label {
    font-size: 18px;
    font-family: Arial, sans-serif;
    font-weight: 450;
    letter-spacing: 2px;
    color: #adacac;
    text-shadow: 0 0 20px rgba(255,255,255,0.2);
}

#timeSlider {
    width: 200;
    max-width: 80vw;
    cursor: pointer;
}

#sliderValue {
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-weight: 450;
    letter-spacing: 1px;
    color: #adacac;
    text-shadow: 0 0 20px rgba(255,255,255,0.2);
}

.map-image {
    width: 100%;          /* makes it large */
    max-width: 1000px;   /* prevents it from being TOO big */
    display: block;
    margin: 40px auto;   /* centers it horizontally */
}


.fourth {
    background-color: rgb(18, 14, 58);
    color: black;
}

.fourth h2{
    font-size: 45px;
    font-family: Arial, sans-serif;
    font-weight: 450;

    letter-spacing: 2px;
    color: #adacac;

    text-shadow: 0 0 20px rgba(255,255,255,0.2);
}

.shop-image {
    width: 40%;          /* makes it large */
    max-width: 1000px;   /* prevents it from being TOO big */
    display: block;
    margin: 40px auto;   /* centers it horizontally */
}

.shop-image:hover{
    transform: scale(1.01);
    opacity: 0.8;
}


/*
Here we define the style of the two flag buttons
*/
.choice {

    align-items: center;
    gap: 10px;     
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.choice span{
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-weight: 450;

    letter-spacing: 2px;
    color: #adacac;

    text-shadow: 0 0 20px rgba(255,255,255,0.2);
}

.choice img {
    width: 400px;
    height: auto;
    display: block;
}
/* makes the button change when we hover over it*/
.choice:hover {
    transform: scale(1.01);
    opacity: 0.8;
}
/*
When we hover over an image, a little box comes out of it with text, this handles this effect

*/
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;

    position: absolute;
    bottom: -40px; /* below the button */
    left: 50%;
    transform: translateX(-50%);

    background-color: black;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 14px;

    white-space: nowrap;

    transition: opacity 0.2s ease;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.tooltip-text::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);

    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

#map {
    width: 800px;
    height: 600px;
    margin: 20px auto;
}