:root {
  color-scheme: dark;
  --focus: #00d4b8;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #000;
}

body {
  display: grid;
  justify-items: center;
}

.page {
  position: relative;
  width: min(100%, 1080px);
  background: #000;
}

.layout {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  border-radius: 6px;
}

.hotspot:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 4px;
}

.hosted {
  left: 7%;
  top: 22.3%;
  width: 86%;
  height: 5.2%;
}

.aseel {
  left: 8.3%;
  top: 40.4%;
  width: 36.2%;
  height: 3.5%;
}

.noorhan {
  left: 8.1%;
  top: 44.4%;
  width: 36%;
  height: 3.6%;
}

.hanin {
  left: 7.6%;
  top: 48.6%;
  width: 36.6%;
  height: 3.6%;
}

.kids4hope {
  left: 54.5%;
  top: 40.4%;
  width: 36.3%;
  height: 3.6%;
}

.hopemed {
  left: 54.8%;
  top: 44.5%;
  width: 36%;
  height: 3.6%;
}

.gaza-pulse {
  left: 54.8%;
  top: 48.7%;
  width: 36%;
  height: 3.6%;
}

.verified {
  left: 9.2%;
  top: 59.8%;
  width: 81.6%;
  height: 3.8%;
}

.contact {
  left: 30.3%;
  top: 84.7%;
  width: 39.4%;
  height: 5%;
}

@media (min-width: 1081px) {
  body {
    padding-inline: 24px;
  }
}