html {
  position: relative;
  min-height: 100%;
}

.page {
  font-family: "PT Sans", system-ui, sans-serif;
  margin-bottom: 6rem;
  background-color: #000;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 6rem;
  background-color: #000;
  text-align: center;
  padding: 1rem;
  box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.25)
}

h1 {
  font-weight: bold;
}

a {
  text-decoration: none;
  font-weight: bold;
  color: #FFF;
  transition: 100ms;
}

a:hover {
  text-decoration: underline;
  color: #FFF;
}

.bg-black {
  background-color: #000;
}

.nav-item {
  font-weight: bold;
  font-size: 2rem;
}

.navbar-brand-img {
  height: 4rem;
}

.transition-fade {
  transition: 150ms;
  opacity: 1;
}

html.is-animating .transition-fade {
  transition: 75ms;
  opacity: 0;
}

.content {
  max-width: 40rem;
}

.project {
  margin: 1rem;
  height: 17rem;
  width: 17rem;
  padding: .5rem;
  position: relative;
  transition: 200ms;
  background-color: rgba(255, 255, 255, .05);
}

.project:hover {
  background-color: rgba(255, 255, 255, .12);
  transform: scale(1.05);
  transition: 250ms;
}

.project-dark {
  background-color: rgba(0, 0, 0, .54);
}

.project-dark:hover {
  background-color: rgba(0, 0, 0, .87);
}

.project-heading {
  position: absolute;
  bottom: .5rem;
  left: .5rem;
  right: .5rem;
  margin: 0;
  font-size: 1.5rem;
  font-weight: bold;
}

.circle {
  width: 50%;
  height: 50%;
  border-radius: 50%;
  position: absolute;
  top: 25%;
  left: 25%;
  padding: 1.25rem;
}

.valign {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.bg-guitardiy {
  background-color: hsl(0, 90%, 31%);
}

.project-guitardiy {
  box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.25), .5rem .5rem hsl(0, 90%, 31%), 0 0 .5rem .25rem rgba(0, 0, 0, 0.1);
}

.bg-adlight {
  background-color: hsl(182, 100%, 31%);
}

.project-adlight {
  box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.25), .5rem .5rem hsl(182, 100%, 31%), 0 0 .5rem .25rem rgba(0, 0, 0, 0.1);
}

.bg-cetaceans {
  background-color: hsl(202, 100%, 37%);
}

.project-cetaceans {
  box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.25), .5rem .5rem hsl(202, 100%, 37%), 0 0 .5rem .25rem rgba(0, 0, 0, 0.1);
}

.bg-generative {
  background-color: hsl(343, 85%, 53%);
}

.project-generative {
  box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.25), .5rem .5rem hsl(343, 85%, 53%), 0 0 .5rem .25rem rgba(0, 0, 0, 0.1);
}

.bg-volunteeringatgreenpeace {
  background-color: hsl(148, 95%, 31%);
}

.bg-gradient-volunteeringatgreenpeace {
  background: linear-gradient(-45deg, hsl(148, 95%, 31%), hsl(90, 100%, 40%)) no-repeat center center fixed;
  background-color: #000;
}

.project-volunteeringatgreenpeace {
  box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.25), .5rem .5rem hsl(148, 95%, 31%), 0 0 .5rem .25rem rgba(0, 0, 0, 0.1);
}

.bg-ohmygarden {
  background-color: hsl(134, 61%, 41%);
}

.bg-gradient-ohmygarden {
  background: linear-gradient(-45deg, hsl(119, 61%, 41%), hsl(134, 61%, 41%), hsl(149, 61%, 41%)) no-repeat center center fixed;
  background-color: #000;
}

.project-ohmygarden {
  box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.25), .5rem .5rem hsl(134, 61%, 41%), 0 0 .5rem .25rem rgba(0, 0, 0, 0.1);
}

.bg-canterburytheatreguild {
  background-color: hsl(194, 100%, 30%);
}

