@font-face {
    font-family: 'OldWitch';
    src: url('old_witch.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('old_witch.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  

@font-face {
    font-family: 'Carmen';
    src: url('carmen.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('carmen.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  

body {
  font-family: Consolas, monospace;
  font-size: 24px;
  margin: 0px;

  padding: 2px 12px;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  background-color: #000;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.header {
	# position: absolute;
	top: 0;
	font-family: OldWitch, monospace;
	color: #fff;
	font-size: 3.1rem;
    text-align: center;
	flex-basis: 100%;
}

.subheader {
	# position: absolute;
	font-family: Consolas, monospace;
	padding-bottom: 6px; 
	color: #fff;
	font-size: 1.2rem;
    text-align: center;
	flex-basis: 100%;
}

.container {
	
  flex-basis: 1200px;
  box-sizing: content-box;
  align: center;
  border: solid 4px #000;
  padding: 0px;
  display: inline-flex;
  gap: 12px;
}

.item {
  box-sizing: border-box;
  color: #fff;
 # padding: 100px 130px;
  text-align: center;
  border-radius: 8px;
  border: solid #000 2px;
  background-size: cover;
  
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-end;
}
  
  .subitem-0 {
    display: none;
  }
  
  .subitem-1 {
	font-size: 3.1rem;
	text-shadow: 
    2px 2px 1px #000, 
    -2px -2px 1px #000, 
    2px -2px 1px #000, 
    -2px 2px 1px #000;
    flex-grow: 1;
    padding: 20px;
    display: none;
  }
  
  
 .item-1 .subitem-1 {
	font-family: Carmen, monospace;
  }
  
 .item-2 .subitem-1 {
	font-family: OldWitch, monospace;
  }
  
 .item-3 .subitem-1 {
	font-family: OldWitch, monospace;
  }
  
  .subitem-2 {
	aspect-ratio: 10/1;
    background-size: cover;
	background-image: url("map_border.png");
    display: none;
  }
  
  .subitem-3 {
	font-size: 1.2rem;
	background-color: #110600;
    padding: 20px;
    display: none;
  }
  
.subitem-3 img {
	height: 3rem;
	width: 3rem;
}

.subitem-3 a {
	overflow-wrap: anywhere;
    text-overflow: ellipsis;
	#font-size: 0.1rem;
}

.item:hover  {
  border: solid #555 2px;
 # cursor: pointer;
}

.item:hover .subitem-1 {
  display: block;
}
.item:hover .subitem-2 {
  display: block;
}
.item:hover .subitem-3 {
  display: block;
}
  .item-1 {
	background-image: url("map1.png");
  }
  /*
  .item-1:hover {
	background-image: url("map1_1.png");
  }
  .item-2:hover {
	background-image: url("map2_1.png");
  }
  .item-1.hovered {
    border: solid #555 2px;
	background-image: url("map1_1.png");
  }
    */
  .item-2 {
	background-image: url("map2.png");
  }
  
  .item-4 {
	  display: none;
	  height: 400px;
  }

@media all and (orientation:landscape) {
  .container {
    flex-direction: block;
	flex-wrap: wrap; 
  }
  
  .item {
    flex-grow: 1;
  }
  
  .item-1 {
	aspect-ratio: 2/3;
	background-image: url("map1.png");
  }
  
  .item-2 {
	aspect-ratio: 2/3;
  }
  
  .item-3 {
	flex-basis: 100%;
	aspect-ratio: 2/1;
	background-image: url("map3.png");
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-end;
  }
  
  .item-3 .subitem-0 {
	  flex-grow: 1;
      align-self: center;
  }
  
  .item-3 .subitem-1 {
	  flex-grow: 0;
	  
	  flex-basis: 0;
  flex-shrink: 1;
  align-self: center;
  }
  
  .item-3 .subitem-2 {
	aspect-ratio: 1/10;
	background-image: url("map_border_1.png");
	  flex-grow: 0;
  }
  .item-3 .subitem-3 {
	  flex-grow: 0;
	  flex-basis: 30%;        
	  
  flex-shrink: 0;
	  align-content: center;
  }
  
  .item:hover .subitem-0 {
    display: block;
  }
  
  
}

@media all and (orientation:portrait) {
  .container {
    flex-direction: column;
  }
  
  .item {
	  min-height: calc(150vw);
        width: 100%;
  }
  
  .item-3 {
	background-image: url("map4.png");
  }
  
  .subitem-1 {
	font-size: 2.9rem;
  }
}