html, body {    background-color: #dddddd;
    overflow-x: hidden;
  font-family: Janson, "Times New Roman", Times, serif;



}

@font-face {
   font-family: Janson;
   src: url(/assets/fonts/JansonSSi.woff2);
}

@font-face {
   font-family: Janson;
   src: url(/assets/fonts/JansonSSiBold.woff2);
   font-weight: bold;
}
@font-face {
   font-family: Janson;
   src: url(/assets/fonts/JansonSSiBoldItalic.woff2);
   font-weight: bold;   
   font-style: italic;

}
@font-face {
   font-family: Janson;
   src: url(/assets/fonts/JansonSSiItalic.woff2);
   font-style: italic;
}

li{padding: 10px}
a { color:black } /* Globally */

/* Each state */


 @font-face { font-family: LTC; src: url('/assets/fonts/LTC.ttf'); } 

.auto-sized-text {
    height: 100%;
    background: red;
}

* {
    margin: 0;
    padding: 0;
      box-sizing: border-box;

}

 {
    background-color: rgba(255, 255, 255, 0.19);
    letter-spacing: 1vw;
    line-height: 2vw;
    margin: 1vh;
z-index: 10;
position: relative;

}

.screen {
    text-align: center;
    font-size: 35pt;
    margin: 0;
    word-wrap: break-word;

}

html,
body {
    height: 100%;
    margin: 0;
font-family: Janson;
    text-align: center;
}

table,h1{
    margin-left: 1vw;
}

li {
  position: relative;
  left: 20px;
}

li span{
  position: relative;
  left: -20px;
}
h1{
   //background-color:  rgba(255, 255, 255, 0.19)
}
img{
    height: ;
}
.container {
display: grid;
grid-template-columns: repeat(5, 20vw);
grid-template-rows: repeat(12, 20vw);
grid-column-gap: -5px;
grid-row-gap: -5px;
}.div1 { grid-area: 1 / 1 / 3 / 3; }
.div2 { grid-area: 2 / 2 / 4 / 4; }
.div3 { grid-area: 1 / 3 / 4 / 5; }
.div4 { grid-area: 2 / 4 / 5 / 6; }
.div5 { grid-area: 3 / 1 / 6 / 3; }
.div6 { grid-area: 4 / 2 / 7 / 4; }
.div7 { grid-area: 4 / 3 / 6 / 5; }
.div8 { grid-area: 5 / 3 / 8 / 5; }
.div9 { grid-area: 4 / 4 / 7 / 6; }
.div10 { grid-area: 6 / 1 / 8 / 3; }
.div11 { grid-area: 6 / 2 / 10 / 4; }
.div12 { grid-area: 7 / 1 / 11 / 3; }
.div13 { grid-area: 6 / 4 / 10 / 6; }
.div14 { grid-area: 8 / 3 / 12 / 5; }
.div15 { grid-area: 10 / 1 / 13 / 3; }
.div16 { grid-area: 9 / 2 / 13 / 4; }
.div17 { grid-area: 9 / 4 / 13 / 6; }
.div18 { grid-area: 10 / 3 / 13 / 5; }
.div19 { grid-area: 7 / 4 / 12 / 6; }

h3{z-index: 100}
.parent {
display: grid;
grid-template-columns: repeat(6, 16vw);
grid-template-rows: repeat(6, 16vh);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 7 / 7; }
.div2 { grid-area: 1 / 1 / 4 / 3; }
.div3 { grid-area: 2 / 2 / 6 / 5; }
.div4 { grid-area: 1 / 2 / 3 / 5; }
.div5 { grid-area: 3 / 1 / 7 / 4; }
.div6 { grid-area: 3 / 3 / 5 / 6; }
.div7 { grid-area: 4 / 4 / 7 / 6; }
.div8 { grid-area: 1 / 4 / 4 / 7; }
.div9 { grid-area: 3 / 5 / 6 / 7; }
.div10 { grid-area: 5 / 4 / 7 / 7; }