h1
{
    font-family: 'Secular One', 'Roboto', Helvetica, sans-serif;
    font-weight: 700;
    font-size: 2vh;
    color: goldenrod;
    letter-spacing: 0.05em; /* Base for mobile */
}

h2
{
    font-family: 'Secular One', 'Roboto', Helvetica, sans-serif;
    font-weight: 700;
    font-size: 2vh;
    color: white;
    letter-spacing: 0.05em; /* Base for mobile */
}

h3
{
    font-family: 'Secular One', 'Roboto', Helvetica, sans-serif;
    font-weight: 700;
    font-size: 4vw;
    color: white;
    letter-spacing: 0.1em; /* Base for mobile */
    text-shadow: 4px 4px 6px rgba(0, 0, 0, 1);
}

p
{
    font-family: 'Secular One', 'Roboto', Helvetica, sans-serif;
    font-size: 2vh;
    color: white;
    letter-spacing: 0.05em;
}

.div-player
{
    background-color: rgba(0, 0, 0, 0.3);  
    position: fixed;
    height: 100%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: none;
}

.div-player button
{
    position: fixed;
    top: 4vh;
    right: 2vw;
}

#player 
{
   position: fixed;
   top: 50%;
   left: 50%;
   width: 80vw;
   height: auto;
   aspect-ratio: 16/9;
   z-index: 100;
   transform: translate(-50%, -50%);
 }
 
.video-list
 {
   background-color: red;
   margin-top: 20px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   gap: 10px;
   height: 10vw;
 }

 .spacer-footer
 {
    height: 15vh;
    background: hsl(0, 0%, 13%);
 }

@media (min-aspect-ratio: 1001/1000) /*LANDSCAPE */
{
    h2
    {
        font-size: 3vh;
    }

    p
    {
        font-size: 3vh;
    }
}

@media (max-aspect-ratio: 999/1000) /*PORTRAIT */
{
    #player 
    {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: auto;
    aspect-ratio: 16/9;
    z-index: 100;
    transform: translate(-50%, -50%);
    }
}