html { background-color: #333333; } 

body {
    min-height: 100vh;
    /* margin: 0 auto; */
    font-family: 'Courier Prime', monospace;
}

h3 {
  margin-top: 40px;
}

.subtitle {
  color: whitesmoke;
}

p {
 color: whitesmoke;
}

#title {
  color: whitesmoke;
  font-size: 80px;
}

.programmingdot {
  width: 16px;
  height: 16px;
  background-color: #ceab93;
  border-radius: 50%;
  display: flex;
  position: fixed;
  top: 6%;
  left: 52%;
  text-decoration: none;
  color: #ceab93;
  animation: pulse-white 2s 3;
}

.poetrydot {
  width: 16px;
  height: 16px;
  background-color: #ad8b73;
  border-radius: 50%;
  display: flex;
  position: fixed;
  top: 6%;
  left: 58%;
  text-decoration: none;
  color: #ad8b73;
  animation: pulse-white 2s 3;
}

@keyframes pulse-white {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

#center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

a {
  text-decoration: none;
  color: #b8967d;
}

#reftoprogrammingdot {
  top: 3.8%;
  left: 10%;
  position: relative;
}

.homecontainer {
  color: whitesmoke;
  font-size: 80px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 100px;
}

#poprogrammingdot {
  top: 56.0%;
  left: 10%;
}

#popoetrydot {
  top: 56.0%;
  left: 51.3%;
}

#prprogrammingdot {
  top: 56.0%;
  left: 10%;
}

#prpoetrydot {
  top: 56.0%;
  left: 51.3%;
}

#progref {
  color: #ceab93;
}

#poetref {
  color: #ad8b73;
}

.bottomcontainer {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}