/* General Reset & Layout */
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { background-color: #021027; }

.container {
  width: 100%; height: 100%;
  overflow: hidden;
  position: relative;
}

.background {
  display: block;
  position: absolute;
  top: 0; left: 0;
  object-fit: cover;
  width: 100%; height: 100%;
  mask-image: radial-gradient(white 0%, white 30%, transparent 80%, transparent);
}

/* The Animated Circles */
.circle-container {
  position: absolute;
  transform: translateY(-10vh);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  
  /* These will be set by JavaScript */
  width: var(--size);
  height: var(--size);
  animation-name: move;
  animation-duration: var(--duration);
  animation-delay: var(--delay);
}

.circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  mix-blend-mode: screen;
  background-image: radial-gradient(
    hsl(180, 100%, 80%),
    hsl(180, 100%, 80%) 10%,
    hsla(180, 100%, 80%, 0) 56%
  );
  animation: fade-frames 200ms infinite, scale-frames 2s infinite;
  animation-delay: var(--inner-delay);
}

/* Keyframes */
@keyframes move {
  from { transform: translate3d(var(--left-ini), var(--top-ini), 0); }
  to { transform: translate3d(var(--left-end), var(--top-end), 0); }
}

@keyframes fade-frames {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes scale-frames {
  0%, 100% { transform: scale3d(0.4, 0.4, 1); }
  50% { transform: scale3d(2.2, 2.2, 1); }
}

.message {
  position: absolute;
  right: 20px; bottom: 10px;
  color: white;
  font-family: "Josefin Slab", serif;
  line-height: 27px;
  font-size: 18px;
  text-align: right;
  pointer-events: none;
  animation: message-frames 1.5s ease 5s forwards;
  opacity: 0;
}

@keyframes message-frames {
  to { opacity: 1; }
}

.schoolinfo{
  position:relative;
  top:-50%;

  color:#fff;
  text-align:center;
}

.schoolinfo h1{
  font-size:3.5rem;
}

.schoolinfo h4{
  font-size:2rem;
  padding-top:3rem;
}