*{
  --stars:url("img/stars.gif");
}

body {
  background-color: black;
  color: white;
  text-align: center;
  background-image: var(--stars);
  background-position: right top;
}

a {
  color: white;
}

h1 {
  background-color: black;
}

.black {
  background-color: black;
}

.box {
  --angle: 0deg;
	border: 1vmin solid;
	border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
	
	animation: 10s rotate linear infinite;
}

.big {
  width:50%;
  display: inline-block;
  vertical-align:top;
}
.small {
  width:20%;
  min-height:500px;
  height: 100%;
  display: inline-block;
  background-image: var(--stars);
  vertical-align:top;
  margin:5px;
  background-size: cover;
  background-repeat: repeat;
  background-position: center;
}

@keyframes rotate {
	to {
		--angle: 360deg;
	}
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.rainbow {
  text-align: center;
  font-size: 32px;
  font-family: monospace;
  letter-spacing: 5px;
  animation: colorRotate 6s linear 0s infinite;
}

@keyframes colorRotate {
  from {
    color: #6666ff;
  }
  10% {
    color: #0099ff;
  }
  50% {
    color: #00ff00;
  }
  75% {
    color: #ff3399;
  }
  100% {
    color: #6666ff;
  }
}