@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');

@font-face {
  font-family: "LED Dot-Matrix";
  src: url(static/LED-Dot-Matrix.ttf) format('truetype');
}

:root{
  --red: #FF5252;
  --blue: #5381E7;
  --skyblue: #28BADB;
  --orange: #F5972E;
  --green: #50D22D;
  --red-70: rgba(255, 82, 82, 0.7);
  --blue-70: rgba(83, 129, 231, 0.7);
  --skyblue-70: rgba(40, 186, 219, 0.7);
  --orange-70: rgba(245, 151, 46, 0.7);
  --green-70: rgba(80, 210, 45, 0.7);
}

.michroma-regular {
  font-family: "Michroma", sans-serif;
  font-weight: 400;
  font-style: normal;
}


html,
html * {
    cursor: url("static/luma.ani"), url("static/luma.cur"), auto !important;
}

body{
    background-image: url(static/palm\ ditt.png);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Michroma";
    margin: 0;
    min-height: 100vh;
}
main {
    width: 1080px; 
    display: grid;
  position: relative;
  grid-template-areas:
    "header header header"
    "LxMenu content DxMenu";
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr) minmax(0, 1fr);
  gap: 15px;
  padding: 10px;
}
main > .LxMenu,
main > .DxMenu {
  padding: 10px;
}
main iframe,
main img {
  max-width: 100%;
}
main > .header,
main > .LxMenu,
main > .DxMenu,
main > .content {
  border: 1px solid var(--panel-border, rgba(0, 0, 0, 0.7));
    border-radius: 6px;
    box-shadow:
      2px 2px 10px 1px var(--panel-border,rgba(0, 0, 0, 0.7)),
      inset 0 0 0 1px rgba(255, 255, 255, 0.98);
    position: relative;
    z-index: 0;
    padding: 20px;
}

main > .header::before,
main > .LxMenu::before,
main > .DxMenu::before,
main > .content::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background:
    hsla(210, 55%, 45%, 0.623);
  background-color: hsla(210, 55%, 45%, 0.39);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.99);
  opacity: 0.6;
}

main > .header::after,
main > .LxMenu::after,
main > .DxMenu::after,
main > .content::after {
  content: "";
  position: absolute;
  z-index: -10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}
main div.header {
  grid-area: header;
  text-align: left;
  --panel-border: var(--red-70);
  min-height: 50px;
  margin-top: 50px;

}
main div.LxMenu {
  grid-area: LxMenu;
  --panel-border: var(--blue-70);
}

main div.LxMenu ul {
  padding-left: 18px;
  margin: 10px 0;
  font-size: 11px;
  line-height: 1.6;
}

main div.LxMenu li {
  margin-bottom: 12px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

main div.LxMenu a {
  color: inherit;
  text-decoration: underline;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  word-break: break-word;
}

main div.LxMenu a img {
  width: 28px;
  height: auto;
}

main div.DxMenu {
  grid-area: DxMenu;
  --panel-border: var(--orange-70);
    justify-content: space-between;
}

main div.content {
  grid-area: content;
  --panel-border: var(--skyblue-70);
}



.slide-player {
  position: fixed;
  right: 0;
  top: 20%;
  display: flex;
  align-items: stretch;
  transform: translateX(600px) translateY(-50%);
  transition: transform 0.35s ease;
  z-index: 1000;
}

.slide-player.is-open {
  transform: translateX(0) translateY(-50%);
}
.slide-player__toggle {
  width: 48px;
  height: 250px;
  margin: 0;
  border: 0;
  border-radius: 20px 0 0 20px;
  padding: 0;
  background: linear-gradient(180deg, rgb(239, 241, 244) 0%, rgb(234, 236, 239) 20%, rgba(189,194,200,1) 95%, rgb(219, 222, 227) 100%);
  font: inherit;
  font-weight: 1000;
  cursor: pointer;
  overflow: hidden; 
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-player_toggle-frame{
    background: #0a3765;
    color: #3888f8;
    border: solid 1px dimgray;
    border-radius: 5px;
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75);
    padding: 5px 2px;
    font-family: "LED Dot-Matrix", monospace;
    overflow: hidden;
}
.slide-player_toggle-text {
    font-size: medium;
    writing-mode: vertical-rl;
    white-space: nowrap;
    animation: scroll-vertical 6s linear infinite;
}

@keyframes scroll-vertical {
    0% {
        transform: translateY(150%);
    }
    100% {
        transform: translateY(-150%);
    }
}

.slide-player iframe {
  display: block;
  width: 600px;
  height: 250px;
  border: 0;
}


.animalLink{
  position: fixed;
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
}

.animalLink > *:hover{

  zoom: 110%;
  transition: zoom 0.15s ease;
}

.tv-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

/* L'immagine della TV messa SOPRA */
.tv-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* Sta sopra al video */
  pointer-events: none; /* FONDAMENTALE: lascia passare i click al video sottostante */
}

/* Il contenitore del video messo SOTTO */
.video-wrapper {
  position: absolute;
  z-index: 1; /* Sta sotto la TV */
  
  /* Centra il video dietro il buco. 
     Fallo leggermente più grande del buco trasparente così i bordi 
     vengono nascosti e tagliati dalla cornice della TV. */
  top: 15%; 
  left: 14%;
  width: 72%;
  height: 60%;
}

/* Il player vero e proprio prende tutto lo spazio del suo wrapper */
.video-wrapper iframe {
  width: 100%;
  height: 100%;
}