@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&family=Meow+Script&display=swap');

body {
                background-image: url("https://file.garden/aSQ7O5-Qjze7pfjD/BeigeCheckeredBackground.jpg");
                background-color: darkseagreen;
            }
            /* 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;
            }
            @keyframes BubbleTransparency {
                0%, 100% {
                    opacity: 100%;
                }
                50% {
                    opacity: 75%;
                }
            }
            @keyframes BouncingMark {
                0%, 50%, 100% {
                    transform: rotate(0deg);
                    font-size: 70px;
                }
                30% {
                    transform: rotate(10deg);
                    font-size: 100px;
                }
                70% {
                    transform: rotate(-10deg);
                    font-size: 100px;
                }
                
            }
            .AnnouncementBubble {
                animation: BubbleTransparency 2s infinite ease-in-out;
            }
            #bubbleBehind {
                height: 150px;
                width: 200px;
                background-color: palevioletred;
                border: 5px solid palevioletred;
                border-radius: 50%;
                position: fixed; bottom: 0%; left: 3%;
            }
            #point {
                height: 50px;
                width: 50px;
                background-color: white;
                border: 5px solid palevioletred;
                position: fixed; bottom: 10%; left: 2%;
                transform: skewX(-50deg);
            }
            #bubble {
                height: 150px;
                width: 200px;
                background-color: white;
                border-radius: 50%;
                box-shadow: inset -5px -5px pink;
                position: fixed; bottom: 0.75%; left: 3.4%;
            }
            #ExclamationMark {
                font-size: 100px;
                position: fixed; bottom: 5%; left: 13%;
                animation: BouncingMark 2s infinite both;
                
            }
            .Buttons {
                width: 20%; 
                height: 40px; 
                background-color: lightpink; 
                border: 5px solid rgba(240, 128, 128, 0.5);
                border-radius: 10px;
                border-style: inset;
                font-family: Cherry Bomb One; 
                font-size: 30px;
            }
            .Container {
                width: 50%;
                height: 1250px;
                height: auto;
                background-color: white;
                border: 5px solid palevioletred;
                border-radius: 30px;
                position: absolute; left: 25%; top: 20%;
                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: auto;
                height: 40px; 
                background-color: pink; 
                border-radius: 30px;
                font-family: Meow Script; 
                font-size: 30px;
                overflow-wrap: break-word;  /* breaks long words */
                word-wrap: break-word;      /* fallback */
                word-break: break-word;     /* for really long sentences */
            }
            #More {
                display: none;
            }
            .MoreButton {
                width: 40%; 
                height: 60px; 
                background-color: lightpink; 
                font-family: Cherry Bomb One; 
                border-radius: 10px;
                font-size: 20px;
                position: absolute; left: 30%; bottom: -3.5%;
                opacity: 100%;
            }