body {background-color:#444444; background-image: url("../fondo2.webp"); background-repeat: repeat;}
body, h1 {font-family: Arial, Helvetica, sans-serif; color: #EEEEEE; font-size: 30px;}
                          /*  rgba(60,75,90,0.9) #37587a #5a7b96                                #02101f #081020 */
.contenido { background-color:rgba(37,69,102,0.9); padding: 20px 40px; border-radius: 20px; box-shadow: 8px 8px rgba(0,0,0,0.3);
  text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.titulo { padding:0 0 5 15;text-align:left;font-weight:bold;} /* trbl*/

.W  {font-size:40px; font-weight: bold;}
.V1, .V2, .V3, .A1, .A2, .A3, .F, .PF, .CO2 {font-size:30px; font-weight: bold;}
.E1, .E2, .E3, .N {font-size:22px; font-weight: bold; color: #b8b8b8;}

.tooltip { position: relative; display: inline-block; }
.tooltip:hover .tooltiptext { visibility: visible; }
.tooltiptext { visibility: hidden; width: 200px; background-color: black; color: #fff; top: 30px; left: -50px; 
  text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1;}
.tooltiptext {font-size:15px;}

.T1 { grid-area: T1;}
.T2 { grid-area: T2;}
.T3 { grid-area: T3;}
.T4 { grid-area: T4;}
.T5 { grid-area: T5;}
.V1 { grid-area: V1;}
.V2 { grid-area: V2;}
.V3 { grid-area: V3;}
.A1 { grid-area: A1;}
.A2 { grid-area: A2;}
.A3 { grid-area: A3;}
.W  { grid-area:  W;}
.PF { grid-area: PF;}
.F  { grid-area:  F;}
.E1 { grid-area: E1;}
.E2 { grid-area: E2;}
.E3 { grid-area: E3;}
.N  { grid-area:  N;}
/*.EM { grid-area: EM;}*/

@media only screen and (orientation: landscape) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr 1fr;
    grid-template-rows: .25fr 1fr 1fr .25fr;
    gap: 10px 10px;
    grid-template-areas:
    "T1 T2 T3 T4 N"
    "V1 V2 V3  W F"
    "A1 A2 A3  W PF"
    "E1 E2 E3 EM T5";
  }
}

@media only screen and (orientation: portrait) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.25fr 1fr 1fr 0.25fr 1fr 1fr 0.25fr 0.25fr;
    gap: 10px 10px;
    grid-template-areas:
    "T4 T4 N"
    "W W F"
    "W W PF"
    "T1 T2 T3"
    "V1 V2 V3"
    "A1 A2 A3"
    "E1 E2 E3"
    "EM EM T5";
  }
}