@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&family=Fleur+De+Leah&family=UnifrakturCook:wght@700&family=Nothing+You+Could+Do&family=Share+Tech+Mono&display=swap');

body {
                background-image: url("https://file.garden/aSQ7O5-Qjze7pfjD/BeigeCheckeredBackground.jpg");
            }
            /* Scrollbar width */
            ::-webkit-scrollbar {
                width: 14px;
            }
            /* Background behind the scrollbar ( beige) */
            ::-webkit-scrollbar-track {
                background: #f3e8d8; /*  beige */
                border-radius: 10px;
            }
            /* Scrollbar thumb */
            ::-webkit-scrollbar-thumb {
                background: #e8b8c8;   /* light pink */
                border-radius: 10px;
                border: 3px solid #f3e8d8; /* makes it look roundish and pastel */
            }
            /* Hover effect (brighter pink...I think?) */
            ::-webkit-scrollbar-thumb:hover {
                background: #f0c6d3;
            }
            .NoteAbove {
                width: 80%;
                height: 150px;
                height: auto;
                background-color: white;
                border: 5px solid pink;
                border-radius: 30px;
                position: absolute; left: 10%;
                border-style: inset;
                font-family: Cherry Bomb One;
                font-size: 25px;
                overflow-wrap: break-word;  /* breaks long words */
                word-wrap: break-word;      /* fallback */
                word-break: break-word;     /* for really long sentences */
            }
            .Header {
                width: 35%; 
                height: 40px; 
                background-color: pink; 
                box-shadow: 5px 5px lightcoral;
                border-radius: 10px;
                font-family: Fleur De Leah; 
                font-size: 30px;
                color: black;
            }