@import url('https://fonts.googleapis.com/css2?family=Kalam&family=Roboto:wght@400;700&display=swap');
        body {
            font-family: 'Roboto', sans-serif;           
            background-color: #ffffff;
            background-image: radial-gradient(#a9a9a9 1px, transparent 1px);
            background-size: 20px 20px;
            margin: 0;
            padding: 15px;
        }
        h1 {
            text-align: center;
            font-family: 'Kalam', cursive;
            color: #333;
        }
        .notes-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }
        .note {
            width: 245px;
            min-height: 230px;
            padding: 15px;
            font-family: 'Kalam', cursive;
            font-size: 15px;
            box-shadow: 5px 5px 7px rgba(33,33,33,.7);
            transition: transform .15s linear;
            display: flex;
            flex-direction: column;
        }
        .note:hover {
            transform: scale(1.1);
            z-index: 5;
        }
        .note h3 {
            font-family: 'Roboto', sans-serif;
            font-weight: 700;
            font-size: 18px;
            text-align: center;
            margin-top: 0;
            border-bottom: 1px solid rgba(0,0,0,0.2);
            padding-bottom: 5px;
        }
        .note ul {
            list-style-type: none;
            padding: 0;
            flex-grow: 1;
        }
        .note code {
            font-family: 'Courier New', Courier, monospace;
            background-color: rgba(0,0,0,0.1);
            padding: 2px 4px;
            border-radius: 3px;
            font-size: 14px;
            display: inline-block;
            white-space: pre;
        }
        .note-yellow { background-color: #fff8b3; transform: rotate(-2deg);}
        .note-green { background-color: #d4ffb3; transform: rotate(1deg); }
        .note-blue { background-color: #b3e0ff; transform: rotate(2deg);}
        .note-pink { background-color: #ffb3d1; transform: rotate(-1deg); }
        .note-purple { background-color: #e6b3ff; transform: rotate(3deg); }
        .note-orange { background-color: #ffc4b3; transform: rotate(-3deg); }
        
        /* @media print {
            body { background-color: #fff; }
            .notes-container { gap: 15px; }
            .note { box-shadow: 2px 2px 5px #ccc; min-height: 230px; }
        } */
        
        /* --- General Print Styles --- */
        @media print {
          body {
            background: none;
            /* Helps force the browser to print background colors */
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
          }
          h1 {
            font-size: 20pt;
            text-align: center;
            margin-bottom: 10px;
          }
          .notes-container {
            display: grid; /* Use grid for precise layouts */
          }
          .note {
            page-break-inside: avoid; /* Tries to keep notes on one page */
            box-shadow: none;         /* Removes shadows */
            transform: none;          /* Removes rotation */
            border: 1px solid rgba(0,0,0,0.2);
            width: auto;
            min-height: initial;      /* Lets content define height */
          }
          .note:hover {
            transform: none;
          }
        }

        /* --- Portrait Layout: 3 Columns --- */
        @media print and (orientation: portrait) {
          body { font-size: 9pt; }
          .notes-container {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
          }
          .note { padding: 8px; }
        }

        /* --- Landscape Layout: 4 Columns --- */
        @media print and (orientation: landscape) {
          body { font-size: 9pt; } /* Larger font for wider columns */
          .notes-container {
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
          }
          .note { padding: 8px; }
        }