*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  --primary-color: #2d7dff;
}

body {
  background: linear-gradient(238.71deg, #bd00ff 7.63%, #00a3ff 117.53%),
    linear-gradient(0deg, #ffffff, #ffffff);

  height: 100vh;
}

.container {
  margin: 1em .5em;
  /* use cal for container or use margin in vh,wh , so far calc is best approach */
  height: calc(100% - 2em);
  width: calc(100% - 1em);
}

section {
  background: #221f26 url('./images/bg-img.png');
  background-size: cover;
  height: 100%;
  background-blend-mode: hard-light;
  padding: 2em;
  border-radius: 0.812rem;
}

.logo {
  color: var(--primary-color);
  font-weight: 800;
  line-height: 111.4%;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: -0.1em;
  text-align: center;
  width: 100%;
  margin: 0;
}

header {
  display: flex;
}

h1 {
  font-size: 3rem;
  /* clamp - min , val , max */
  font-size: clamp(2.5rem, -0.875rem + 8.333vw, 4rem);
  font-weight: 800;
  text-transform: uppercase;
  color: white;
  line-height: 89%;
}

.cv {
  display: grid;
  place-items: center;
  height: 80%;
}

.content p {
  font-size: 2.1rem;
  /* for fall back */

  /* clamp(MIN-VAL , SUITABLE-VAL , MAX-VAL) */
  font-size: clamp(2rem, -0.875rem + 8.333vw, 3rem);
  font-weight: 300;
  line-height: 111%;
  color: #847d93;
  margin-top: 1.1em;
}

.cta {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 2.875rem;
  display: inline-block;
  border: 1px solid #4d4d4d;
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 4rem;
  transition: transform 0.3s;
}

.cta:hover {
  transform: scale(1.1);
}

.cta::before {
  content: '';
  position: absolute;
  background: url('./images/cta-arrow.png') no-repeat;
  width: 2.7rem;
  height: 2.7rem;
  left: 1.25rem;
  margin-top: 0.275rem;
}

nav {
  /* display: none; */
  position: fixed;
  z-index: 1;
  background: #2c2931;
  left: 0;
  top: 0;
  height: 100vh;
  max-width: 300px;
  /* responsive nav menu */
  transition: transform 0.3s;
  transform: translateX(-100%);
}

nav ul {
  list-style-type: none;
  padding: 0;
  width: 100%;
}

nav ul li {
  width: 100%;
}

nav ul li a {
  text-decoration: none;
  color: white;
  display: block;
  padding: .875em 5em .875em 4em;
}

nav ul li a:hover {
  background: #413e47;
  transition: transform .5s;
  transform: scale(1.1) translate(-0.6rem);
}

.back-btn {
  padding: 2em 4em 2em;
  cursor: pointer;
  transition: transform .3s;
  transform: scale(1.8);
}

.back-btn:hover {
  transform: translateX(6px) scale(2);
}

.active {
  background: var(--primary-color);
}
.active:hover {
  background: #4497ff;
}

.menu-btn {
  cursor: pointer;
}

/* Desktop responsive */

@media only screen and (min-width: 1000px) {
  nav {
    /* unset to remove property */
    /* The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. ... unset can be applied to any CSS property, including the CSS shorthand all . */
    position: unset;
    transform: translateX(0) !important;
    border-top-left-radius: 0.812rem;
    border-bottom-left-radius: 0.812rem;
    height: 100%;
    background-color: #2c2931;
  }

  .left-col {
    display: flex;
    flex-direction: column;
  }
  ul li:first-child {
    margin-top: 4rem;
  }

  section {
    border-top-left-radius: 0rem;
    border-bottom-left-radius: 0.0rem;
    width: 100%;

    background: #221f26 url('./images/bg-big.png');
    background-size: cover;
    background-position: 0;
    background-attachment: unset;
  }

  .back-btn,
  .menu-btn {
    display: none;
  }

  header {
    padding: 1.6em;
  }

  .container {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 2rem;
  }

  .logo {
    text-align: left;
  }

  .content {
    justify-self: left;
    margin-left: 4em;
  }
}