Rects not being resized with their images in window

In order to make my window resizable and the images scale with the window, I am using blit with a surface that is a copy of the screen, and then adding that surface to the screen, scaling it to the current size of the screen, as below.

        mainMenuScreen.blit(background, (0, 0))
        mainMenuScreen.blit(quitButton, (96 * WS, 54 * HS))
        mainMenuScreen.blit(viewButton, (96 * WS, 216 * HS))
        mainMenuScreen.blit(practiceButton, (96 * WS, 374 * HS))
        mainMenuScreen.blit(inputButton, (96 * WS, 532 * HS))
        mainMenuScreen.blit(explorationButton, (96 * WS, 690 * HS))
        mainMenuScreen.blit(titleImage, (810 * WS, 54 * HS))

        screen.blit(pygame.transform.scale(mainMenuScreen, screen.get_rect().size), (0, 0))

However, these buttons have rects that I check the position of in order to check if the mouse clicks on them, as below.

            elif event.type == pygame.MOUSEBUTTONDOWN:
                if quitButtonRect.collidepoint(event.pos):
                    pygame.quit()
                    exit()
                
                elif viewButtonRect.collidepoint(event.pos):
                    viewMenu(screen, screenRect)

                elif practiceButtonRect.collidepoint(event.pos):
                    practiceMenu(screen, screenRect)

                elif inputButtonRect.collidepoint(event.pos):
                    inputMenu(screen, screenRect)

                elif explorationButtonRect.collidepoint(event.pos):
                    explorationMenu(screen, screenRect)

They are not being resized with the window. How would I amend this?

You need to sign in to view this answers