.logo {
  height: 4vh;
}
.logowrap {
  height: 7vh;
  width: 7vh;
  top: 30px;
  left: 30px;
}
.hero {
  height: 100vh;
  margin-bottom: 10vh;;
}
.hero h1 span {
  display: block;
  margin-bottom: 10px;
}
.hero h1 {
  margin-left: 30px;
  text-align: left;
  font-size: 9.8vw;
  line-height: 1.1;
}
.hero p {
  margin-left: 30px;
  font-size: 3.5vw;
  text-align: left;
}
.about {
  padding-right: 15px;
  padding-left: 15px;
}
.about p {
  height: 80vh;
  font-size: 2rem;
  padding-inline: 0px;
  margin: 0px;
}
.about h1 {
  margin-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px;
  font-weight: 100;
  font-size: 6.3vh;
}

.skillStack{
    margin-top: 0px;
}

.techStack{
    margin-top: 200px;
}

.about h3 {
  padding-top: 20px;
  text-wrap: wrap;
  font-size: 4.6vh;
}
.about h3 a img {
  height: 20px;
  filter: brightness(0) invert(1);
}
.projtitle {
  font-size: 6.3vh;
  margin-inline: 25px;
}
.projects {
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0px;
}
.aesthetisia,
.warcards,
.sushimenu,
.XOXO,
.AVA,
.ELM,
.LooneyLists,
.NotationXL,
.CafeMenu,
.Shimmer {
  height: 420px;
  width: 420px;
  transform: scale(0.89);
  background-color: #151517;
}
.aesthetisia:hover,
.warcards:hover,
.sushimenu:hover,
.XOXO:hover,
.AVA:hover,
.LooneyLists:hover,
.NotationXL:hover,
.CafeMenu:hover,
.Shimmer:hover {
  background-color: #151517;
  transform: scale(0.89);
  transition: background-color 1s, transform 0.5s;
}
.moreproj {
    font-size: 2rem;
    padding-inline: 20px;
}
.downloadables {
  margin-top: 37vh;
  font-size: 3rem;
}
.resume {
  padding-inline: 15vw;
}
.resume h3 {
  font-size: 1.7rem;
}
.resume a {
  font-size: 0.9rem;
}
.bwrap {
  font-size: 1.2rem;
  margin-bottom: 50px;
}
.bwrap span {
  width: 60px;
  height: 60px;
}
.footer {
  width: 100vw;
  padding-inline: 20px;
}
.socials {
  display: flex;
  justify-content: flex-start;
  padding-inline: 20px;
}
.socials :nth-child(2) {
  flex-direction: row;
}
.socials h1 {
  font-size: 1.5rem;
}
.socials a {
  font-size: 1rem;
}

@media (hover: none) and (pointer: coarse) {
  .cursor {
    display: block;
  }
}