canvas {
  position: fixed;
  top: 0;
  left: 0;
}
body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: black;
}

h1 {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-weight: normal;
  font-size: 1.9em;
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  display: none;
}
.words {
  width: 100%;
  height: 100%;
}

.button {
  --😀: #644dff;
  --😀😀: #0b2370;
  --😀😀😀: #1f16a563;
  cursor: pointer;
  width: 184px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 1.125em;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff;
  background: var(--😀);
  border: 2px solid var(--😀😀);
  border-radius: 0.75rem;
  box-shadow: 0 8px 0 var(--😀😀);
  transform: skew(-10deg);
  transition: all 0.1s ease;
  filter: drop-shadow(0 15px 20px var(--😀😀😀));
  z-index: 10;
  position: absolute;
}

.button:active {
  letter-spacing: 0px;
  transform: skew(-10deg) translateY(8px);
  box-shadow: 0 0 0 var(--😀😀😀);
}
.button2 {
  --😀: #644dff;
  --😀😀: #0b2370;
  --😀😀😀: #1f16a563;
  cursor: pointer;
  width: 184px;
  height: 48px;
  align-items: left;
  justify-content: left;
  gap: 1rem;
  font-size: 1.125em;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff;
  background: var(--😀);
  border: 2px solid var(--😀😀);
  border-radius: 0.75rem;
  box-shadow: 0 8px 0 var(--😀😀);
  transform: skew(-10deg);
  transition: all 0.1s ease;
  filter: drop-shadow(0 15px 20px var(--😀😀😀));
  z-index: 10;
  position: absolute;
}
.right {
  width: 100%;
  height: 100%;
}
.button2:active {
  letter-spacing: 0px;
  transform: skew(-10deg) translateY(8px);
  box-shadow: 0 0 0 var(--😀😀😀);
}
#background {
  display: none;
}
#resume {
  z-index: 10;
  position: absolute;
  bottom: 17%;
  left: 2%;
  display: none;
}
#projects {
  z-index: 10;
  position: absolute;
  bottom: 23%;
  left: 2%;
  display: none;
}
#contact {
  z-index: 10;
  position: absolute;
  bottom: 29%;
  left: 2%;
  display: none;
}
#about {
  z-index: 10;
  position: absolute;
  bottom: 11%;
  left: 2%;
  display: none;
}
#reveal {
  z-index: 10;
  position: absolute;
  bottom: 5%;
  left: 2%;
  display: none;
}
#emailME {
  z-index: 10;
  position: fixed;
  top: 3%;
  right: 2%;
  display: none;
}
#startbutton {
  display: none;
  bottom: 5%;
  left: 2%;
}
#res {
  z-index: 10;
  position: absolute;
  bottom: 11%;
  left: 2%;
  display: none;
}

#audio {
  z-index: 0;
}
#progress {
  left: 40%;
}
#bis {
  z-index: 10;
  position: absolute;
  bottom: 11%;
  left: 2%;
  display: none;
}
#download {
  height: 50px;
  margin-left: 35%;
}
#abt {
  z-index: 10;
  position: absolute;
  bottom: 11%;
  left: 2%;
  display: none;
}
#proj {
  z-index: 10;
  position: absolute;
  bottom: 11%;
  left: 2%;
  display: none;
}
.butto {
  left: 50%;
  transform: translate(-50%, 0);
  display: none;
  font-size: 27px;
  color: #e1e1e1;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  position: relative;
  border: none;
  background: none;
  text-transform: uppercase;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 400ms;
  transition-property: color;
}
.butto2 {
  left: 50%;
  transform: translate(-50%, 0);
  display: none;
  font-size: 27px;
  color: #e1e1e1;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  position: relative;
  border: none;
  background: none;
  text-transform: uppercase;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 400ms;
  transition-property: color;
}

.butto:focus,
.butto:hover {
  color: #fff;
}

.butto:focus:after,
.butto:hover:after {
  width: 100%;
  left: 0%;
}

.butto:after {
  content: "";
  pointer-events: none;
  bottom: -2px;
  left: 50%;
  position: absolute;
  width: 0%;
  height: 2px;
  background-color: #fff;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 400ms;
  transition-property: width, left;
}
#startBDiv {
  position: absolute;
  float: none;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.contactDiv {
  width: 100%;
  height: 100%;
  z-index: 1;
  display: none;
}
.cardContainer {
  right: 0%;
  bottom: 0%;
  width: 200px;
  height: 210px;
  background-color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  transition-duration: 0.5s;
  cursor: pointer;
}

.profileDiv {
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: black;
  transition-duration: 0.5s;
  color: rgb(155, 155, 155);
  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
}

.cardContainer:hover .profileDiv {
  transform: translateX(-25%) translateY(-20%);
  transition-duration: 0.5s;
}

.infoDiv {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: aliceblue;
  z-index: 1;
}

.nameDiv {
  width: 75%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background-color: aliceblue;
  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Helvetica, Arial, sans-serif;
  gap: 2px;
}

.name {
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
  color: black;
}

.role {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: rgb(48, 48, 48);
  margin-bottom: 5px;
}

.socialDiv {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgb(14, 14, 14);
  gap: 25px;
}

.infoDiv a {
  width: 50%;
}

.socials {
  width: 100%;
  fill: rgb(14, 14, 14);
}