.code-container {
            font-family: 'Courier New', monospace;
            background-color: #282c34;
            color: #abb2bf;
            font-size: 16px;
            padding: 20px;
            border-radius: 5px;
            overflow-x: auto;
            white-space: pre;
            tab-size: 4;
        }
        .selector {
            color: #c678dd;
        }
        .property {
            color: #56b6c2;
        }
        .value {
            color: #98c379;
        }
        .punctuation {
            color: #abb2bf;
        }
        .comment {
            color: #5c6370;
            font-style: italic;
        }
        h1 {
            color: #333;
        }
        /* Accordion */
            .accordion-item {
                background-color: transparent;
                margin-bottom: 5px;
            }
            .accordion-header {
                padding: 10px;
                cursor: pointer;
                background-color: transparent;
                border: none;
                text-align: left;
                width: 100%;
            }
            .accordion-content {
                display: none;
                padding: 10px;
                background-color: white;
            }
            .accordion-item.active .accordion-content {
                display: block;
            }
            
            /* For RWD display purposes only */
            .roww{
                display: flex;
            }

            .cols-1,.cols-2,.cols-3,.cols-4,.cols-5,.cols-6,.cols-7,.cols-8,.cols-9,.cols-10,.cols-11,.cols-12 
            {padding: 10px}
            .cols-1 {width: 8.33%;}
            .cols-2 {width: 16.66%;}
            .cols-3 {width: 25%;}
            .cols-4 {width: 33.33%;}
            .cols-5 {width: 41.66%;}
            .cols-6 {width: 50%;}
            .cols-7 {width: 58.33%;}
            .cols-8 {width: 66.66%;}
            .cols-9 {width: 75%;}
            .cols-10 {width: 83.33%;}
            .cols-11 {width: 91.66%;}
            .cols-12 {width: 100%;}

