@font-face {

    font-family: 'ComicSansMS';

    src: url('/fonts-sigmakids/Ldfcomicsans.woff2') format('woff2'),

         url('/fonts-sigmakids/Ldfcomicsans.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-family: 'ComicSansMS';

    src: url('/fonts-sigmakids/Ldfcomicsansbold.woff2') format('woff2'),

         url('/fonts-sigmakids/Ldfcomicsansbold.woff') format('woff');

    font-weight: bold;

    font-style: normal;

}



@font-face {

    font-family: 'ComicSansMS';

    src: url('/fonts-sigmakids/Ldfcomicsanshairline.woff2') format('woff2'),

         url('/fonts-sigmakids/Ldfcomicsanshairline.woff') format('woff');

    font-weight: 100;

    font-style: normal;

}



@font-face {

    font-family: 'ComicSansMS';

    src: url('/fonts-sigmakids/Ldfcomicsanslight.woff2') format('woff2'),

         url('/fonts-sigmakids/Ldfcomicsanslight.woff') format('woff');

    font-weight: 300;

    font-style: normal;

}

    /* General Styling */

    .tick-tock-tracker {

        font-family: 'Comic Sans MS';

        text-align: center;

        padding: 20px;

        background-color: #fff;

        border-radius: 15px;

        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

        max-width: 500px;

        margin: 0 auto;

        box-shadow: inset 3px 3px 10px rgba(0, 0, 0, 0.5);

    }



        .tick-tock-tracker h1 {

            font-size: 2.5rem;

            color: #ff6f61;

            margin-bottom: 20px;

        }



        .tick-tock-tracker label {

            font-size: 1.2rem;

            color: #333;

            display: block;

            margin-bottom: 10px;

        }



        /* 3D Slider Styling */

        .tick-tock-tracker input[type="range"] {

            width: 80%;

            margin: 20px 0;

            -webkit-appearance: none;

            appearance: none;

            background: #03ff46;

            height: 10px;

            border-radius: 5px;

            outline: none;

            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);

            box-shadow: inset 3px 3px 10px rgba(0, 0, 0, 0.3);



        }



            .tick-tock-tracker input[type="range"]::-webkit-slider-thumb {

                -webkit-appearance: none;

                appearance: none;

                width: 25px;

                height: 25px;

                background: #ff6f61;

                border-radius: 50%;

                cursor: pointer;

                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);

                border: 2px solid #fff;

                box-shadow: inset 3px 3px 10px rgba(0, 0, 0, 0.3);

            }



            .tick-tock-tracker input[type="range"]::-moz-range-thumb {

                width: 25px;

                height: 25px;

                background: #ff6f61;

                border-radius: 50%;

                cursor: pointer;

                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);

                border: 2px solid #fff;

            }



        /* Results Container */

        .tick-tock-tracker .results-container {

            margin-top: 20px;

            padding: 15px;

            background-color: #e3f2fd; /* Light blue background */

            border: 8px solid #64b5f6; /* Blue border */

            border-radius: 25px;

            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow for 3D effect */

        }



        .tick-tock-tracker .results {

            font-size: 1.2rem;

            color: #333;

        }



            .tick-tock-tracker .results span {

                font-weight: bold;

                color: #ff6f61;

            }



        /* Fun Comparisons Container */

        .tick-tock-tracker .fun-comparisons-container {

            margin-top: 30px;

            padding: 15px;

            background-color: #f1f8e9; /* Light green background */

            border: 6px solid #81c784; /* Green border */

            border-radius: 10px;

            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow for 3D effect */

        }



        .tick-tock-tracker .fun-comparisons-container span {

                            font-weight: bold;

                color: #ff6f61;

        }

        .tick-tock-tracker .fun-comparisons {

            font-size: 1.1rem;

            color: #555;

            text-align:left;

        }



            .tick-tock-tracker .fun-comparisons p {

                margin: 10px 0;

            }



        .tick-tock-tracker .icon {

            font-size: 1.5rem;

            margin-right: 10px;

        }

  /* ===== Responsive Styles for Mobile Devices ===== */

@media (max-width: 600px) {

    .tick-tock-tracker {

        font-family: 'ComicSansMS';

        padding: 5px;

        max-width: 90%;

    }



        .tick-tock-tracker h1 {

            font-size: 2rem;

        }



        .tick-tock-tracker label {

            font-size: 1rem;

        }



        .tick-tock-tracker input[type="range"] {

            width: 100%;

        }



        .tick-tock-tracker .results {

            font-size: 1rem;

        }



        .tick-tock-tracker .fun-comparisons {

            font-size: 1rem;

        }



        .tick-tock-tracker .results-container,

        .tick-tock-tracker .fun-comparisons-container {

            padding: 10px;

        }



        .tick-tock-tracker .icon {

            font-size: 1.2rem;

        }

}