.bg-gradient-canterburytheatreguild {
  background: linear-gradient(-45deg, hsl(209, 100%, 30%), hsl(194, 100%, 30%), hsl(179, 100%, 30%)) no-repeat center center fixed;
  background-color: #000;
}

.project-canterburytheatreguild {
  box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.25), .5rem .5rem hsl(194, 100%, 30%), 0 0 .5rem .25rem rgba(0, 0, 0, 0.1);
}

.bg-toolsforinformationprocesses {
  background-color: hsl(19, 100%, 41%);
}

.bg-gradient-toolsforinformationprocesses {
  background: linear-gradient(-45deg, hsl(4, 100%, 41%), hsl(19, 100%, 41%), hsl(34, 100%, 41%)) no-repeat center center fixed;
  background-color: #000;
}

.project-toolsforinformationprocesses {
  box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.25), .5rem .5rem hsl(19, 100%, 41%), 0 0 .5rem .25rem rgba(0, 0, 0, 0.1);
}

.bg-prioritab {
  background-color: hsl(0, 0%, 13%);
}

.bg-gradient-prioritab {
  background: linear-gradient(135deg, hsl(0, 0%, 23%), hsl(0, 0%, 13%), hsl(0, 0%, 3%)) no-repeat center center fixed;
  background-color: #000;
}

.project-prioritab {
  box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.25), .5rem .5rem hsl(0, 0%, 13%), 0 0 .5rem .25rem rgba(0, 0, 0, 0.1);
}

.bg-steelmagnolias {
  background-color: #9C27B0;
}

.bg-gradient-steelmagnolias {
  background: linear-gradient(135deg, #880E4F, #4A148C) no-repeat center center fixed;
  background-color: #000;
}

.project-steelmagnolias {
  box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.25), .5rem .5rem #9C27B0, 0 0 .5rem .25rem rgba(0, 0, 0, 0.1);
}

.bg-littlemermaid {
  background-color: hsl(190, 100%, 28%);
}

.bg-gradient-littlemermaid {
  background: linear-gradient(135deg, hsl(180, 100%, 28%), hsl(190, 100%, 28%), hsl(200, 100%, 28%)) no-repeat center center fixed;
  background-color: #000;
}

.project-littlemermaid {
  box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.25), .5rem .5rem hsl(190, 100%, 28%), 0 0 .5rem .25rem rgba(0, 0, 0, 0.1);
}

.bg-avenueq {
  background-color: hsl(19, 86%, 57%);
}

.bg-gradient-avenueq {
  background: linear-gradient(135deg, hsl(29, 86%, 57%), hsl(19, 86%, 57%), hsl(9, 86%, 57%)) no-repeat center center fixed;
  background-color: #000;
}

.project-avenueq {
  box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.25), .5rem .5rem hsl(19, 86%, 57%), 0 0 .5rem .25rem rgba(0, 0, 0, 0.1);
}

.bg-sydneysecondarycollege {
  background-color: hsl(226, 63%, 37%);
}

.bg-gradient-sydneysecondarycollege {
  background: linear-gradient(135deg, hsl(216, 63%, 37%), hsl(226, 63%, 37%), hsl(236, 63%, 37%)) no-repeat center center fixed;
  background-color: #000;
}

.project-sydneysecondarycollege {
  box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.25), .5rem .5rem hsl(226, 63%, 37%), 0 0 .5rem .25rem rgba(0, 0, 0, 0.1);
}

.bg-9to5 {
  background-color: hsl(353, 84%, 57%);
}

.bg-gradient-9to5 {
  background: linear-gradient(135deg, hsl(343, 84%, 57%), hsl(353, 84%, 57%), hsl(3, 84%, 57%)) no-repeat center center fixed;
  background-color: #000;
}

.project-9to5 {
  box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.25), .5rem .5rem hsl(353, 84%, 57%), 0 0 .5rem .25rem rgba(0, 0, 0, 0.1);
}