@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
}

/* Color Variables */
:root {
  --dark: rgb(20, 20, 20);
  --yellow: rgb(253, 216, 53);
  --blue: rgb(98, 0, 234);
  --left-color: var(--yellow);
  --right-color: var(--dark);
}

/* Base Styles */
body,
main {
  background-color: var(--dark);
  height: 100vh;
}

a {
  text-decoration: none;
}

/* Typography */
.hero-wrapper,
.hero-side .title,
.cool > .letter {
  font-family: "Poppins", sans-serif;
}

/* Layout */
.hero-wrapper,
.hero-side {
  height: 100%;
}

.hero-side {
  display: grid;
  overflow: hidden;
  place-items: center;
  position: absolute;
  width: 100%;
}

/* Hero Titles */
.hero-side .title {
  font-size: 8vw;
  margin: 0px 10vw;
  width: 80vw;
}

/* Cool Text */
.hero-side .cool {
  font-size: 1.3em;
  line-height: 0.8em;
}

.cool > .letter {
  display: inline-block;
  transition: transform 350ms ease;
}

/* Hover Effects */
.cool:hover > .letter {
  transition-duration: 800ms;
}

.cool:hover > .letter:nth-child(n) {
  transform: translate(0%, 20%) rotate(-3deg);
}

/* Side Specific Styles */
#left-side {
  background-color: var(--left-color);
  width: 90%;
  z-index: 2;
  transition: 0.15s;
  color: white;
}

#left-side .cool {
  color: var(--right-color);
}

#right-side {
  background-color: var(--right-color);
}

#right-side .title {
  color: var(--yellow);
}

#right-side .cool,
#last-name {
  color: white;
}

#first-name {
  color: var(--dark);
}