Xavka

* {
    box-sizing: border-box
}

body {
    margin: 0;
    padding: 0;
    color: #fff;
}

Xavka

<div id="video-player" class="fullscreen-bg">
	<video class="fullscreen-bg__video" autoplay muted poster="img/BLUE_DOTS.jpg">
		<source src="video/BLUE_DOTS.mp4" type="video/mp4">
		<source src="video/BLUE_DOTS.webm" type="video/webm">
		<source src="video/BLUE_DOTS.ogv" type="video/ogg">
	</video>
	<div class="fullscreen-bg__playlist">
		<a href="video/BLUE_DOTS.mp4" class="current-video"></a>
		<a href="video/ORANGE_DOTS.mp4"></a>
		<a href="video/RED_DOTS.mp4"></a>

Xavka

p {
  color: black;
  background-color: white;
}
div.warning p {
  color: red;
}
div#caution p {
  color: yellow;
}

Xavka

.box--gradient {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, #011852 10px, #011852 20px), repeating-linear-gradient(-45deg, #ffd200, #ffd200 10px, #011852 10px, #011852 20px);
}

Xavka

.box--gradient {
  background-image: repeating-radial-gradient(circle, #ffd200, #ffd200 10px, #011852 10px, #011852 20px);
}

Xavka

.box--gradient {
  background-image: repeating-linear-gradient(45deg, #ffd200, #ffd200 10px, #011852 10px, #011852 20px);
}

Xavka

.box--gradient {
  background-image: radial-gradient(circle closest-side, #ffd200, #011852);
}

Xavka

.box--gradient {
  background-image: radial-gradient(circle at bottom right, #ffd200, #011852);
}

Xavka

.box--gradient {
  background-image: radial-gradient(circle, #ffd200, #011852);
}

Xavka

.box--gradient {
  background-image: radial-gradient(#ffd200, #011852);
}