Introduction to <dfn>tag

/* General Styles */
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f0f4f8; /* Light blue-gray background */
        color: #333;
        margin: 0;
        padding: 20px;
        display: flex;
        justify-content: center; /* Center content horizontally */
        align-items: center; /* Center content vertically */
        min-height: 100vh; /* Full viewport height */
    }
    
    .container {
        max-width: 700px; /* Set max width for the container */
        width: 100%; /* Full width */
        background-color: #fff; /* White background for the container */
        padding: 40px; /* More padding for a modern look */
        border-radius: 15px; /* Rounded corners for a modern look */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Deep shadow for depth */
        position: relative;
        overflow: hidden; /* Prevent content overflow */
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition for hover effects */
    }
    
    /* Hover effect for container */
    .container:hover {
        transform: translateY(-10px); /* Lift container slightly on hover */
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
    }
    
    h1 {
        text-align: center; /* Center the heading */
        color: #333; /* Dark color for the heading */
        margin-bottom: 25px; /* Margin below the heading */
        font-size: 2.5em; /* Larger font size for the heading */
        font-weight: 700;
        position: relative;
    }
    
    h1::after {
        content: ''; /* Decorative underline effect */
        display: block;
        width: 50px; /* Width of the line */
        height: 5px; /* Height of the line */
        background: #ff6347; /* Tomato color for the line */
        margin: 8px auto 0; /* Center the line */
        border-radius: 3px; /* Rounded ends for the line */
    }
    
    /* Glossary List Styles */
    .glossary-list {
        margin: 0; /* Remove default margin */
        padding: 0; /* Remove default padding */
        list-style-type: none; /* Remove default list styling */
    }
    
    .glossary-list dt {
        font-weight: bold; /* Bold font for terms */
        margin-top: 20px; /* Space above each term */
        color: #0056b3; /* Blue color for terms */
        font-size: 1.2em; /* Slightly larger font size for terms */
        position: relative; /* Position for decorative icon */
        padding-left: 30px; /* Padding to make space for the icon */
        transition: color 0.3s ease; /* Smooth transition for color change */
    }
    
    .glossary-list dt::before {
        content: '💡'; /* Light bulb emoji as decorative icon */
        position: absolute;
        left: 0; /* Align to the left */
        top: 0;
        font-size: 1.1em; /* Adjust size for alignment */
        color: #ff6347; /* Tomato color for the icon */
    }
    
    .glossary-list dd {
        margin-left: 30px; /* Indent descriptions */
        margin-bottom: 15px; /* Space below each description */
        color: #555; /* Dark gray color for descriptions */
        line-height: 1.8; /* Increase line height for readability */
        background-color: #f7f9fc; /* Very light blue-gray background for descriptions */
        padding: 15px 20px; /* Padding inside each description */
        border-left: 5px solid #ff6347; /* Tomato left border for emphasis */
        border-radius: 10px; /* Rounded corners for descriptions */
        position: relative;
        transition: background-color 0.3s ease, border-left-color 0.3s ease; /* Smooth transition for background and border color */
    }
    
    /* Hover effect for definitions */
    .glossary-list dd:hover {
        background-color: #e0f3ff; /* Light blue background on hover */
        border-left-color: #007bff; /* Blue border on hover */
    }
    
    /* Styles for Defined Terms */
    dfn {
        font-style: italic; /* Italic font style for definitions */
        color: #ff6347; /* Tomato color to highlight defined terms */
        border-bottom: 1px dotted #ff6347; /* Dotted underline for emphasis */
        cursor: help; /* Cursor change on hover */
        transition: color 0.3s ease; /* Smooth transition for color change */
    }
    
    dfn:hover {
        color: #333; /* Change color on hover */
        border-bottom-color: #333; /* Change underline color on hover */
    }
    
    /* Responsive Design */
    @media (max-width: 600px) {
        .container {
            padding: 20px; /* Adjust padding for smaller screens */
        }
    
        .glossary-list dt {
            font-size: 1.1em; /* Adjust term font size */
        }
    
        .glossary-list dd {
            font-size: 1em; /* Adjust description font size */
        }
    }