style.css

a {
  color: sandybrown;
}

a:hover {
  color: gold;
}
nav {
  z-index: 99;
  background-color: rgb(15, 18, 25);
  height: 2rem;
}

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: rgb(15, 18, 25);
  color: aliceblue;
  font-family: "Courier New", Courier, monospace;
}

label {
  display: block;
  margin: 0.5rem 0;

}

main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}

.p-layers {
  width: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: solid white 2px;

}
.container {
  display: flex;
  flex-flow: row wrap;
}

.circle1 {
  background-color: aliceblue;
  width: 25rem;
  height: 25rem;
  border-radius: 50%;
  position: absolute;
  z-index: -10;
  top: 12rem;
  left: 2rem;
}

.circle2 {
  background-color: rgba(244, 164, 96, 90%);
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  align-self: flex-end;
  position: absolute;
  z-index: -5;
}

.circle3 {
  background-color: rgba(250, 235, 215, 50%);
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  position: absolute;
  justify-self: end;
  align-self: flex-end;
  z-index: 150;
}

.circle4 {
  background-color: rgba(244, 96, 96, 90%);
  width: 40rem;
  height: 40rem;
  border-radius: 10% ;
  position: absolute;
  justify-self: end;
  align-self: flex-end;
  z-index: -55;
}

.profile-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#profile-index {
  width: 500px;
  height: 500px;
}

#profile-about {
  width: 150px;
  height: 150px;
}

#profile-portfolio {
  width: 150px;
  height: 150px;
}
#profile-index,
#profile-about,
#profile-portfolio {
  border-bottom: solid saddlebrown 5px;
  border-top: solid saddlebrown 5px;
  z-index: 99;
}

.proj-container {
  justify-self: center;
  display: grid;
  grid-template-columns: 30% 30% 30%;
  gap: 20px;
}