body {

}

/* Desktop View - Super Large Screens (min-width: 2560px) */
@media (max-width: 2560px) {
    .container

{
    width: 20%; /* 15%;*/
    /* background-color: dodgerblue; */
}

.mud-typography, .text-danger {
    font-size: clamp(0.9rem, 1.5vw, 1rem); /* Adjusts between .9rem and 1.5rem */
}

}

@media (max-width: 2175px) {
    .container {
        width: 25%; /* 15%;*/
        /* background-color: dodgerblue; */
    }

    .mud-typography, .text-danger {
        font-size: clamp(0.9rem, 1.5vw, 1rem); /* Adjusts between .9rem and 1.5rem */
    }
}

/* Desktop View - Large Screen 20 Inch Monitor (min-width: 1920px) */
@media (max-width: 1920px) {
    .container {
        width: 30%; /* 30%;*/
        /* background-color: gold; */
    }

    .mud-typography, .text-danger {
        font-size: clamp(0.8rem, 1.5vw, 1rem); /* Adjusts between .9rem and 1.5rem */
    }

    body {
        font-size: clamp(0.8rem, 2.5vw, 1rem); /* Adjusts between .9rem and 1.5rem */
    }
}

/* Desktop View or (Phone Landscape) (min-width: 1024px) */
@media (max-width: 1600px) {
    .container {
        width: 35%; /* 40%;*/
        /* background-color: lightcyan; */
    }

    .mud-typography, .text-danger {
        font-size: clamp(0.9rem, 1.75vw, 1rem); /* Adjusts between .9rem and 1.5rem */
    }
}

/* Desktop View or (Phone Landscape) (min-width: 1024px) */
@media (max-width: 1280px) {
    .container {
        width: 45%; /* 40%;*/
        /* background-color: limegreen; */
    }

    .mud-typography, .text-danger {
        font-size: clamp(0.9rem, 1.75vw, 1rem); /* Adjusts between .9rem and 1.5rem */
    }
}

/* Desktop View or (Phone Landscape) (min-width: 1024px) */
@media (max-width: 1024px) {
    .container {
        width: 50%; /* 40%;*/
        /* background-color: lightskyblue; */
    }

    .mud-typography, .text-danger {
        font-size: clamp(0.9rem, 1.75vw, 1rem); /* Adjusts between .9rem and 1.5rem */
    }
}

@media (max-width: 896px) {
    .container {
        width: 58%; /*80%;*/
        /* background-color: lightyellow; */
    }

    .mud-typography, .text-danger {
        font-size: clamp(1rem, 2vw, 1.1rem); /* Adjusts between .9rem and 1.5rem */
    }
}

/* Media Query for Tablets (screens up to 768px wide) */
@media (max-width: 768px) {
    .container {
        width: 70%; /*80%;*/
        /* background-color: lightcoral; */
    }

    .mud-typography, .text-danger {
        font-size: clamp(1rem, 2vw, 1.1rem); /* Adjusts between .9rem and 1.5rem */
    }
}

@media (max-width: 672px) {
    .container {
        width: 77%; /*80%;*/
        /* background-color: lightgray; */
    }

    .mud-typography, .text-danger {
        font-size: clamp(1rem, 2vw, 1.1rem); /* Adjusts between .9rem and 1.5rem */
    }
}

/* In between Phone and Tablet View 
    @@media (min-width: 577px) and (max-width: 767px) {
        .container {
            width: 80%; 
            background-color: lightslategray;
        }

        body {
            font-size: 1rem; 
        }
    }
    */

/* Media Query for Mobile Phones (screens up to 480px wide) */
@media (max-width: 576px) {
    .container {
        width: 95%;
        /* background-color: lightseagreen; */
    }

    h1 {
        font-size: clamp(1.5rem, 5vw, 3rem);
    }

    h2 {
        font-size: clamp(1.5rem, 5vw, 3rem);
    }

    p {
        font-size: clamp(0.9rem, 2.5vw, 1.2rem); /* Adjusts between 1rem and 1.5rem */
    }

    .mud-typography {
        font-size: clamp(1rem, 2.5vw, 1.2rem); /* Adjusts between .9rem and 1.5rem */
    }

    .text-danger {
        font-size: clamp(0.9rem, 2.5vw, 1.2rem); /* Adjusts between .9rem and 1.5rem */
    }

    body {
        font-size: 1.0rem; /* Base font size */
    }
}