Style elements when in fullscreen mode

Did you know you can differentiate an element's styles when it's in fullscreen mode? It doesn't even require special classes or JavaScript, as you can use the :fullscreen pseudo-class to style an element when it's displayed in fullscreen mode.

This pseudo-class is particularly useful in adjusting an element's appearance when it's in fullscreen mode. Perhaps, you want to adjust the text size, background color, or even the layout of the element to better fit the screen. This can be especially useful for media players, slideshows, or any other content that benefits from a fullscreen view.

.element {
  /* Default styles */
}

.element:fullscreen {
  /* Styles when in fullscreen mode */
}