#starryBGDiv {
  position: fixed;
  width: 108%;
  height: 100%;
  z-index: -30;
  top: 0;
  left: -8px;
  display: flex;
  background: url("Images/starryBG.png") no-repeat center;
  background-size: cover;
}

#aboutMeDiv {
  position: fixed;
  width: 108%;
  height: 100%;
  z-index: -30;
  top: 0;
  left: -8px;
  display: flex;
  background: url("Images/starryBG.png") no-repeat center;
  background-size: cover;
  color: rgb(255, 200, 255);
}

#projectsDiv {
  position: fixed;
  width: 108%;
  height: 100%;
  z-index: -30;
  top: 0;
  left: -8px;
  background: url("Images/starryBG_no-stars.png") no-repeat center;
  background-size: cover;
}

.aboutMeExplainDiv {
  height: 80%;
  width: 55%;
  align-self: center;
  justify-self: end;
  position: absolute;
  border-style: dotted dashed dotted dashed;
  border-width: 3px;
  border-color: rgb(255, 180, 255);
  border-radius: 8%;
  background: rgb(12, 1, 36);
  rotate: -1deg;
  z-index: 5;
  right: 10%;
  overflow-y: scroll;
}

#headerText {
  font-family: Georgia;
}

#metalGroundsText {
  text-align: center;
  width: 60%;
  padding: 5% 0;
  color: rgb(180, 180, 180);
  text-shadow: 2px 1px #000, -2px 1px #000;
  font-size: 3vw;
}

.menuOption {
  position: relative;
  background: url("Images/menuOptionBGAlt.png") no-repeat center;
  background-size: 100% 100%;
  
  border-image-source: url("Images/menuOptionBGAlt.png");
  border-image-slice: 36 118 36 72;
  border-image-width: 40px 106px 40px 106px;
  border-image-outset: 0 0 0 0;
  border-image-repeat: stretch stretch;
  
  display: flex;
  color: rgb(255, 200, 255);
  font-weight: bold;
  font-size: calc(0.85vw);
  width: 300%;
  height: auto;
  text-align: end;
  z-index: -19;
}

.robloxPlayButton {
  position: relative;
  width: 90%;
  background-color: rgb(77, 93, 255);
  border-radius: 8px;
  height: 4vh;
  display: flex;
  justify-content: center;
  align-content: center;
  margin: 15px auto 15px auto;
}

.aboutMeSection {
  margin: 0;
  background-color: rgb(52, 3, 107);
  border-style: inset;
  border-width: 3px;
  border-color: rgb(255, 100, 255);
  text-align: center;
  position: relative;
  display: inline-block;
}

.aboutMeInnerSection {
  width: 95%;
  background: rgb(72, 0, 120);
  border: solid;
  box-sizing: border-box;
  margin: auto;
  margin-bottom: 1%;
  border-radius: 6px;
}

.projectSection {
  width: 95%;
  background: rgb(72, 0, 120);
  border: solid;
  box-sizing: border-box;
  margin: auto;
  margin-bottom: 1%;
  border-radius: 6px;
  border-style: solid none solid none;
}

.socialMediaHandle {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  border-radius: 3px;
  background: url("Images/steam-icon-logo.png") no-repeat center;
  background-size: auto 100%;
  image-rendering: auto;
}

.blackBorderText {
  text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000,
               1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
}

.projectHeader {
  background: rgb(36, 5, 107);
  box-sizing: border-box;
  margin: 0;
  width: 50%;
  text-align: center;
  font-family: Georgia;
  border: 4px inset rgb(75, 0, 80);
  color: rgb(255, 200, 255);
  border-radius: 3px;
}