body {
    background-color: #000000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpolygon fill='%2310122f' points='800 100 0 200 0 800 1600 800 1600 200'/%3E%3Cpolygon fill='%2321255e' points='800 200 0 400 0 800 1600 800 1600 400'/%3E%3Cpolygon fill='%2331378d' points='800 300 0 600 0 800 1600 800 1600 600'/%3E%3Cpolygon fill='%234149bc' points='1600 800 800 400 0 800'/%3E%3Cpolygon fill='%237076cd' points='1280 800 800 500 320 800'/%3E%3Cpolygon fill='%239fa3de' points='533.3 800 1066.7 800 800 600'/%3E%3Cpolygon fill='%23CED0EE' points='684.1 800 914.3 800 800 700'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    /* Free SVG Backgrounds and Patterns by SVGBackgrounds.com; Matt Visiwig */
    color: white;
    font-family: Ubuntu;
    font-weight: 300;
} 

nav {
  background-color: rgba(0,0,0,0.9);
  padding: .33rem;
  border-radius: 1rem;
}

nav ul {
  list-style: none;
  display: grid;
  grid-template-columns: auto 10px auto 10px auto 10px auto 10px 2.2rem;
  padding-left: .33rem;
  margin: .2rem;
}

nav ul a {
  text-align: center;
  border-width: 3px;
  border-color: white;
  border-style: solid;
  padding: .33rem;
  text-decoration: none;
  color: white;
  border-radius: .33rem;
  transition: all .33s;
}

nav ul a:hover {
  border-color: rgba(0, 0, 0, 0);
  color: black;
  background-color: rgba(255, 255, 255, 0.5);
}

hr {
  width: 90%;
}

.currentP {
  text-decoration: underline;
  font-style: italic;
  font-weight: bold;
}

h1 {
  text-align: center;
}

a {
  color: inherit;
}

.content p a:hover {
  background-clip: text;
  animation: rainbow 1s linear 1;
}

.noBorder {
  border-style: none;
}

.noMargin {
  margin: none;
}

.noPadding {
  padding: none;
}

.titleLine {
  border-bottom: 3px solid white;
  width: 75%;
  margin: 0 auto;
}

.cursive {
  font-family: Playwrite CU;
}

.colourful {
  animation: blue 1s infinite linear alternate;
}

.content {
  background-color: rgba(0,0,0,0.5);
  padding: 0.001rem 1rem;
  border-radius: 1rem;
  width:90%;
  margin: 0 auto;
  transition: all .33s;
}

.content:hover {
  padding: .001rem 2rem;
}

.blog-title {
  display: flex;
  justify-content: space-between;
}

  .file {
  background-color: rgba(96,96,96,0.5);
  padding: .5rem .1rem;
  border-radius: .5rem;
  text-align: center;
  margin: .2rem;
  transition: background-color .2s, color .2s;
}

.file:hover {
  background-color: rgba(255,255,255,0.5);
  color: black;
}

.centre {
  display: flex;
  justify-content: center;
  align-items: center;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.tablic-p {
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
}

.tablic-c {
  flex: 1;
  text-align: center;
  vertical-align: middle;
  width: 50%;
}
  
@keyframes blue {
  0% {color:rgb(51, 204, 204)}
  50% {color:rgb(0, 102, 204);}
  100% {color:rgb(153, 153, 255);}
}

@keyframes rainbow {
  0% {background-image: linear-gradient(to right, white, red);  color: transparent;}
  12.5% {background-image: linear-gradient(to right, red , orange);}
  25% {background-image: linear-gradient(to right, orange , yellow);}
  37.5% {background-image: linear-gradient(to right, yellow , green);}
  50% {background-image: linear-gradient(to right, green , blue);}
  62.5% {background-image: linear-gradient(to right, blue , indigo);}
  75% {background-image: linear-gradient(to right, indigo , violet);}
  87.5% {background-image: linear-gradient(to right, violet , red);}
  93.5% {background-image: linear-gradient(to right, red , white);}
  100% {background-image: linear-gradient(to right, white , red); color: white;}
}

#announcementDiv {
  width:100%;
  background-color: rgba(0,0,0,0.75);
}

#announcementText {
  margin: 0;
  padding: 0;
}

#handwritten {
  stroke-dasharray: 10918;
  stroke-dashoffset: 10918;
  animation: write 3s ease;
  animation-fill-mode: forwards;
}

@keyframes write {
  to {
      stroke-dashoffset: 0;
  }
}