/* font family class CSS */

        .fontFamily-container {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 25px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .fontFamily-title {
            color: mediumslateblue;
            margin-bottom: 10px;
            font-size: 1.1rem;
            font-family: f219;
        }
        
        .fontFamily-text {
            font-size: 1.2rem;
            padding: 10px;
            background-color: mediumslateblue;
            border-radius: 4px;
            color: white;
        }

/* fontWeight CSS */

        .fontWeight-container {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .fontWeight-text {
            font-size: 1.2rem;
            padding: 8px 0;
        }
        
        .weight-value {
            display: inline-block;
            width: 80px;
            color: mediumslateblue;
            font-size: 0.9rem;
        }
        /*  */
        .fontStyle-container {
            background-color: white;
            border-radius: 8px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .fontStyle-title {
            font-size: 1.1rem;
            color: #444;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 1px solid #eee;
        }
        
        .fontStyle-text {
            font-size: 1.3rem;
            margin: 15px 0;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 4px;
        }
        
        .fontStylecode {
            font-family: 'Courier New', monospace;
            background-color: #f0f0f0;
            padding: 2px 4px;
            border-radius: 3px;
            font-size: 0.9em;
        }
        
/* Your font style classes */
        .font-italic { font-style: italic; }
        .font-oblique { font-style: oblique; }
        .font-normal { font-style: normal; }
        
        .comparison {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 20px;
        }
        
        .comparison-item {
            padding: 15px;
            background-color: white;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
/* Text Decorations CSS */
        .textDecoration-box {
            margin: 15px 0;
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 4px;
        }
        .textDecoration label {
            font-weight: bold;
            color: #666;
            margin-bottom: 5px;
        }
/* Text Alignment */

        .textAlignmentClasses-box {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        .textAlignmentClasses-box p {
            margin: 10px 0;
        }
        .textAlignmentClasseslabel {
            display: inline-block;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
            padding: 3px 8px;
            background-color: #e0e0e0;
            border-radius: 3px;
        }
        .textAlignmentClassesContainer {
            border: 1px dashed #aaa;
            padding: 10px;
            margin-top: 5px;
        }
/* textOverflow */
        .textOverflow-container {
            margin: 20px 0;
        }
        .textOverflowbox {
            width: 250px;
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px 0;
            /* background-color: #f9f9f9; */
        }
        .textOverflowlabel {
            font-weight: bold;
            margin-bottom: 5px;
            color: #333;
        }
        .textOverflownote {
            font-size: 0.8em;
            color: #666;
            font-style: italic;
        }

/* Text overflow classes */
        .textOverflowtext-ellipsis {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .textOverflowtext-clip {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: clip;
        }
        .textOverflowtext-truncate {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
/* flex-direction CSS */
        .flexDirection-container {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .flexDirection-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .flexDirectionitem {
            padding: 10px;
            margin: 5px;
            /* background-color: mediumslateblue; */
            color: white;
            text-align: center;
            min-width: 50px;
        }
        .flexDirectioncontainer {
            border: 2px dashed #333;
            padding: 10px;
            margin-bottom: 10px;
            min-height: 50px;
        }
        .flexDirectionnote {
            font-style: italic;
            color: #666;
            font-size: 0.9em;
        }
        .flexDirectionwide-container {
            width: 300px;
        }
        .flexDirectiontall-container {
            height: 200px;
        }

/* Items Alignment */

        .alignItems-container {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .alignItems-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .alignItems-item {
            padding: 10px;
            margin: 5px;
            /* background-color: mediumslateblue; */
            color: white;
            text-align: center;
            min-width: 50px;
        }
        .alignItems-container-box {
            border: 2px dashed #333;
            padding: 10px;
            margin-bottom: 10px;
            min-height: 100px;
        }
        .alignItems-note {
            font-style: italic;
            color: #666;
            font-size: 0.9em;
        }
        .tall-item {
            height: 60px;
        }
        .baseline-item {
            padding-top: 20px;
        }
        .baseline-item:nth-child(2) {
            padding-top: 40px;
        }

/* Justify Contents */
 
        .justify-container {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .justify-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .justify-item {
            padding: 10px;
            margin: 5px;
            /* background-color: #6a5acd; */
            color: white;
            text-align: center;
            min-width: 50px;
        }
        .justify-box {
            border: 2px dashed #333;
            padding: 10px;
            margin-bottom: 10px;
            min-height: 50px;
        }
        .justify-note {
            font-style: italic;
            color: #666;
            font-size: 0.9em;
        }
        .justify-wide-container {
            width: 500px;
        }

/* Align Self CSS */

        .alignSelf-container {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .alignSelf-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .alignSelf-item {
            padding: 10px;
            margin: 5px;
            /* background-color: mediumslateblue; */
            color: white;
            text-align: center;
            min-width: 50px;
        }
        .alignSelf-box {
            border: 2px dashed #333;
            padding: 10px;
            margin-bottom: 10px;
            min-height: 150px;
        }
        .alignSelf-note {
            font-style: italic;
            color: #666;
            font-size: 0.9em;
        }
        .alignSelf-tall-container {
            height: 200px;
        }
        .highlight-item {
            /* background-color: #ff6b6b !important; */
            font-weight: bold;
        }

/* Align-content CSS */
        .alignContent-container {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .alignContent-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .alignContentitem {
            padding: 10px;
            margin: 2px;
            /* background-color: mediumslateblue; */
            color: white;
            text-align: center;
            width: 80px;
        }
        .alignContentcontainer {
            border: 2px dashed #333;
            padding: 10px;
            margin-bottom: 10px;
            height: 200px; /* Fixed height to demonstrate cross-axis alignment */
            background-color: #f5f5f5;
        }
        .alignContentnote {
            font-style: italic;
            color: #666;
            font-size: 0.9em;
        }

    /* Grid CSS */
        .grid-container {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .grid-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .griditem {
            padding: 10px;
            margin: 2px;
            /* background-color: mediumslateblue; */
            color: white;
            text-align: center;
        }
        .gridcontainer {
            border: 2px dashed #333;
            padding: 10px;
            margin-bottom: 10px;
            background-color: #f5f5f5;
        }
        .gridnote {
            font-style: italic;
            color: #666;
            font-size: 0.9em;
        }
        .gridgap {
            gap: 8px;
        }

/* Gap CSS */
        .gap-container {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .gap-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .gapitem {
            padding: 10px;
            /* background-color: mediumslateblue; */
            color: white;
            text-align: center;
            min-width: 50px;
        }
        .gapcontainer {
            border: 2px dashed #333;
            padding: 10px;
            margin-bottom: 10px;
            background-color: #f5f5f5;
        }
        .gapnote {
            font-style: italic;
            color: #666;
            font-size: 0.9em;
        }

/* Container styles matching your pattern */
        .padding-container {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .padding-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .paddingitem {
            /* background-color: mediumslateblue; */
            color: white;
            text-align: center;
            min-width: 50px;
            margin: 2px;
        }
        .paddingcontainer {
            border: 2px dashed #333;
            padding: 10px;
            margin-bottom: 10px;
            background-color: #f5f5f5;
        }
        .paddingnote {
            font-style: italic;
            color: #666;
            font-size: 0.9em;
        }
        .padding-box {
            background-color: #f0f0f0;
            border: 1px solid #999;
            position: relative;
        }
        .padding-visual {
            /* background-color: mediumslateblue; */
            color: white;
            text-align: center;
        }

/* Container styles matching your pattern */
        .margin-container {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .margin-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .marginitem {
            padding: 10px;
            /* background-color: mediumslateblue; */
            color: white;
            text-align: center;
            min-width: 50px;
        }
        .margincontainer {
            border: 2px dashed #333;
            padding: 10px;
            margin-bottom: 10px;
            background-color: #f5f5f5;
        }
        .marginnote {
            font-style: italic;
            color: #666;
            font-size: 0.9em;
        }
        .margin-box {
            background-color: #f0f0f0;
            border: 1px solid #999;
            display: inline-block;
        }
        .margin-visual {
            /* background-color: mediumslateblue; */
            color: white;
            text-align: center;
            padding: 10px;
        }
/* Container styles matching your pattern */
        .radius-container {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .radius-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .radius-item {
            padding: 20px;
            margin: 10px;
            /* background-color: mediumslateblue; */
            color: white;
            text-align: center;
            min-width: 100px;
            display: inline-block;
        }
        .radiuscontainer {
            border: 2px dashed #333;
            padding: 15px;
            margin-bottom: 10px;
            background-color: #f5f5f5;
        }
        .radiusnote {
            font-style: italic;
            color: #666;
            font-size: 0.9em;
        }
/* Width Utillies CSS */
        .width-container {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .width-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .width-item {
            padding: 10px 0;
            margin: 5px 0;
            /* background-color: mediumslateblue; */
            color: white;
            text-align: center;
            white-space: nowrap;
            overflow: visible;
            position: relative;
        }
        .width-item::after {
            content: attr(class);
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            font-size: 0.8em;
            color: #333;
            background: #f5f5f5;
        }
        .widthcontainer {
            border: 2px dashed #333;
            padding: 20px 10px;
            margin-bottom: 30px;
            background-color: #f5f5f5;
        }
        .widthnote {
            font-style: italic;
            color: #666;
            font-size: 0.9em;
        }
/* Other Width CSS */
        .otherWidth-container {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .otherWidth-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .otherWidth-item {
            padding: 10px;
            margin: 5px 0;
            /* background-color: mediumslateblue; */
            color: white;
            text-align: center;
        }
        .otherWidthcontainer {
            border: 2px dashed #333;
            padding: 15px;
            margin-bottom: 10px;
            background-color: #f5f5f5;
        }
        .otherWidthnote {
            font-style: italic;
            color: #666;
            font-size: 0.9em;
        }
        .otherWidth-parent {
            width: 300px;
            padding: 10px;
            background-color: #f0f0f0;
            margin-bottom: 15px;
        }
        .otherWidth-long-text {
            white-space: nowrap;
        }
        .flex {
            display: flex;
        }
        .flex-col {
            flex-direction: column;
        }
        .multiline-text {
            white-space: normal;
            word-break: break-all;
        }

/* Standard Screen Width Examples  */

        .screen-container {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .screen-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .screen-item {
            padding: 15px;
            margin: 5px 0;
            /* background-color: mediumslateblue; */
            color: white;
            text-align: center;
            position: relative;
        }
        .screen-item::after {
            content: attr(class);
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            font-size: 0.8em;
            color: #333;
            background: #f5f5f5;
            padding: 2px 0;
        }
        .screencontainer {
            border: 2px dashed #333;
            padding: 10px;
            margin-bottom: 10px;
            background-color: #f5f5f5;
            overflow: hidden;
        }
        .screennote {
            font-style: italic;
            color: #666;
            font-size: 0.9em;
        }
        .screen-visual {
            height: 50px;
            /* background-color: rgba(123, 104, 238, 0.2); */
            /* border: 1px solid mediumslateblue; */
            margin-top: 25px;
            position: relative;
        }
        .screen-visual::before {
            content: 'Viewport Width';
            position: absolute;
            top: -20px;
            left: 10px;
            font-size: 0.8em;
            color: #666;
        }
        .screen-visual::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            /* background-color: mediumslateblue; */
            opacity: 0.5;
        }
/* Percentage Width Property Demonstrations */
        .widthPerccontainer {
            border: 2px dashed #333;
            padding: 15px;
            margin-bottom: 10px;
            background-color: #f5f5f5;
        }
        .widthPerc-parent {
            width: 100%;
            background-color: #f0f0f0;
            padding: 5px;
            margin-bottom: 40px;
        }

/* Height utilities */

        .heightcontainer {
            border: 2px dashed #333;
            padding: 15px;
            margin-bottom: 10px;
            background-color: #f5f5f5;
        }

/* Percentage height classes */

        .percentageHeight-container {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .percentageHeight-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .percentageHeight-item {
            padding: 10px;
            margin: 5px;
            /* background-color: mediumslateblue; */
            color: white;
            text-align: center;
            min-width: 50px;
        }
        .percentageHeight-inner-container {
            border: 2px dashed #333;
            padding: 10px;
            margin-bottom: 10px;
            height: 200px;
            display: flex;
            align-items: flex-end; 
        }
        .percentageHeight-note {
            font-style: italic;
            color: #666;
            font-size: 0.9em;
        }
/*  */
        .otheHieghts-container {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .otheHieghts-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .otheHieghts-item {
            padding: 10px;
            margin: 5px;
            background-color: darkslategrey;
            color: white;
            text-align: center;
            min-width: 50px;
            border: 1px solid #333;
        }
        .otheHieghts-parent {
            border: 2px dashed #333;
            padding: 10px;
            margin-bottom: 10px;
            height: 300px;
            background-color: #f0f0f0;
        }
        .otheHieghts-note {
            font-style: italic;
            color: #666;
            font-size: 0.9em;
        }
               
        .fixed-height-parent {
            height: 150px;
            background-color: #e0e0e0;
            border: 1px solid #999;
            padding: 5px;
        }

/* Cont Demo CSS */
        .con-10 { margin: auto; width: 10%; }
        .con-15 { margin: auto; width: 15%; }
        .con-20 { margin: auto; width: 20%; }
        .con-25 { margin: auto; width: 25%; }
        .con-30 { margin: auto; width: 30%; }
        .con-35 { margin: auto; width: 35%; }
        .con-40 { margin: auto; width: 40%; }
        .con-45 { margin: auto; width: 45%; }
        .con-50 { margin: auto; width: 50%; }
        .con-55 { margin: auto; width: 55%; }
        .con-60 { margin: auto; width: 60%; }
        .con-65 { margin: auto; width: 65%; }
        .con-70 { margin: auto; width: 70%; }
        .con-75 { margin: auto; width: 75%; }
        .con-80 { margin: auto; width: 80%; }
        .con-85 { margin: auto; width: 85%; }
        .con-90 { margin: auto; width: 90%; }
        .con-95 { margin: auto; width: 95%; }
/* Demo RWD */
            
        .dflexitem {
                background-color: mediumslateblue;
                border-radius: 3px;
                text-align: center;
                font-family: f219;
                font-size: 18px;
                color: white;
                padding: 10px;
                width: 100%;
            }

        @media screen and (max-width: 800px) {            
            .dflexitem {
                border-radius: 1px;
                font-size: 12px;
            }
            }