<!-- Reference CodePen -->
<!-- https://codepen.io/bosworthco/pen/RjBvgw -->
<!-- -------------------------- -->

<ul id="nav">
  <li class="nav-link">
    <h1 data-name="home">Home</h1>
  </li>
  <li class="nav-link">
    <h1 data-name="About">About</h1>
  </li>
  <li class="nav-link">
    <h1 data-name="services">services</h1>
  </li>
  <li class="nav-link">
    <h1 data-name="contact">contact</h1>
  </li>
</ul>

<!-- ------------ -->
<!-- Social links -->
<aside class="_social-links">
  <ul class="_links-list">
    <li class="_social-link"><a href="https://twitter.com/ggsingla" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
    <li class="_social-link"><a href="https://github.com/ggsingla" target="_blank"><i class="fa-brands fa-github"></i></a></li>
    <li class="_social-link"><a href="mailto:ggsingla777@gmail.com" target="_blank"><i class="fa-solid fa-at"></i></a></li>
  </ul>
</aside>
<!-- ------------ -->

:root {
  --bgcolor: rgb(2, 0, 36);
}

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bgcolor);
  color: white;
}
ul {
  list-style: none;
}
h1 {
  font-size: 5rem;
  position: relative;
  text-transform: uppercase;
  transition: all 300ms ease;
  width: fit-content;
  cursor: pointer;
}
h1:hover {
  transform: skew(10deg);
}
h1::before {
  content: attr(data-name);
  position: absolute;
  top: 0;
  left: -20px;
  background: var(--bgcolor);
  height: 3rem;
  overflow: hidden;
  transition: all 300ms ease;
  padding-left: 20px;
}
h1:hover::before {
  top: -3px;
  left: 0px;
  color: hotpink;
}

h1::after {
  content: "";
  height: 4px;
  width: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: hotpink;
  transition: all 300ms ease;
}
h1:hover::after {
  width: 120%;
  outline: 5px solid rgb(2, 0, 36);
}

/* //////////////////////////// */

/*  links sidebar CSS  */
._social-links {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translatey(-50%);
  padding: 1em 0.5em 1em 1em;
  background: #fafafa;
  border-radius: 0.5em 0 0 0.5em;
  box-shadow: -4px 0px 0px hotpink;
  transition: all 300ms ease;
}

._social-links:hover {
  box-shadow: -8px 0px 20px hotpink;
  padding: 1em;
}

._links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
._social-link a {
  color: #111;
  font-size: 1.5rem;
  transition: all 200ms ease;
}
._social-link a:visited {
  color: #111;
}
._social-link a:hover {
  color: hotpink;
  font-size: 1.75rem;
}

/* //////////////////////////// */