* {
  box-sizing: border-box;
}

body {
  margin: 0px;
}

#wrapper {
  inline-size: 100vw;
  block-size: 100vh;
  background-image: url("pages/Colour Switch/colourSwitch.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#socialsBar {
  /* inline-size by default for block elements is 100% */

  position: fixed; /* sticks the position of this element */
  left: 0;
  right: 0;
  inline-size: fit-content;
  margin-inline: auto; /* puts same amount of margin on both sides of element */
  text-align: center;
  display: flex;

  background: rgba(85, 24, 65, 0.4);
  border-width: 0px 5px 5px 5px;
  border-style: solid;
  border-color: rgba(190, 137, 63, 0.7);
  border-radius: 0px 0px 10px 10px;
}

.social {
  inline-size: 100%;
  block-size: 100%;
}

.social:hover {
  background-color: rgba(190, 137, 63, 0.7);
}

#mapCodeWrapper {
  max-inline-size: fit-content;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto; /* margin auto won't work with if left and right have a value above 0 when position is absolute */
  display: flex;
  justify-content: center; /* alligns all items to a position in the parent */
  align-items: center; /* alligns each items position */
  gap: 2%;
  padding: 0.4%;

  background: rgba(85, 24, 65, 0.4);
  border-width: 5px 5px 0px 5px;
  border-style: solid;
  border-color: rgba(190, 137, 63, 0.7);
  border-radius: 10px 10px 0px 0px;
  user-select: none;
}

#mapCodeWrapper:hover {
  cursor: copy;
}

.btn {
  inline-size: calc(4vw + 1em);
  block-size: calc(5vh + 1em);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* remove highlight when clicked on phone */
}

.btn:hover {
  fill: rgba(85, 24, 65, 1);
}

#mapCodeWrapper #mapCode {
  text-wrap: nowrap;
  font-size: calc(4vw + 1em); /* by including 1em zoom users can still zoom to make text bigger */
  text-align: center;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-style: normal;
  font-weight: 800;
  color: #551841;
  -webkit-text-stroke: rgba(190, 137, 63, 1);
  -webkit-text-stroke-width: 0.02em;
}