body{
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    background-color: #1f1f1f;
}
.desktop{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;  
        z-index: 10;
        display: flex;
         opacity: 0; 
         
        }
.deskanimation{
    animation: show-desktop 0.5s ease 12.5s 1 forwards;
}
.desktop-in{
    width: 100%;
	height: 100vh;
    min-width: 1440px;
    min-height: 900px;
	position: relative;    
	overflow: hidden;
	display: flex;    
	align-items: center;
	justify-content: center;
}

.film-content {
    width: 1440px;    
    aspect-ratio: 16/9;
    position: absolute;
    overflow: hidden;        
}
.form-container{    
    position: absolute;
    top: 310px;
    left: 290px;
    width: 630px;   
    height: 270px;
}

.tablero-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 200px 60px;
    width: 100%;
    height: 100%;
    position: relative !important;
}

.num-container{ 
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: 170px;  
    padding: 20px 25px 5px;   
    display: flex;
    align-items: center;
}
/* table tr{
    background-color: rgba(0,0,0,0.5);
} */
.numbers{     
    position: relative !important;
    display: grid;    
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 2px;
    width: 90%;
    height: 150px;   
    color: #1f1f1f;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
}
/*hacer una clase para los divs contenidos en el objeto numbers que se alinen horizontalemnte*/
.numbers div{
    position: inherit;
    display: inline-block;
    width: 70px;
    height: 135px;
    /* background-color: rgba(0,0,0,0.2); */    
    margin: 0 2px;
    text-align: center;
    line-height: 130px;
    font-size: 6em;    
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.name,
.office{
    grid-row: 2;
    width: 280px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    overflow: hidden;
    container-type: inline-size;
}

.name{ grid-column: 1; }
.office{ grid-column: 2; }
.winner{        
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);   
    border-radius: 10px;      
}
.name .winner{    
    font-size: clamp(1.4rem, 10cqw, 3.1em);
    font-weight: 900; 
}
.office .winner{    
    font-size: clamp(1.2rem, 7cqw, 2.5em);
    font-weight: 900;
}
@keyframes show-desktop {
    0% { opacity: 0; }
    100% { opacity: 1; }
}