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

html {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

.background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #77767b;
  /* overflow: hidden; */
}

.background span {
  width: 20vmin;
  height: 20vmin;
  border-radius: 20vmin;
  backface-visibility: hidden;
  position: absolute;
  animation: move;
  animation-duration: 45;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.background span:nth-child(0) {
  color: #583c87;
  top: 54%;
  left: 67%;
  animation-duration: 48s;
  animation-delay: -35s;
  transform-origin: -2vw 20vh;
  box-shadow: -40vmin 0 5.55093350513531vmin currentColor;
}
.background span:nth-child(1) {
  color: #583c87;
  top: 35%;
  left: 52%;
  animation-duration: 27s;
  animation-delay: -29s;
  transform-origin: -24vw -9vh;
  box-shadow: 40vmin 0 5.230846257244003vmin currentColor;
}
.background span:nth-child(2) {
  color: #583c87;
  top: 60%;
  left: 24%;
  animation-duration: 40s;
  animation-delay: -33s;
  transform-origin: -6vw -11vh;
  box-shadow: 40vmin 0 5.664971345346668vmin currentColor;
}
.background span:nth-child(3) {
  color: #583c87;
  top: 21%;
  left: 74%;
  animation-duration: 16s;
  animation-delay: -21s;
  transform-origin: -23vw 18vh;
  box-shadow: 40vmin 0 5.688612820876411vmin currentColor;
}
.background span:nth-child(4) {
  color: #583c87;
  top: 51%;
  left: 41%;
  animation-duration: 34s;
  animation-delay: -45s;
  transform-origin: -4vw -20vh;
  box-shadow: -40vmin 0 5.909380926821174vmin currentColor;
}
.background span:nth-child(5) {
  color: #583c87;
  top: 51%;
  left: 40%;
  animation-duration: 49s;
  animation-delay: -37s;
  transform-origin: -6vw 25vh;
  box-shadow: 40vmin 0 5.747672347009756vmin currentColor;
}
.background span:nth-child(6) {
  color: #583c87;
  top: 55%;
  left: 64%;
  animation-duration: 21s;
  animation-delay: -16s;
  transform-origin: -15vw -3vh;
  box-shadow: 40vmin 0 5.462287815554833vmin currentColor;
}
.background span:nth-child(7) {
  color: #583c87;
  top: 97%;
  left: 13%;
  animation-duration: 41s;
  animation-delay: -29s;
  transform-origin: -10vw -3vh;
  box-shadow: 40vmin 0 5.703933094680497vmin currentColor;
}
.background span:nth-child(8) {
  color: #ffacac;
  top: 37%;
  left: 11%;
  animation-duration: 7s;
  animation-delay: -15s;
  transform-origin: -17vw 23vh;
  box-shadow: -40vmin 0 5.213584394415591vmin currentColor;
}
.background span:nth-child(9) {
  color: #583c87;
  top: 23%;
  left: 55%;
  animation-duration: 14s;
  animation-delay: -32s;
  transform-origin: -21vw -9vh;
  box-shadow: 40vmin 0 5.375230156540387vmin currentColor;
}
.background span:nth-child(10) {
  color: #583c87;
  top: 86%;
  left: 12%;
  animation-duration: 6s;
  animation-delay: -7s;
  transform-origin: -16vw -13vh;
  box-shadow: 40vmin 0 5.532222130068649vmin currentColor;
}
.background span:nth-child(11) {
  color: #e45a84;
  top: 27%;
  left: 98%;
  animation-duration: 32s;
  animation-delay: -29s;
  transform-origin: 11vw -24vh;
  box-shadow: 40vmin 0 5.437013030510386vmin currentColor;
}
.background span:nth-child(12) {
  color: #583c87;
  top: 7%;
  left: 43%;
  animation-duration: 18s;
  animation-delay: -23s;
  transform-origin: -23vw 14vh;
  box-shadow: -40vmin 0 5.429383260229664vmin currentColor;
}
.background span:nth-child(13) {
  color: #e45a84;
  top: 67%;
  left: 64%;
  animation-duration: 18s;
  animation-delay: -14s;
  transform-origin: 17vw 14vh;
  box-shadow: 40vmin 0 5.412779548335254vmin currentColor;
}
.background span:nth-child(14) {
  color: #583c87;
  top: 82%;
  left: 53%;
  animation-duration: 6s;
  animation-delay: -3s;
  transform-origin: -5vw 19vh;
  box-shadow: -40vmin 0 5.702295581236497vmin currentColor;
}
.background span:nth-child(15) {
  color: #ffacac;
  top: 33%;
  left: 24%;
  animation-duration: 38s;
  animation-delay: -27s;
  transform-origin: 23vw -24vh;
  box-shadow: 40vmin 0 5.306883436324595vmin currentColor;
}
.background span:nth-child(16) {
  color: #583c87;
  top: 48%;
  left: 27%;
  animation-duration: 50s;
  animation-delay: -12s;
  transform-origin: 16vw -16vh;
  box-shadow: 40vmin 0 5.749210341627977vmin currentColor;
}
.background span:nth-child(17) {
  color: #583c87;
  top: 70%;
  left: 53%;
  animation-duration: 29s;
  animation-delay: -49s;
  transform-origin: -4vw -24vh;
  box-shadow: -40vmin 0 5.154345172739734vmin currentColor;
}
.background span:nth-child(18) {
  color: #e45a84;
  top: 35%;
  left: 24%;
  animation-duration: 10s;
  animation-delay: -29s;
  transform-origin: 9vw 2vh;
  box-shadow: 40vmin 0 5.036323732071682vmin currentColor;
}
.background span:nth-child(19) {
  color: #583c87;
  top: 79%;
  left: 94%;
  animation-duration: 49s;
  animation-delay: -5s;
  transform-origin: 16vw -16vh;
  box-shadow: 40vmin 0 5.697145050528146vmin currentColor;
}

header {
  height: 100%;
  color: #fff;
}

h1 {
  padding: 20px 0;
  font-size: 2em;
  text-align: center;
}
header p {
  font-size: 1.4em;
  text-align: center;
}

header p a {
  font-size: 0.8em;
  background-color: #55198d;
  border-radius: 10px;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  color: antiquewhite;
  display: inline-block;
  cursor: pointer;
}
header h2 {
  padding-top: 10px;
  font-size: 1.5em;
  text-align: center;
}

.btns {
  height: 400px;
  width: 100%;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.btn {
  height: 90%;
  min-width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn a {
  color: #fff;
  background-color: #194f8d;
  border-radius: 10px;
  padding: 15px 30px;
  text-align: center;
  text-decoration: none;
  font-size: 1.3em;
  cursor: pointer;
}

.btn:nth-child(1) {
  background-image: radial-gradient(
      circle at 47% 14%,
      rgba(205, 205, 205, 0.04) 0%,
      rgba(205, 205, 205, 0.04) 43%,
      transparent 43%,
      transparent 100%
    ),
    radial-gradient(
      circle at 35% 12%,
      rgba(215, 215, 215, 0.04) 0%,
      rgba(215, 215, 215, 0.04) 4%,
      transparent 4%,
      transparent 100%
    ),
    radial-gradient(
      circle at 1% 35%,
      rgba(24, 24, 24, 0.04) 0%,
      rgba(24, 24, 24, 0.04) 37%,
      transparent 37%,
      transparent 100%
    ),
    radial-gradient(
      circle at 21% 1%,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(0, 0, 0, 0.04) 26%,
      transparent 26%,
      transparent 100%
    ),
    radial-gradient(
      circle at 23% 82%,
      rgba(249, 249, 249, 0.04) 0%,
      rgba(249, 249, 249, 0.04) 60%,
      transparent 60%,
      transparent 100%
    ),
    radial-gradient(
      circle at 11% 54%,
      rgba(251, 251, 251, 0.04) 0%,
      rgba(251, 251, 251, 0.04) 23%,
      transparent 23%,
      transparent 100%
    ),
    radial-gradient(
      circle at 69% 68%,
      rgba(234, 234, 234, 0.04) 0%,
      rgba(234, 234, 234, 0.04) 10%,
      transparent 10%,
      transparent 100%
    ),
    linear-gradient(90deg, rgb(228, 46, 222), rgb(63, 61, 215));
}

.btn:nth-child(2) {
  background-color: #e5e5f7;
  opacity: 0.8;
  background-image: linear-gradient(#444cf7 2px, transparent 2px),
    linear-gradient(90deg, #444cf7 2px, transparent 2px),
    linear-gradient(#444cf7 1px, transparent 1px),
    linear-gradient(90deg, #444cf7 1px, #e5e5f7 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

.btn:nth-child(3) {
  background-color: #000000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpolygon fill='%23222222' points='800 100 0 200 0 800 1600 800 1600 200'/%3E%3Cpolygon fill='%23444444' points='800 200 0 400 0 800 1600 800 1600 400'/%3E%3Cpolygon fill='%23666666' points='800 300 0 600 0 800 1600 800 1600 600'/%3E%3Cpolygon fill='%23888888' points='1600 800 800 400 0 800'/%3E%3Cpolygon fill='%23aaaaaa' points='1280 800 800 500 320 800'/%3E%3Cpolygon fill='%23cccccc' points='533.3 800 1066.7 800 800 600'/%3E%3Cpolygon fill='%23EEE' points='684.1 800 914.3 800 800 700'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
}

.btn:nth-child(4) {
  background-image: url(./edinburgh-86.svg);
  background-size: contain;
}

.btn:nth-child(5) {
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='50' height='50' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,1)'/><path d='M44.11 8.56c-.065.316-.192.615-.24.931-.037.395-.11.796-.083 1.197.016.564.113 1.127.287 1.664.166.405.303.835.577 1.187.225.358.456.724.788.994.222.222.483.42.614.718.4.748.164 1.758-.536 2.242-.663.515-1.69.47-2.285-.131-.414-.374-.525-.936-.717-1.433-.195-.513-.238-1.06-.316-1.599 0-.442-.015-.886.008-1.327.073-.471.115-.955.235-1.42.081-.295.195-.578.303-.864.195-.472.436-.924.74-1.334.176-.282.439-.515.61-.809zm-2.819.134L38.42 14.01a1.83 1.83 0 01-2.446.745c-.878-.452-1.197-1.569-.745-2.446a2 2 0 01.745-.745zm.16-2.819a11.23 11.23 0 01-.771.638c-.49.34-1.008.652-1.581.832-.469.208-.978.308-1.484.387-.373.019-.736.106-1.112.084-.525.01-1.054-.003-1.566-.128-.563-.05-1.082-.293-1.612-.473-.832-.31-1.33-1.285-1.087-2.14.225-.892 1.211-1.49 2.107-1.28.45.09.836.38 1.111.738.274.272.54.558.89.73.347.243.713.455 1.117.586.428.163.87.291 1.329.322.578.108 1.18.056 1.755-.03.315-.026.605-.176.904-.266zm3.377.612a1.33 1.33 0 01-1.33-1.33 1.33 1.33 0 011.33-1.33 1.33 1.33 0 011.33 1.33 1.33 1.33 0 01-1.33 1.33zM41.439 44.11c-.315-.065-.614-.192-.93-.24-.395-.037-.796-.11-1.197-.083a5.959 5.959 0 00-1.664.287c-.405.166-.835.303-1.187.577-.358.225-.724.456-.994.788-.222.222-.42.483-.718.614-.748.4-1.758.164-2.242-.536-.515-.663-.47-1.69.131-2.285.374-.414.936-.525 1.433-.717.513-.195 1.06-.238 1.599-.316.442 0 .885-.015 1.326.008.472.073.956.115 1.421.235.295.081.578.195.864.303.472.195.924.436 1.334.74.282.177.515.439.809.61zm-.133-2.819L35.99 38.42a1.83 1.83 0 01-.745-2.446c.452-.878 1.569-1.197 2.446-.745a2 2 0 01.745.745zm2.819.16a11.223 11.223 0 01-.638-.771c-.34-.49-.652-1.008-.832-1.581-.208-.469-.308-.978-.387-1.484-.019-.373-.106-.736-.084-1.112-.01-.525.003-1.054.128-1.566.05-.563.293-1.082.473-1.612.31-.832 1.285-1.33 2.14-1.087.892.225 1.49 1.211 1.28 2.107-.09.45-.38.836-.738 1.111-.272.274-.558.54-.73.89-.243.347-.455.713-.586 1.117-.163.428-.291.87-.322 1.329-.108.578-.056 1.18.03 1.755.026.315.176.605.266.904zm-.612 3.377a1.33 1.33 0 011.33-1.33 1.33 1.33 0 011.33 1.33 1.33 1.33 0 01-1.33 1.33 1.33 1.33 0 01-1.33-1.33zM5.89 41.439c.065-.315.192-.614.24-.93.037-.395.11-.796.083-1.197a5.955 5.955 0 00-.287-1.664c-.166-.405-.303-.835-.577-1.187-.225-.358-.456-.724-.788-.994-.222-.222-.483-.42-.614-.718-.4-.748-.164-1.758.536-2.242.663-.515 1.69-.47 2.285.131.414.374.525.936.717 1.433.195.513.238 1.06.316 1.599 0 .442.015.885-.008 1.326-.073.472-.115.956-.235 1.421-.081.295-.195.578-.303.864a6.282 6.282 0 01-.74 1.334c-.176.282-.439.515-.61.809zm2.819-.133l2.871-5.317a1.83 1.83 0 012.446-.745c.878.452 1.197 1.569.745 2.446a2 2 0 01-.745.745zm-.16 2.819c.247-.226.507-.437.771-.638.49-.34 1.008-.652 1.581-.832.469-.208.978-.308 1.484-.387.373-.019.736-.106 1.112-.084.525-.01 1.054.003 1.566.128.563.05 1.082.293 1.612.473.832.31 1.33 1.285 1.087 2.14-.225.892-1.211 1.49-2.107 1.28-.45-.09-.836-.38-1.111-.738-.274-.272-.54-.559-.89-.73-.347-.243-.713-.455-1.117-.586-.428-.163-.87-.291-1.329-.322-.578-.108-1.18-.056-1.755.03-.315.026-.605.176-.904.266zm-3.377-.612a1.33 1.33 0 011.33 1.33 1.33 1.33 0 01-1.33 1.33 1.33 1.33 0 01-1.33-1.33 1.33 1.33 0 011.33-1.33zM8.561 5.89c.315.065.614.192.93.24.395.037.796.11 1.197.083a5.959 5.959 0 001.664-.288c.405-.165.835-.302 1.187-.576.358-.225.724-.456.994-.788.222-.222.42-.483.718-.614.748-.4 1.758-.164 2.242.536.515.663.47 1.69-.131 2.285-.374.414-.936.525-1.433.717-.513.195-1.06.238-1.599.316-.442 0-.885.015-1.326-.008-.472-.073-.956-.115-1.421-.235-.295-.081-.578-.195-.864-.303a6.281 6.281 0 01-1.334-.74c-.282-.177-.515-.439-.809-.61zm.133 2.819l5.317 2.871a1.83 1.83 0 01.745 2.446c-.452.878-1.569 1.197-2.446.745a2 2 0 01-.745-.745zm-2.819-.16c.226.247.437.507.638.771.34.49.652 1.008.832 1.581.208.469.308.978.387 1.484.019.373.106.736.084 1.112.01.525-.003 1.054-.128 1.566-.05.563-.293 1.082-.473 1.612-.31.832-1.285 1.33-2.14 1.087-.892-.225-1.49-1.211-1.28-2.107.09-.45.38-.836.738-1.111.272-.274.558-.54.73-.89.243-.347.455-.713.586-1.117.163-.428.291-.87.322-1.329.108-.578.056-1.18-.03-1.755-.026-.315-.176-.605-.266-.904zm.612-3.377a1.33 1.33 0 01-1.33 1.33 1.33 1.33 0 01-1.33-1.33 1.33 1.33 0 011.33-1.33 1.33 1.33 0 011.33 1.33zm22.515 22.552c2.052-.142 2.476-1.875 2.476-2.724 0-.849-.46-2.582-2.476-2.724C26.951 22.135 24.97 25 24.97 25s2.016 2.83 4.032 2.724zm-6.756 1.308c.142 2.052 1.875 2.476 2.724 2.476.849 0 2.582-.46 2.724-2.476C27.835 26.981 24.97 25 24.97 25s-2.83 2.016-2.724 4.032zm-1.308-6.756c-2.052.142-2.476 1.875-2.476 2.724 0 .849.46 2.582 2.476 2.724C22.989 27.865 24.97 25 24.97 25s-2.016-2.83-4.032-2.724zm6.756-1.308c-.142-2.052-1.875-2.476-2.724-2.476-.849 0-2.582.46-2.724 2.476C22.105 23.019 24.97 25 24.97 25s2.83-2.016 2.724-4.032z'  stroke-width='1' stroke='none' fill='hsla(258.5,59.4%,59.4%,1)'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}