:root {
            --yellow: #ffd752;
            --green: #45ff6c;
            --black:#000;
            --white:#fff;
            --pale-grey:#adadad;
            --palest-grey:#454545;
            --highlight-bg-colour:var(--green);
            --highlight-colour:var(--black);
            --touchscreen-bg:var(--black);
            --touchscreen-color:var(--white);
            --body-font:"DM Sans", sans-serif;
            --container_padding_bottom:3rem;
            --projection-bg:var(--black);
            --projection-color:var(--white);
            --projector-highlight-colour:var(--green)
        }
        
        
        .cabin-font {
            font-family: "Cabin", sans-serif;
            font-optical-sizing: auto;
            /* font-weight: <weight>; */
            font-style: normal;
            font-variation-settings:
                "wdth" 100;
        }

        html{
            height:100%;
            width:100%;
            overflow:hidden;
        }

        body {
            margin: 0;
            overflow: hidden; /* Prevent scrollbars */
            font-family: var(--body-font);
            color: white; /* Default text color */
            text-align:center;
        }

        body.projection{
            height:720px;
            width:1280px;
            position:relative;

        }
        body.projection #container{
            height:100%;
            width:100%;
            background-color: var(--projection-bg);
            color:var(----projection-color);
            padding-top:3rem;
            position:relative;
        }

        body.projection .visualisation{
            position:relative;
            height:100%;
            width:100%;
        }
        /* body.touchscreen {
             width:100%;
            height:100vh;
            background-color:black;
        } */


        /* new code */
        body.touchscreen {
            margin: 0;
            padding: 0;
            /* This is the key to preventing scrolling between pages */
            overflow: hidden; 
            font-family: var(--body-font);
            position: relative; /* Establishes a positioning context for the pages */
            width:100%;
            height:100%;
            overflow:hidden;
        }
        body.touchscreen .container{
            width:100%;
            height:100%;
        }
        /* --- Page Container Styling --- */
        .touchscreen_page_container {
            /* 1. Make it fill the entire browser viewport, always */
            width: 100%; /* 100% of the viewport width */
            height: 100%; /* 100% of the viewport height */

            /* 2. Stack all pages on top of each other */
            position: absolute;
            top: 0;
            left: 0;
            
            /* 3. Hide all pages by default */
            visibility: hidden;
            opacity: 0;

            /* 4. Add a smooth transition for fading between pages */
            /* transition: opacity 0.4s ease-in-out, visibility 0.4s; */
            /* transition:  visibility 0.4s; */

            /* Optional: Center content within the page */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color:var(--touchscreen-bg);
            justify-content:space-between;
            color:var(--touchscreen-color);
            /* padding:1rem; */

        }
        #message{
            position:absolute;
            top:1rem;
            left:1rem;
            color:var(--touchscreen-color)
        }
        button{
            font-family: var(--body-font);
        }

        /* .touchscreen_page_container{
            height:100vh;
            width:100vw;
            background-color:var(--touchscreen-bg);
            display:flex;
            justify-content:space-between;
            align-items: center;
            flex-direction:column;
            color:var(--touchscreen-color);
            padding:1rem;
            padding-top:1rem;
            
        } */

        /* --- Active Page Styling --- */
        /* This class will be added via JavaScript to the page you want to show */
        .touchscreen_page_container.active {
            /* Make the active page visible */
            visibility: visible;
            opacity: 1;
            z-index: 10; /* Ensures the active page is on top */
        }

        .flex-grow{
            display:flex;
            flex-grow:1;
            align-items:center;
            justify-content: center;
            width:100%
        }

        .space-between{
            /* justify-content: space-between!important; */
        }

    

  /* new code */

    /* projection */
    .current_question{
        color:var(--projector-highlight-colour)
    }
    /* proecjtion end */
    .interactive_title_container{
        /* position:absolute; */
        /* top:1rem; */
        /* left:1rem; */
        z-index:20;
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        width:auto;
        color:var(--white) !important;
        margin:0px!important;
        padding-left:1rem;
    }

    .interactive_title{
        font-size:4rem;
        font-weight:100;
        border-bottom: solid 1px var(--pale-grey);
        align-self:start;
        margin:0px;
        padding-left:1rem;
        padding-top:1rem;

    
    }
    .question_container{
        width:100%;
        /* color:var(--highlight-bg-colour) */
    }

    .answers_container{
        width:100%;
        flex-grow:1;
        justify-content:center;
        display:flex;
        flex-direction: column;
    }
    .answers_container p{
        /* width:100%; */
        font-size:2rem;
        color:var(--highlight-bg-colour);
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .question_text{
        font-weight:900;
    }
    .answers_list p{
        width:100%;
        font-size:2rem;
        color:var(--highlight-bg-colour)

    }

    .text-center{
        text-align:center;
    }
    .padding-bottom{
        padding-bottom: var(--container_padding_bottom);
    }

    .submission_text .adding_countdown{
        color:var(--highlight-colour);
        font-size: 5rem;
        background-color: var(--touchscreen-bg);
        box-shadow:none;
        color:var(--highlight-bg-colour);
        border:0px;


    }

    .go_button.active{
      color:var(--highlight-colour);
      background-color: var(--highlight-bg-colour);
      animation: none; /* Stop pulsing when active */

    }

    .go_button{
      background-color: var(--touchscreen-bg);
      border-radius:50%;
      width:200px;
      height:200px;
      font-weight:400;
      font-size: 3rem;
      display:flex;
      justify-content:center;
      align-items: center;
      flex-direction:column;
      color:white;
      flex-grow: 1;
      border: 1px solid var(--white);
      animation: pulse-green 2s infinite;
    }

    .question_text, .answer_text{
        font-size:32px;
        font-weight:900;
    }

    .answers_list button.active, .answers_list button:active {
        box-shadow:
            0 0 5px var(--white),      
            -10px 0 10px var(--touchscreen-bg),        
            10px 0 15px var(--touchscreen-bg);        
        background-color: var(--highlight-bg-colour);
        border:none;
        font-weight: 900;
    }
    .answers_list button.active, .answers_list button:active {
      color:var(--highlight-colour);
    }
    .answers_list{
        display:flex;
        flex-direction:column;
        align-items: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-grow: 1;
        justify-content: center;
    }
    .answers_list button {
        font-size: 1.5em;
        margin-top: 10px;
        padding: 20px;
        width: 40%;
        min-height:80px;
        display:block;
        background-color:var(--touchscreen-bg);
        color:var(--touchscreen-color);
        border: solid var(--pale-grey) 1px;
        border-radius:50px;
        transition: background-color 0.5s ease;
        font-family: var(--body-font);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .answers_list button {
        /* width: 40%; */
        min-height:80px;
        border: solid var(--pale-grey) 1px;
        border-radius:50px;
        box-shadow:none;
    }
 
    
/*  
    .grid-container.answers_list button {
      width: 50%;

    } */

    .disabled_button_message{
        position:absolute;
        top:45%;
        right: 1rem;
        z-index:20;
        color:var(--green);
        width:200px;
        transform: translate(0%, -50%);
        pointer-events: none;
        /* visibility:hidden; */
    }
    .user_testing_reference{
        position:absolute;
        top:1rem;
        right: 1rem;
        color:white;
        z-index:20;
        font-size:10px;
        pointer-events: none;

    }
    .next_page_link.disabled , .next_page_link.disabled svg path {
        color:var(--palest-grey) !important;
        stroke:var(--palest-grey) !important;
        /* pointer-events:none !important; */

    }
    .next_page_link.active , .next_page_link.active svg path {
        color:white !important;
        stroke:white!important;
        pointer-events:auto !important;

    }
    .submit_data.next_page_link{
        width:200px;
        height:200px;
        /* font-weight:400; */
        /* font-size: 3rem; */
        display:flex;
        justify-content:center;
        align-items: center;
        flex-direction:column;
        color:white;
        font-size:1.5rem !important;
        border:none;
        /* transform:translateY(-50%); */


    }
    .submit_data.next_page_link.active{
        /* transform:scale(1.2) translateY(-50%); */
        /* transition:transform linear 0.5s; */
        border-radius:50%;

        /* flex-grow: 1; */
        border: 1px solid var(--white);
        animation: pulse-green 2s infinite;

    }

    .submit_data.next_page_link.active svg path{
        animation:pulse-stroke-green 2s infinite !important;
    }
    /* .submit_data.next_page_link.active  svg path, .submit_data.next_page_link.active { */
        /* color:var(--green) !important; */
        /* stroke:var(--green) !important; */
    /* } */
   .answers_container  button.page_navigation a, .answers_container  button.page_navigation p{
      color:var(--touchscreen-color);
      text-decoration:none;
    }

    .answers_container button.page_navigation{
        border: none;
        width: auto;
        background-color:transparent;
    }

    .page_navigation_container{
        position:absolute;
        top:50%;
        left:0;
        display:flex;
        /* z-index:-1; */
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        width: 100%;
        padding-bottom:var(--container_padding_bottom);
        pointer-events:none;
   
    }
    .page_navigation_container button{
        pointer-events:auto;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        box-shadow:none;
        padding-left:1rem;
        padding-right:1rem;

        /* border:none; */
    }
    .page_navigation_container svg{
        width:50px;
        height:auto;
    }
    .page_navigation_container button, .page_navigation_container button p{

        background-color:var(--touchscreen-bg);
        color:var(--touchscreen-color);
        /* border:none; */
        width:auto;
        margin-left:20px;
        margin-right: 20px;
        font-size:1.5rem;
        display:flex;
        flex-direction:row;

    }

      .page_navigation_container button { 
            border: solid var(--pale-grey) 1px;
            border-radius:50px;
            flex-shrink:1;
            height:50px;
             /* width:200px; */

        } 
    .page_navigation_container a{
        justify-self:center;
        color:var(--touchscreen-color);
    }
   .page_navigation_container svg *{
        stroke:var(--touchscreen-color);
        color:white;
    }

    /* SVG STYLES */
    circle{
        box-shadow:0 0 50px var(--highlight-bg-colour),0 0 150px var(--highlight-bg-colour);
    }
    body.projection svg.pack_svg{
        width:100%;
        height:80%;
        font-family: var(--body-font);

    }

    .pack_parents_text{
        font-size:0.8rem;
        font-weight:300;
        fill:white
    }

    .pack_parents_text_02{
        font-size:1.2rem;
        font-weight:900;
        fill:white
    }

    .animal_icon_touchscreen{
        width:30px;
        height:30px;
        margin-right:20px;
    }
    .animal_icon_touchscreen_large{
           width:70px;
        height:70px;
    }
    .animal_icon_projector{
        /* width:50px; */
        /* height:50px; */
        position:absolute;
    }

    @media only screen and (max-width: 700px) {
        html{
            overflow:auto;
        }
        
        .answers_container p{
            margin-top:10px;
            font-size:1.2rem;
            width:100%;


        }
        .interactive_title_container{
            flex-direction: column;
        }
        .interactive_title{
            font-size:1.5rem;
        }
        .breadcrumb-item{
            width:15px !important;
            height:15px !important;
            font-size:8px !important;
        }

        .question_text{
            margin:0px;
        }

        .go_button{
            width:150px;
            height:150px;

        }
        .answers_container
            {
                width: 100%;
            }
        .answers_list button {
            font-size: 1em;
            margin-top: 5px;
            padding: 0.5rem;
            border-radius: 50px;
                        width: 90%;

        }

        .page_navigation_container button, .answers_list button {
            min-height: 8%;
            /* height: 10%; */
            padding-left:15px;
            padding-right:15px;

        }
        .page_navigation_container button, .page_navigation_container button p {
            font-size: 1rem !important;
        }
        .page_navigation_container{
            position:relative;
            display:flex;
            top:auto;
            left:auto;
            /* z-index:-1; */
            justify-content: space-between;
            flex-direction: row;
            width: 100%;
            padding-bottom:var(--container_padding_bottom);
            pointer-events:none;
    
        }
        .submit_data.next_page_link{
                width: 200px;
                height: auto !important;
                border-radius:20px !important;
                display: flex;
                font-size:1em;
                justify-content: center;
                align-items: center;
                flex-direction: row;
                margin-top:1rem;
            }

          .submit_data.next_page_link p{
                padding:0px;
                margin:0px;
            }

            .disabled_button_message{
                    position:absolute;
                    top:auto;
                    bottom:12%;
                    right: 1rem;
                    z-index:20;
                    color:var(--green);
                    text-align:right;
                    
                    width:200px;
                    transform: translate(0%, -50%);
                    /* visibility:hidden; */
            }

    }



    /* @media only screen and (max-height: 1000px) {

        .answers_list{
                display: grid;
                grid-template-columns: auto auto  !important;
        }

        .answers_list button {
            font-size: 1em;
            margin-top: 5px;
            padding: 0.5rem;
            width: 90%;
            height: 20%;f
            border-radius: 50px;
        }
    } */


/* /// breadcrumbs */
.breadcrumb {
  
    display: flex; /* Arrange items in a row */
    align-items: center; /* Vertically center the items */
    gap: 12px; /* Space between the circles */
    padding: 10px;
}

/* 2. The individual breadcrumb items (the circles) */
.breadcrumb-item {
    /* Sizing - change width and height for a different diameter */
    width: 24px;
    height: 24px;
    
    /* Inactive State Styling */
    background-color: var(--black); /* Pale grey */
    color: white; /* Darker grey text for readability */
    border:white solid 1px;
    /* Circle Shape */
    border-radius: 50%;

    /* Centering the number inside the circle */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Font styling */
    font-size: 12px;
    font-weight: normal;

    /* Smooth transition for when the class changes */
    transition: background-color 0.3s ease, color 0.3s ease;
}
 .breadcrumb-item.active {
    /* Sizing - change width and height for a different diameter */

    
    /* Inactive State Styling */
    background-color: var(--pale-grey); /* Pale grey */
    color: black; /* Darker grey text for readability */
    font-weight: bold;
}
@keyframes pulse-green {
  0% {
    /* The --green variable is #45ff6c, which is rgb(69, 255, 108) */
    box-shadow: 0 0 0 0 rgba(69, 255, 108, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(69, 255, 108, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(69, 255, 108, 0);
  }
}
@keyframes pulse-stroke-green {
  100%{
    /* The --green variable is #45ff6c, which is rgb(69, 255, 108) */
    /* stroke: rgba(69, 255, 108, 0.7); */
    stroke: rgba(255, 255, 255, 1);
  }
  0% {
    /* stroke: rgba(69, 255, 108, 0);*/
    stroke: rgba(69, 255, 108, 0.7);
  }
}