.material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.container {
    display: flex;
    justify-content: center;
}

.phone {
    display: block;
    background: url('./phone-back.png') no-repeat;
    background-size: contain;
    box-sizing: border-box;
    min-width: 200px;
    max-width: 50%;
    flex-grow: 1;
    padding: 2.5%;
    aspect-ratio: 1547 / 3272;
}

theoplayer-ui,
theoplayer-ui:not(:defined) {
    background: transparent;
    font-family: 'Noto Sans', sans-serif;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0;
}

theoplayer-ui {
    --theoplayer-video-border-radius: 10px;
    --theoplayer-video-object-fit: cover;
}

.spacer {
    flex-grow: 1;
}

.top-chrome {
    justify-content: flex-end;
}

.centered-chrome * {
    --theoplayer-control-height: 48px;
    --theoplayer-text-content-height: 100%;
}

.centered-chrome .material-symbols-rounded {
    font-size: var(--theoplayer-control-height);
}

.side-chrome {
    align-self: end;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.bottom-chrome {
    display: flex;
    flex-direction: column;
}

theoplayer-time-range {
    --theoplayer-range-padding: 5px;
}

/**
 * Our custom buttons use an icon font, so apply a text shadow (instead of an SVG filter) for their hover glow.
 */
theoplayer-button:hover {
    text-shadow: var(--theoplayer-button-hover-icon-shadow, 0 0 4px rgba(255, 255, 255, 0.5));
}

/*
 * Hide all controls before first play, except for the center play button
 */
theoplayer-ui:not([has-first-play]) .top-chrome,
theoplayer-ui:not([has-first-play]) .side-chrome,
theoplayer-ui:not([has-first-play]) .bottom-chrome {
    display: none !important;
}