* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  background: #ffffff;
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  display: grid;
  cursor: url("assets/cursors/cursor.svg") 2 2, auto;
  grid-template-rows: auto 1fr;
  overflow-x: hidden;
  height: 100vh;
}

a,
button {
  cursor: url("assets/cursors/pointinghand.svg") 2 2, auto;
}

header,
section {
  display: grid;
  grid-template-columns: 8rem 1fr 8rem;
  text-align: center;
}

header {
  background-color: #1d4973;
  color: #f0eadb;
}

header h1 {
  font-size: 1.6rem;
  padding: 1rem 2rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-title {
  grid-column-start: 2;
  min-width: 0;
}

#page-title,
#content {
  box-shadow: 0 12px 0px 0px white, 12px 0 15px -4px rgba(0, 0, 0, 0.15),
    -12px 0 15px -4px rgba(0, 0, 0, 0.15);
}

nav {
  display: flex;
  align-items: center;
  justify-self: center;
}

nav a {
  color: inherit;
  text-decoration: none;
  padding: 1rem;
}

.controls {
  display: grid;
  align-items: center;
  justify-content: center;
}

.sticker {
  cursor: url("assets/cursors/openhand.svg") 2 2, auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100px;
  position: relative;
  touch-action: none;
  z-index: 100;
  width: 86px;
  height: 86px;
}

.sticker.drag-active {
  cursor: url("assets/cursors/closedhand.svg") 2 2, auto;
}

#content {
  background: url("assets/images/quadrants-empty.png") center center no-repeat;
  background-size: auto 95%;
  position: relative;
}

#quadrants-wrapper {
  background: url("assets/images/quadrants.png") center center no-repeat;
  transition: opacity 0.1s ease-in-out;
  opacity: 0;
  width: 100%;
  height: 100%;
}

#quadrants-wrapper.visible {
  opacity: 100;
}

#content,
#quadrants-wrapper {
  background-size: contain;
}

#energy-button {
  background: url("assets/images/energy-button.png") center no-repeat;
  background-size: contain;
  border: none;
  transition: transform 0.1s ease-in-out;
  position: absolute;
  top: 0rem;
  right: 1rem;
  width: 120px;
  height: 68px;
}

#energy-button:active {
  transform: scale(0.96);
}

#version-number {
  color: #a2a6b3;
  font-weight: bold;
  position: absolute;
  bottom: 1.2rem;
  right: 1.25rem;
}