:root {
  --footer-width: max(50px, 4vw);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgb(136, 136, 136) rgb(82, 82, 82);
}

*::-webkit-scrollbar {
  width: 10px;
}

*::-webkit-scrollbar-track {
  background: rgb(136, 136, 136);
}

*::-webkit-scrollbar-thumb {
  background-color: rgb(82, 82, 82);
}

/* Credit to Silvia O'Dwyer at CSS Tricks */
@keyframes pulsate-pink {
  0%,
  100% {
    text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff,
      0 0 40px #ff00ff;
  }
  50% {
    text-shadow: 0 0 20px #ff00ff, 0 0 30px #ff00ff, 0 0 40px #ff00ff,
      0 0 50px #ff00ff, 0 0 60px #ff00ff;
  }
}

#navbar {
  background-color: rgba(0, 0, 0, 0.2);
  margin-bottom: 2em;
}

#🏷️ {
  text-align: center;
  font-weight: bold;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  font-family: "Pixelify Sans", cursive;
}

#🏷️:hover {
  animation: pulsate-pink 2.5s infinite alternate;
}

#first-section {
  text-align: center;
}

main {
  position: relative;
  padding-top: 0;
  padding-bottom: 2em;
}

#biodata {
  display: inline-block;
}

#📷 {
  display: inline-block;
}

#📷 > img {
  width: 12em;
  height: 16em;
  border-radius: 30px;
}

.pad {
  padding-right: 2em;
  padding-left: 2em;
}

#greet {
  display: inline-block;
}

.greetelem {
  font-family: "Raleway", sans-serif;
  transform: translateX(100%);
  padding-right: 0.5vw;
  text-align: right;
  margin-bottom: 0;
  opacity: 0;
}

#greet #head {
  font-family: "Dela Gothic One", cursive;
  font-size: clamp(20px, 5vw, 50px);
  vertical-align: 20%;
  color: whitesmoke;
}

#works {
  display: inline-block;
  text-align: center;
}

#workshead {
  font-family: "Dela Gothic One", cursive;
  font-size: clamp(15px, 5vw, 30px);
  line-height: 1em;
  color: white;
  opacity: 0;
}

#workshead > span {
  font-family: "Raleway", sans-serif;
}

.worksquare {
  display: inline-block;
  opacity: 0;
  text-align: left;
  width: 12em;
  height: 10em;
  overflow: scroll;
  font-size: clamp(5px, 5vw, 20px);
  font-family: "Raleway", sans-serif;
  overflow-x: hidden;
}

.worksquare > p.wrapped {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
}

.workimg {
  width: 3em;
  display: inline-block;
  vertical-align: top;
  border-radius: 5px;
  margin-right: 1em;
}

.section {
  padding-bottom: 2em;
}

#contacts {
  text-align: left;
}

#contacts > a {
  display: inline-block;
  padding: 1em;
}

#contacts > a > img {
  width: clamp(30px, 3vw, 100px);
  border-radius: 0.5vw;
  transition: width 0.25s ease-in-out;
}

#contacts > a > img:hover {
  width: max(35px, 3.5vw);
}

#footer {
  font-family: "Raleway", sans-serif;
  text-align: center;
  color: whitesmoke;
}

#footer > a {
  margin: 0.05em;
}

#footer > a:hover {
  --footer-width: max(60px, 5vw);
}

#footer > a > img {
  border-radius: 3px;
}