:root {
  --background: #76c3ad;
  --color-white: white;
  --color-green: #286003;
}

@font-face {
  font-family: 'Invention';
  font-weight: normal;
  src: url("../data/fonts/Invention_W_Rg.woff") format('woff');
}
@font-face {
  font-family: 'Invention';
  font-weight: bold;
  src: url("../data/fonts/Invention_W_Bd.woff") format('woff');
}
@font-face {
  font-family: 'Invention';
  font-weight: light;
  src: url("../data/fonts/Invention_W_Lt.woff") format('woff');
}
@font-face {
  font-family: 'Invention';
  font-style: italic;
  src: url("../data/fonts/Invention_W_It.woff") format('woff');
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--color-white);
  background: var(--background);
  font-family: 'Invention';
  font-size: 60px;
  font-weight: bold;

  /* prevent text selection */
  user-select: none;

  /* prevent pull down page reload */
  overscroll-behavior: contain;
}

body {
  /* background-image: url('../data/BG.jpg'); */
  background-size: cover;
  background-position: bottom;
}

#view {
  width: 3840px;
  height: 2160px;
  transform: scale(1.0);
  transform-origin: top left;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* background-image: url('../data/BG.jpg');
  background-size: cover;
  background-position: bottom; */
}

#underlay, #overlay-boxes, #overlay-text {
  background-size: contain;
  background-repeat: round;
  position: absolute;
  width: 100%;
  height: 100%;
}
#underlay {
  background-image: url('../data/MSD2.svg');
}
#overlay-boxes {
  background-image: url('../data/MSD3.svg');
  opacity: 0.35;
}
#overlay-text {
  background-image: url('../data/MSD4.svg');
}

#heatmap-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
#layer {
  width: 100%;
  height: 100%;
}

span#instruction {
  width: 500px;
  text-align: center;
}

.panel {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  /* width: calc(100% - 80px);
  height: calc(100% - 80px);
  padding: 40px; */
  border-radius: 25px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
  gap: 40px;
  z-index: 2;
  color: var(--color-green);
  align-items: center;
  visibility: hidden;
}
#lock-panel.outer-panel {
  visibility: none;
}
#lock-panel .panel {
  justify-content: center;
}
#lock-panel .panel * {
  font-size: 40px;
}
#lock-panel input {
  width: 200px;
  text-align: center;
  border: 1px solid lightgray;
  color: var(--color-green);
}

/* #selection-panel .title {
  width: 1000px;
}

#selection-panel .part {
  margin: 50px 0 140px 0;
} */

#control-panel {
  visibility: visible;
  background-image: none;
}
#control-panel .panel {
  background: none;
  left: unset;
  right: 0;
  bottom: 0;
  gap: 260px;
  padding: 200px 20px 20px 200px;
}
#control-panel button {
  font-size: 20px;
  width: auto;
}
#control-panel .panel button {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}
#control-panel .panel:hover button {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s, visibility 0.3s;
}

#teams {
  width: 300px;
}

.part .team-count img {
  width: 40px;
  margin-right: 10px;
}

.team-count .count {
  width: 160px;
  display: inline-block;
}
.team-count .count#coop {
  text-align: right;
}

button.mode {
  width: 300px;
}

.outer-panel {
  width: 100%;
  height: 100%;
  /* background-color: #77b757; */
  /* background-image: url('../data/BG.png'); */
  background-size: contain;
  background-repeat: round;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  z-index: 2;
  position: absolute;
}

.headline {
  margin-top: -1085px;
  font-size: 200px;
}

.outer-panel .panel {
  padding: 40px;
  justify-content: start;
  visibility: inherit;
  bottom: 40px;
  left: 40px;
}

.panel #restart {
  position: absolute;
  top: 40px;
  right: 40px;
}

.space {
  flex: 1;
}
.panel .title {
  /* background-image: url('../data/UI_Button.svg');
  background-size: cover; */
  text-align: center;
  line-height: 140px;
  color: var(--color-green);
}

.countdown-panel .panel {
  bottom: unset;
  left: unset;
  background: transparent;
  color: var(--color-white);
  font-size: 60px;
}

.countdown-panel .instructions {
  width: 560px;
  margin-top: 40px;
  text-align: center;
}

.countdown-panel .box {
  /* background-image: url('../data/UI_box.svg');
  background-size: cover; */
  width: 560px;
  height: 324px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  box-sizing: border-box;
  margin-top: 40px;
}

.countdown-panel .box .countdown {
  font-size: 140px;
}

a, button {
  display: block;
  background: var(--color-white);
  border-radius: 25px;
  color: var(--color-green);
  text-decoration: none;
  cursor: pointer;
  padding: 10px 20px;
  border: 1px solid lightgray;
  /* box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; */
  font-family: inherit;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}

/* a:active {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 7px 8px -10px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
} */

a * {
  display: inline-block;
  height: 50px;
}

em {
  font-style: normal;
}

#heatmap-container {
  pointer-events: none;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s, visibility 0.3s;
}
#heatmap-container.hidden {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}

.heatmap {
  padding: relative;
  width: 100%;
  height: 100%;
}

.area {
  visibility: visible;
  position: absolute;
  /* border: 2px dashed rgba(255, 0, 0, 0.5); */
  box-sizing: border-box;
  width: 600px;
  height: 100px;
}

#area-1 {
  left: 461px;
  top: 849px;
}

#area-2 {
  left: 468px;
  top: 1144px;
}

#area-3 {
  left: 453px;
  top: 1474px;
}

#area-4 {
  left: 1233px;
  top: 853px;
}

#area-5 {
  left: 1229px;
  top: 1144px;
}

#area-6 {
  left: 1229px;
  top: 1476px;
}

#area-7 {
  left: 2014px;
  top: 932px;
}

#area-8 {
  left: 2009px;
  top: 1286px;
}

#area-9 {
  left: 2022px;
  top: 1519px;
}

#area-10 {
  left: 2777px;
  top: 871px;
}

#area-11 {
  left: 2789px;
  top: 1140px;
}

#area-12 {
  left: 2794px;
  top: 1323px;
}

#area-13 {
  left: 2778px;
  top: 1519px;
}