@charset "UTF-8";

@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter/InterVariable-Italic.woff2") format("woff2");
}

/* VARIABLES */
:root {
    --vh: 1vh;
    
    --num-columns: 5.0; /* …24 */
    --num-rows: 4.0;
    
    --menu-width: 6.3rem;
    
    /*--grid-width: 100vw;*/
    --grid-width: calc(var(--vw, 1vw) * 100 - var(--menu-width));
    --grid-width: 100%;
        
    /*--column-width: calc(var(--grid-width) / var(--num-columns));*/
        
    --max-aspect: 0.818; /* from data */
    /*--video-height: calc(var(--max-aspect) * var(--column-width));*/
    
    --color-bg: #000;
    --color-thumb-bg: #AAA;
    
    --color-labels: #AAA;
}

/* MAIN */
html {
    padding: 0;
    margin: 0;
    /*width: 100%;*/
    /*height: 100%;*/
    /*font-size: 100%;*/
    font-size: max(50%, 1vw);
}
body {
    margin: 0;
    padding: 0;
    font-family: "InterVariable", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    font-feature-settings: "ss03", "cv06", "cv11";
    
    background-color: var(--color-bg);
    line-height: 1.3;

    height: 100vh;
    height: calc(100 * var(--vh));
    
    /* To be changed via data attributes */
    --column-width: calc(var(--grid-width) / var(--num-columns));
    --video-height: calc(var(--max-aspect) * var(--column-width));
}

body.paused {
    outline: 5px solid var(--color-labels);
    outline-offset: -5px;
    filter: brightness(0.4);
}

a:hover {
    text-decoration: none;
}

.grid-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 3px;
}

/* Video elements */
.entry-grid {
    height: 100%;
    width: 100%;
    display: flex;
}

.entry {
    height: 100%;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: flex-start;
    flex-grow: 1;
    flex-basis: 0;
    display: none;
}
/* Hide entry elements until data is loaded */
.loaded .entry {
    display: flex;
}

.entry.loading {
    
}

.entry-content {
    width: 100%;
    min-width: 100%;
}
.entry-content video {
    width: 100%;
    height: auto;
    max-height: 75vh;
    cursor: pointer;
}

.entry-title {
    text-align: center;
    padding: 0 2rem;
    /*color: var(--color-labels);*/
    font-size: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 2.0rem;
    color: #AAA;
    
    text-wrap-style: balance;
}

.entry-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 6.0rem;
    padding-top: 1.75rem;
}
.ec-label {
    color: var(--color-labels);
    font-size: 1.5rem;
    padding: 0.3em 1em;
    border-radius: 2em;
    border: 1px solid currentColor;
    font-feature-settings: "tnum";
}
.ec-label:empty {
    display: none;
}

.entry:hover {

}

/* Footer (Credits) */
.footer {
    display: flex;
    justify-content: center;
    padding-bottom: 1rem;
}
.footer .credits {
    color: #000;
    font-size: 0.85rem;
    text-align: center;
    /*padding: 0.4em 1em;
    background-color: #888;*/
    border-radius: 2rem;
    line-height: 1.3;
    
    color: #444;
    font-size: 0.75rem;
    max-width: 80%;
}

/* Start button */
.start-button {
    display: block;
    color: #666;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid currentColor;
    border-radius: 0.3rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    text-align: center;
}
.start-button:hover {
    background-color: #444;
    color: #FFF;
}