body, html
/* Grow body and html elements to fit screen. */
{ height: 100%
}

body
/* Center items on page */
{ display: flex
; justify-content: center
; align-items: center
}

.tv-container
/* Use a grid display to allow overlaying the TV atop of the page displayed
 * inside of the TV. */
{ display: grid
; max-height: 100%
; overflow: hidden
/* Lock aspect ratio to that of the TV image we are using. */
; aspect-ratio: 222/215
}

.tv
{ object-fit: contain
/* Display at grid position (1,1)-(1,1) */
; grid-column-start: 1
; grid-column-end: 1
; grid-row-start: 1
; grid-row-end: 1
/* Display "above" other elements at the same position (i.e. the TV contents) */
; z-index: 2
/* Grow/shrink to fit container. */
; max-width:100%
; max-height:100%
/* Prevent the TV from taking mouse focus.  You want the TV contents to take
 * input instead. */
; pointer-events: none
}

.inside-tv-screen
/* Display at grid position (1,1)-(1,1) (the same as the TV itself) */
{ grid-column-start: 1
; grid-column-end: 1
; grid-row-start: 1
; grid-row-end: 1
/* These margins push the contents to the inner edges of the TV screen. */
; margin-left: 10.1%
; margin-top: 9%
; margin-bottom: 26.5%
; margin-right: 9.9%
/* Crop overflow; require scrolling down to see it. */
; overflow: scroll
/* background settings */
; background-color: rgb(20, 20, 20);
; color: white;
}
.example-page
{ padding: 30px 40px
; font-size: 18px
; color: #444
; line-height: 1.6
}

.example-page h1 h2 h3 h4 h5 h6
{ line-height: 1.2
}

.example-image
{ object-fit: contain
; margin: 0 auto
; max-width: 80%
; display: block
}