/* Arc Palette */
:root {
  --arc-palette-foregroundPrimary: #c7c0e9 !important;
  --arc-palette-background: #1c1a26 !important;
  --arc-palette-backgroundExtra: #2b2839 !important;
}

/* Peek */
div#peekpage {
  height: 100vh;
  width: 74vw;
  margin: auto;
  border: 0;
  padding: 0;
  border-radius: 4px;
  animation: peekopen 0.5s;
  transition: scale 0.21s cubic-bezier(0.63, -0.01, 0.47, 1) !important;
}
div#peekpage iframe {
  width: 100%;
  height: 100%;
  border: 0;
  margin-bottom: -5px;
}
div#peekbackdrop {
  display: none;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 2147483647;
  background: rgba(57, 59, 82, 0.6);
  transition: opacity 0.3s;
  opacity: 0;
}

.peektools {
  border-radius: 100px;
  border: 0;
  display: inline-flex;
  font-size: 20px;
  font-weight: 300;
  width: 30px;
  height: 30px;
  margin-top: 20px;
  position: fixed;
  transform: translateX(calc(74vw + 10px));
  z-index: 1000;
  cursor: default !important;
  animation: buttonappear 1s;
  background: white;
  color: black;
  transition: background 0.1s !important;
}

.peektools:hover {
  background: #d4d4d4;
}

.peektools img {
  width: 17px;
  position: relative;
  margin: auto;
}

.peektools#open_in_full {
  margin-top: 60px;
}
@keyframes peekopen {
  from {
    scale: 0;
  }
  50% {
    scale: 1.03;
  }
}
@keyframes buttonappear {
  from {
    margin-left: 20px;
  }
}
