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

html {
  width: 100%;
  height: 100%;
  font-size: 18px;
}

body {
  width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0E0027;
  position: relative;
  overflow: hidden;
}

.grid {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: #0E0027;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  grid-gap: 1px;
  z-index: 0;
  overflow: hidden;
}
.grid .grid-highlight {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, #0e0027 50%);
  z-index: -1;
}
.grid .item {
  background: #0E0027;
  transition: background .25s ease;
}

.lamp {
  position: absolute;
  margin: auto;
  height: 50vh;
  width: 4vh;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 2vh;
  background: #fff;
  z-index: 1;
  box-shadow: 0 0 1vh 0.5vh #c0e0fc, 0 0 2vh 1vh #c0e0fc, 0 0 5vh 1vh #90c8f9, 0 0 10vh 1vh #77bcf8, 0 0 15vh 1vh #5FB0F7, 0 0 20vh 1vh #5FB0F7, 0 0 25vh 1vh #5FB0F7, 0 0 50vh 1vh #5FB0F7;
  transition: box-shadow .5s ease;
}
.lamp--to-left {
  box-shadow: 0 0 1vh 0.5vh #c0e0fc, -1vh 0 2vh 1vh #c0e0fc, -4vh 0 5vh 1vh #90c8f9, -10vh 0 10vh 1vh #77bcf8, -13vh 0 15vh 1vh #5FB0F7, -15vh 0 20vh 1vh #5FB0F7, -25vh 0 25vh 0 #5FB0F7, -50vh 0 50vh 0 #5FB0F7;
}
.lamp--to-right {
  box-shadow: 0 0 1vh 0.5vh #c0e0fc, 1vh 0 2vh 1vh #c0e0fc, 4vh 0 5vh 1vh #90c8f9, 10vh 0 10vh 1vh #77bcf8, 13vh 0 15vh 1vh #5FB0F7, 15vh 0 20vh 1vh #5FB0F7, 25vh 0 25vh 0 #5FB0F7, 50vh 0 50vh 0 #5FB0F7;
}

.tilt-btn {
  position: fixed;
  right: 1rem;
  top: 1rem;
  padding: .5rem 1rem;
  display: block;
  background: #7527ff;
  color: #fff;
  transition: opacity .25s ease;
  cursor: pointer;
}
.tilt-btn--off {
  opacity: .6;
  text-decoration: line-through;
}
.tilt-btn:hover {
  opacity: 1;
  text-decoration: none;
}