blueskychan.dev/src/styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  position: relative;
  min-height: 100%;
  color: #ffc6d7fc;
  overflow: hidden;

  --background-image: url("/api/random-background-picture");
  background-image: var(--background-image);

  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}

@media only screen and (orientation: portrait) {
  body {
    --background-image: url("/mobile.png");
    overflow: auto;
  }
}

/* In case if device height is less than 900px */
/* Notice: This design for small screen and mobile devices, scroll bar still be shown, will fix in next commit! <3 */
@media only screen and (max-height: 900px) {
  body {
    overflow: auto;
  }
}