body {
  height: 100%;
  background: linear-gradient(skyblue, black) no-repeat;
  color: white;
  font-family: Verdana;
}

a {
 color: white; 
}

a:hover {
 cursor: pointer; 
}

table, th, td {
	border: 1px solid white;
}

.text-box img {
	height: 25%;
	width: 25%;
	float: left;
	padding: 1%;
}

.inner-body {
  width: 80%; 
  padding-left: 10%;
  padding-right: 10%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.top-bar {
  width: 100%;
  position: fixed;
  background-color: rgba(0,0,0,0.5);
  backdrop-filter: blur(5px);
  left: 0;
  top: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  z-index: 10;
}

.top-bar div {
  float: none;
    height: 90%;
    margin: 0 0.25%;
    display: inline-block;
    zoom: 1;
}

.top-bar a {
  float: left;
  color: white;
  background-color: rgba(100,100,100,0.75);
  text-align: center;
  padding: 14px 10px;
  text-decoration: none;
  font-weight: bold;
  font-size: 20px; 
  border-radius: 10px;
  transition: .25s;
}

.top-bar p {
  float: left;
  color: white;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px; 
}

.top-bar a:hover {
  color: skyblue;
  background-color: rgba(50,50,50,0.95);
  padding: 14px 15px;
  transition: .25s;
  animation: shake .25s;
}

.top-bar a:active {
  color: black;
  background-color: rgba(100,100,100,0.85);
  transition: .25s;
}

.primary-button {
  color: white;
  background-color: rgba(100,100,100,0.5);
  text-align: center;
  padding: 5px 10px;
  text-decoration: none;
  font-weight: bold;
  font-size: 20px; 
  border-radius: 10px;
  transition: .25s;
}

.primary-button:hover {
  color: skyblue;
  background-color: rgba(50,50,50,0.75);
}

.primary-button:active {
  color: black;
  background-color: rgba(100,100,100,0.75);
  transition: .25s;
}

.text-box {
  background-color: rgba(0,0,0,0.3);
  padding: 10px;
  border-radius: 10px;
  backdrop-filter: blur(2px);
  z-index: 8;
}

.text-box p {
  font-size: 18px;
}

.text-box a {
  color: white;
  transition: .25s all;
}

.text-box a:hover {
  font-size: 20px;
  padding: 5px;
  background-color: rgba(50,50,50,0.5);
  color: skyblue;
  transition: .25s all;
  border-radius: 5px;
}


@keyframes shake {
  0% {transform: translate(5px,0px); }
  10% {transform: translate(-2px,1px); }
  20% {transform: translate(5px,1px); }
  30% {transform: translate(3px,0px); }
  40% {transform: translate(-2px,1px); }
  50% {transform: translate(-1px,3px); }
  60% {transform: translate(0px,3px); }
  70% {transform: translate(-1px,-2px); }
  80% {transform: translate(-4px,0px); }
  90% {transform: translate(-5px,1px); }
  100% {transform: translate(5px,5px); }
}