@font-face{font-family:Germanica;src:url(/fonts/germanica.bd858b38.ttf) format("truetype")}body{margin:0;padding:0;text-shadow:2px 2px 0 #000}#app,body{background-color:#312137;font-family:Germanica,Arial,sans-serif;color:#fff}#app{text-align:center;display:flex;flex-direction:column;height:100vh}header{background-color:#312137;color:#fff;padding:0;text-align:center;font-size:1.5rem;font-weight:700;text-shadow:5px 5px 0 #000;height:10px;box-sizing:border-box}.header-grid,header{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;width:100%}.header-grid{justify-items:center;height:20%}.youtube-player{display:flex;justify-content:center;align-items:center;height:80%;margin:auto}.youtube-player iframe{width:100%;max-width:400px;height:200px;border-radius:8px}h1{margin:0}main{display:flex;flex:1}.left-panel,.right-panel{flex:1;padding:10px;display:flex;flex-direction:column;border-radius:8px}.left-panel{background-color:#512839}.right-panel{background-color:#713141}.image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.image-grid button{display:flex;flex-direction:column;align-items:center;padding:10px;border:none;background-color:#ffffff1a;color:#fff;cursor:pointer;border-radius:8px;transition:background-color .3s ease;font-family:Germanica,Arial,sans-serif;text-shadow:2px 2px 0 #000}.image-grid img{width:100px;height:100px;-o-object-fit:cover;object-fit:cover;border-radius:8px}button:hover{background-color:#ffffff33}button:active{background-color:#ffffff4d}*{font-family:Germanica,Arial,sans-serif;color:#fff;text-shadow:2px 2px 0 #000}