@keyframes rainbow {
  0% { color: red; }
  25% { color: yellow; }
  50% { color: green; }
  75% { color: blue; }
  100% { color: purple; }
}

@font-face {
                font-family: clacon;
                src: url('https://webdraft.eu/fonts/classic-console/fonts/clacon2.ttf');
            }
.rainbow {
  animation: 3s infinite rainbow;
}

body {
	background-color: black;
	font-family: 'clacon';
	color: white;
	text-align: center;
}

a:link {
	color: white;
	background-color: black;
	text-decoration: none;
	border-radius: 8px;
	padding: 5px;
	}

	a:visited {
	color: white;
	background-color: transparent;
	text-decoration: none;
	border-radius: 8px;
	font-style: none;
	}

	a:hover {
	color: white;
	background-color: black;
	text-decoration: none;
	border-radius: 8px;
	font-style: italic;
	border-style: solid;
	border-width: 2px;
	}

	a:hover:not(.active) {
	background-image: linear-gradient(black, gray);
	}

	a:active {
	color: white;
	text-decoration: none;
	border-radius: 8px;
	}

.active {
	background-color: black;
}

p.navbar {
	position: fixed;
	width: 100%;
}

h1.ukraine {
	background-image: linear-gradient(blue, yellow);
    color: transparent;
    background-clip: text;
}

p.footer {
	font-size: 70%;
}

#shadow1 {
	border: 1px solid white;
	padding: 10px;
	box-shadow: 5px 5px white;
	width: 300px;
	height: 30px;
	background-image: linear-gradient(black, gray);
	transition: width 2s;
	transition-timing-function: ease;
}

#shadow1:hover {
	background-image: linear-gradient(gray, black);
	width: 500px;
}

#shadow2 {
	box-shadow: 5px 5px 5px white;
}

table {
  border-collapse: collapse;
  width: 100%;
  border-radius: 10px;
  border-color: white;
}

th, td {
  text-align: center;
  padding: 8px;
}

tr:hover {background-color: gray;}