/* Variables */
:root {
  --at-blue: #1A55E7;
  --at-blue-light: #a5c7fb;
  --at-blue-dark: #0F3C9E;
  --at-dark: #0A2A73;
  --at-light: #F5F5F5;
}

/* Colors */
.bg-at-blue {
  background-color: var(--at-blue) !important;
}

.bg-at-blue-light {
  background-color: var(--at-blue-light) !important;
}

.bg-at-blue-dark {
  background-color: var(--at-blue-dark) !important;
}

.bg-at-dark {
  background-color: var(--at-dark) !important;
}

.bg-at-light {
  background-color: var(--at-light) !important;
}

/* Backgrounds */
body,
.bg-at-svg {
  background-image: url("../img/circuit-top.svg");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}

.bg-at-svg {
  background-image: url("../img/circuit-dark.svg");
}

/* SVG Animation */
#at-in-circle {
  transform-origin: 50% 50%;
  animation: at-in-circle 2s infinite;
}

#at-circle {
  transform-origin: 50% 50%;
  animation: at-circle 2s infinite;
}

@keyframes at-in-circle {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(.85);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes at-circle {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

/* Video */
.at-spot {
  display: grid;
  place-items: center;
  padding: 3rem 0 1rem 0;
}

.at-spot video {
  /* max-width: 600px; */
  text-align: center;
  border-radius: 1rem;
}

/* Text */
.at-point {
  padding: .5rem 1rem;
  margin-right: 1rem;
  text-align: center;
  text-decoration: none !important;
  color: var(--at-light) !important;
  background: var(--at-blue);
  border-radius: 5rem;
}

@media (width <= 768px) {
  .at-point {
    padding: .25rem .55rem;
    margin-right: .5rem;
    font-size: 1rem !important;
  }
}

.at-point:hover {
  background: var(--at-blue-dark);
}

a[href*="//"]:not([href*="agiliteach.org"]) {
  text-decoration: none;
  color: var(--at-blue);
}

a[href*="//"]:not([href*="agiliteach.org"]):hover {
  text-decoration: underline;
}

a[href*="//"]:not([href*="agiliteach.org"])::after {
  content: "↗";
  font-size: .8rem;
  color: var(--at-blue);
  margin-left: .25rem;
}