:root {
    --primary: #F9DA88;
    --secondary: #A6AF7D;;
    --greydark: #060F0D;
    --greydark2: #161F1D;
    --textmain: #FFEAA8;
    --textsecondary: #F58D83;
}

* { padding:0; margin:0; box-sizing:border-box;}
body { min-height: 100vh; background-color: #000; font-family: 'Ramadan';}
img { width: 100%; }
.container { min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 1.5rem; }
.subcontainer{ max-width: 36.875rem; width: 100%; height: 100%; filter: drop-shadow(0 0 0.125rem var(--textmain)) drop-shadow(0 0 6.1875rem var(--greydark2)); animation: glowbox 10s linear infinite; }


/* title */
.title { grid-column: span 2; width: 100%; background: var(--greydark); padding: 1.875rem 1.875rem 0.9375rem 1.875rem; border-top-left-radius: 40%; border-top-right-radius: 40%; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;color: var(--textmain); clip-path: polygon(0 20%, 20% 0, 80% 0, 100% 20%, 100% 100%, 0 100%);text-align: center; font-size: 2.75rem; }
.title__in { position: relative;  }
.title__txt {color: var(--textmain); text-shadow: 0.25rem 0.25rem 1.25rem #FFFA; animation: glowtext 2s linear infinite; }

/* foto & tambor */
.foto-tambor { display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); justify-content: center; align-items: center; gap: 0.625rem; height: 50%; flex-basis: 100%; margin: 0.625rem 0;}
.tambor , .foto-alumno {  height: 17.5rem; background: var(--greydark); padding: 1.875rem; border-radius: 0.25rem;}
.tambor__in, .foto-alumno__in { height: 100%; border: 0.125rem solid var(--primary); background: #000; border-radius: 0.25rem;}
.tambor__in {font-family: 'Signika Negative', sans-serif; display: flex; justify-content: center; align-items: center; color: #FFF; font-size: 1.5rem; text-transform: capitalize; }
.foto-alumno__in img { height: 100%; object-fit: cover;}

/* controls */
.controls {width: 100%; background: var(--greydark); padding: 0.9375rem; border-radius: 0.25rem; display: flex; justify-content: center; gap: 0.625rem;}
.btn { font-family: 'Signika Negative', sans-serif; border: 0.0625rem solid var(--secondary); color: var(--secondary); padding: 0.625rem 1.5rem; background:  #090606; border-radius: 0.25rem; width: 11.25rem; cursor: pointer;}
.btn.active { border-color: #FFF; color:#FFF;  }

@keyframes glowbox {
    0% {filter: drop-shadow(0 0 0.125rem var(--textmain)) drop-shadow(0 0 6.1875rem var(--greydark2));}
    50% {filter: drop-shadow(0 0 0.0625rem var(--textmain)) drop-shadow(0 0 2.0625rem var(--greydark2));}
    100% {filter: drop-shadow(0 0 0.125rem var(--textmain)) drop-shadow(0 0 6.1875rem var(--greydark2)); }
}

@keyframes glowtext {
    0% {text-shadow: 0rem 0rem 0.625rem #FFFC;}
    50% {text-shadow: 0rem 0rem 1.25rem #FFF9;}
    100% {text-shadow: 0rem 0rem 0.625rem #FFFC; }
}