/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }

        .flowchart-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .step, .decision {
            background-color: #e0f2f7;
            border: 2px solid #007bff;
            padding: 15px 25px;
            margin: 20px 0;
            text-align: center;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
            position: relative;
        }

        .step {
            border-radius: 5px;
        }

        .decision {
            background-color: #fff3cd;
            border-color: #ffc107;
            transform: rotate(45deg); /* Rotate for diamond shape */
            width: 150px; /* Adjust width and height to maintain aspect ratio after rotation */
            height: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .decision div {
            transform: rotate(-45deg); /* Counter-rotate text inside */
            white-space: nowrap;
        }

        .arrow {
            width: 2px;
            height: 40px;
            background-color: #333;
            position: relative;
        }

        .arrow::after {
            content: '';
            position: absolute;
            bottom: -5px; /* Position the arrowhead */
            left: -4px;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 8px solid #333;
        }

        /* Specific styling for decision arrows (e.g., Yes/No paths) */
        .decision-path {
            display: flex;
            justify-content: space-around;
            width: 300px; /* Adjust as needed */
        }

        .decision-path .arrow {
            height: 30px;
        }

        .decision-path .arrow.yes {
            margin-right: 50px;
        }

        .decision-path .arrow.no {
            margin-left: 50px;
        }