@font-face {
  font-family: clacon2;
  src: url(https://webdraft.eu/fonts/classic-console/fonts/clacon2.woff2);
}

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

a:link {
	color: white;
	background-color: black;
	padding: 5px;
	}

	a:visited {
	color: white;
	background-color: transparent;
	font-style: none;
	}

	a:hover {
	color: white;
	background-color: black;
	font-style: italic;
	border-style: solid;
	border-width: 2px;
	}

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

	a:active {
	color: white;
	text-decoration-line: overline;

	}
	
@keyframes rainbow {
  0% { color: #5BCEFA; }
  10% { color: #F5A9B8; }
  20% { color: #FFFFFF; }
  30% { color: #F5A9B8; }
  40% { color: #5BCEFA; }
  50% { color: #732982; }
  60% { color: #004CFF; }
  70% { color: #C8BFE6; }
  80% { color: #9C59D1; }
  90% { color: blue; }
  100% { color: #5BCEFA; }
  
}
 

.rainbow {
  animation: 10s infinite rainbow;
}


.active {
	background-color: black;
	text-decoration-line: overline;
    text-shadow: 1px 1px 4px White;
}

hr {
    width: 75%;

}



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

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

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

p.smol {
	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;}