.body-no-scroll {
  overflow-y: hidden;
}

header {
  user-select: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99998;
  background-color: hsl(12, 24%, 80%);
  transition: background-color 1s;
}

.header-scrolled {
  background-color: hsla(12, 19%, 42%, 0.3);
}

.header-r1, .header-r2c3, .nav-r1c2 {
  text-align: right;
}

.header-r2c2, .nav-r2, .nav-r3c1, .nav-r3c2 {
  text-align: center;
}

.header-r2c1, .header-r2c2, .header-r2c3, .header-r2c3 p, .nav-r1c1, .nav-r1c2, .nav-r1c2 p, .nav-r3c1, .nav-r3c2  {
  display: inline-block;
}

.header-r1 img, .header-r2c1, .header-r2c2, .header-r2c3, .nav-r1c1, .nav-r1c2 {
  height: 100%;
}

.header-r2, .header-r2c2, .nav-r1c1, .nav-r1c2 {
  position: relative;
}

.header-r2c1 img, .header-r2c3 div, .header-r2c2 h3, nav, .nav-r1c2 div, .nav-r1c1 img, .nav-r3 {
  position: absolute;
}

.header-r2c1 img, .header-r2c3 div, .nav-r1c2 div, .nav-r1c1 img {
  top: 50%;
}

.header-r1 {
  height: 3rem;
  line-height: 3rem;
}

.header-r1 img {
  height: 70%;
  vertical-align: middle;
}

.header-r1 img:hover {
  transform: scale(1.25) rotate(15deg);
  -webkit-filter: opacity(50%);
  filter: opacity(50%);
  transition: all 0.2s ease-in-out;
}

.header-r2 {
  height: 4rem;
}

.header-r2c1 img {
  transform: translate(0, -50%);
}

.header-r2c3 div {
  right: 0;
  transform: translate(0, -50%);
}

.header-r2c1, .header-r2c2, .header-r2c3 {
  vertical-align: middle;
}

.header-r2c1, .header-r2c3 {
  width: 40%;
}

.header-r2c2 {
  width: 20%;
}

.header-r2c2 h3 {
  bottom: 1rem;
  left: 50%;
  transform: translate(-50%, 50%);
}

/* This portion underlines the hovered links */
/* ******************** */
.hover-underline-animation {
  display: inline-block;
  position: relative;
}

.hover-underline-animation, .hover-underline-animation:hover {
  transition: all 0.25s ease;
}

.hover-underline-animation:hover {
  color: #0f3b52;
  letter-spacing: 0.3rem;
}

.hover-underline-animation:before {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  top: 0;
  right: 0;
  background-color: #0f3b52;
  transform-origin: bottom left;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:before {
  transform: scaleX(1);
  transform-origin: bottom right;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0f3b52;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
/* ******************** */
/* This portion underlines the hovered links */

.nav-btn:hover {
  cursor: pointer;
}

.nav-btn p {
  letter-spacing: 0.2rem;
  transition: letter-spacing 0.25s ease-in-out;
}

.nav-btn:hover p {
  letter-spacing: 0.3rem;

  text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
    0px -5px 35px rgba(255,255,255,0.3);
}

.header-r2c3 p {
  vertical-align: middle;
  margin: 0;
}

.header-r2c3 p:first-child, .nav-r1c2 p:first-child  {
  font-size: 2.5rem;
}

/* This portion animates navigation section */
/* ******************** */
nav {
  position: fixed;
  background-color: #7A847C;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  user-select: none;
  transform: translateX(-1000%);
  transition: transform 0.7s ease-in-out;
  z-index: 99999;
}

.nav-display {
  transform: translateX(0);
  animation-name: navOpeningAnimation;
  animation-duration: 0.7s;
}

@keyframes navOpeningAnimation {
  0%   {transform: translateX(-100%);}
  25%  {transform: translateX(0);}
  50%  {transform: translateX(-5%);}
  100% {transform: translateX(0);}
}

/* ******************** */
/* This portion animates navigation section */

.nav-r1 {
  height: 4rem;
  margin-top: 3rem;
}

.nav-r1c1, .nav-r1c2 {
  width: 50%;
}

.nav-r1c1 img {
  transform: translate(0, -50%);
}

.nav-r1c1 img:hover {
  -webkit-filter: opacity(50%);
  filter: opacity(50%);
  transition: filter 0.2s ease;
}

/* Also in the class of .nav-btn */
.nav-r1c2 div {
  right: 0;
  transform: translate(0, -50%);
}

.nav-r1c2 p {
  vertical-align: middle;
  margin: 0;
}

.nav-r2 {
  height: calc(100vh - 20rem);
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.motifs {
  display: block;
  height: 6vh;
  margin: auto;
}

.nav-r2 h1 {
  font-size: 4vh;
  margin-top: 3vh;
  margin-bottom: 3vh;
}

.nav-r3 {
  height: 5rem;
  bottom: 0;
  right: 0;
  left: 0;
}

.nav-r3c1, .nav-r3c2 {
  width: 50%;
  vertical-align: middle;
}

.nav-r3c1 img {
  width: 2rem;
}

.nav-r3c1 img:hover {
  transform: scale(1.25) rotate(15deg);
  -webkit-filter: opacity(50%);
  filter: opacity(50%);
  transition: all 0.2s ease-in-out;
}

.nav-r3c2 p{
  margin: 0;
  transition: all 0.2s ease-in-out;
}

.nav-r3c2:hover p{
  color: #554f4d;
}

@media(max-width: 1200px) {
  .header-r2c1 {
    width: 50%;
  }

  .header-r2c3 {
    width: 30%;
  }
}

@media(max-width: 850px) {
  .header-r1, .header-r2c2 {
    visibility: hidden;
  }

  .header-r1 {
    height: 2rem;
  }

  .header-r2 {
    height: 3rem;
  }

  .nav-r1 {
    height: 3rem;
    margin-top: 2rem;
  }
}

@media(max-width: 550px) {
  .logo-img {
    height: 2rem;
  }

  .header-r2c3 p:first-child, .nav-r1c2 p:first-child {
    font-size: 2rem;
  }
}

@media(max-width: 420px) {
  .logo-img {
    height: 1.5rem;
  }

  .header-r2c3 p:last-child, .nav-r1c2 p:last-child {
    display: none;
  }

  .header-r2c3 p:first-child, .nav-r1c2 p:first-child {
    font-size: 1.5rem;
  }

  .nav-r3c1, .nav-r3c2 {
    display: block;
    width: 100%;
  }

  .nav-r3c1 img {
    width: 1.5rem;
  }

  .nav-r3c2 p {
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
  }
}

@media(max-height: 410px) {
  .nav-r3 {
    height: 3rem;
  }

  .nav-r3c1 img {
    width: 1.2rem;
  }

  .nav-r3c2 p {
    font-size: 1rem;
    letter-spacing: 0.1rem;
  }
}