@media (orientation:landscape) {
	:root {
    --politicalsize: 25rem;
    --politicalscale: 0.97;
	}
}
@media (orientation:portrait) {
	:root {
    --politicalsize: 15rem;
    --politicalscale: 0.95;
	}
}
canvas.politicalimage {
  position: absolute;
  max-height: var(--politicalsize);
  max-width: var(--politicalsize);
  object-fit: contain;
}
.resultPolitical {
  position: relative;
  width: var(--politicalsize);
  height: var(--politicalsize);
  margin: 2em;
}
#backgroundColors {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  width: var(--politicalsize);
  height: var(--politicalsize);
  z-index: -1;
  scale: var(--politicalscale);
}
#red {
  background-color: #ff7575eb;
}
#blue {
  background-color: #42aaffeb;
}
#green {
  background-color: #9aed97eb;
}
#purple {
  background-color: #c09aeaeb;
}
#left, #right, #authority, #liberty {
  position: absolute;
  padding: 0;
  margin: 0;
}
#left, #right {
  rotate: -90deg;
}
#left {
  left: -1.5em;
}
#right {
  right: -2em;
}
#authority {
  top: -1em;
}
#liberty {
  bottom: -1em;
}