<header class="header">
  <h1>Header</h1>
</header>

<nav class="sticky navbar">
  <div class="brand  display__logo">
    <a href="#top" class="nav__link"> <span class="logo">Mohammad Abu Mattar</span></a>
  </div>

  <input type="checkbox" id="nav" class="hidden" />
  <label for="nav" class="nav__open"><i></i><i></i><i></i></label>
  <div class="nav">
    <ul class="nav__items">
      <li class="nav__item"><a href="#home" class="nav__link">Home</a></li>
      <li class="nav__item"><a href="#about" class="nav__link">About</a></li>
      <li class="nav__item"><a href="#portfolio" class="nav__link">Portfolio</a></li>
      <li class="nav__item"><a href="#contact" class="nav__link">Contact</a></li>
    </ul>
  </div>
</nav>

<main>
  <section class="home">
    <div id="home">
      <h1>Home</h1>
    </div>
  </section>
  <section class="about">
    <div id="about">
      <h1>About</h1>
    </div>
  </section>
  <section class="portfolio">
    <div id="portfolio">
      <h1>Portfolio</h1>
    </div>
  </section>
  <section class="contact">
    <div id="contact">
      <h1>Contact</h1>
    </div>
  </section>
</main>

<footer class="footer">
  <h1>Footer</h1>
</footer>

:root {
  --primary: rgba(37, 37, 37, 1.0);
  --secondary: rgba(252, 41, 74, 1.0);
  --shades: rgba(238, 238, 238, 1.0);
}

* {
  scroll-behavior: smooth;
}

body {
  font-family: 'Source Code Pro', monospace;
  line-height: 1.6;
  margin: 0;
}

.header,
.home,
.about,
.portfolio,
.contact {
  height: 100vh;
}

.header,
.home,
.about,
.portfolio,
.contact,
.footer {
  position: relative;
}

.header h1,
.home h1,
.about h1,
.portfolio h1,
.contact h1,
.footer h1 {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header h1::before,
.home h1::before,
.about h1::before,
.portfolio h1::before,
.contact h1::before,
.footer h1::before {
  content: '#';
}

.header h1,
.footer h1 {
  color: var(--shades);
}

.footer {
  height: 50vh;
  background-color: var(--primary);
}

.header {
  background-color: var(--primary);
}

.navbar {
  padding-top: .5em;
  padding-bottom: .5em;
  background-color: var(--primary);
  -webkit-box-shadow: 0 14px 14px -14px rgba(0, 0, 0, .75);
  -moz-box-shadow: 0 14px 14px -14px rgba(0, 0, 0, .75);
  box-shadow: 0 14px 14px -14px rgba(0, 0, 0, .75);
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.hidden {
  display: none;
}

.display__logo {
  font-size: 2.5rem;
  margin-bottom: .5rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}

.nav__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  color: var(--shades);
  text-decoration: none;
}

.brand {
  margin: 0;
  font-size: 1.45em;
}

.brand a {
  padding: 10px 15px;
  text-align: center;
  display: block;
}

.logo {
  display: inline-block;
  padding-top: .3125rem;
  padding-bottom: .3125rem;
  margin-right: 1rem;
  line-height: inherit;
}

.logo::before {
  display: inline-block;
  vertical-align: top;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' width='30' className='d-inline-block align-top' fill='%23d52128'%3E%3Cpath d='m1877 2568c-183-227-346-430-362-451-32-40-64-54-88-40-8 4-33 31-54 58-29 37-54 90-93 200-50 140-57 154-111 213-33 34-87 104-120 155-77 116-79 118-69 71 7-29 4-59-11-119-12-44-22-81-23-83-2-1-35 16-73 38-55 31-74 48-88 79-11 26-36 52-71 77-30 20-56 35-58 33s-7-45-12-95c-7-68-6-99 3-120 7-16 12-46 13-66 0-47 98-295 185-468 79-158 163-365 175-434 5-28 17-74 27-103 17-52 17-52-11-123-15-39-44-89-63-112s-41-54-49-69c-20-39-71-114-86-127-7-5-26-12-43-14-26-3-32-10-56-73-15-38-72-144-128-235l-101-165 40-40 40-41-20-160c-11-87-20-164-20-171s13-9 39-6c34 5 40 2 61-27 14-19 25-53 28-81s10-49 16-49c7 0 40 9 74 21 70 23 47-7 197 269 138 253 207 355 329 486 71 77 80 77 114 5 11-23 32-44 57-57 39-20 40-23 62-115 12-52 25-104 28-115 4-20 182-170 191-162 2 2-4 46-12 96-9 51-14 98-11 106 6 15 59 28 81 20 7-3 27-24 44-47 20-28 53-54 97-77 78-41 85-37 85 56 0 64 11 84 45 84 16 0 26-10 37-38 13-34 20-39 76-55 34-9 66-17 71-17s14 30 20 66c13 73 18 61-70 191-26 38-70 114-97 169-63 124-84 153-149 203-42 33-53 48-58 78-3 21-8 47-10 58s-36 69-75 128c-63 98-70 113-70 159 0 47 4 55 48 102 27 28 68 89 93 136 53 103 183 298 293 440 118 152 124 161 219 315 79 126 87 145 87 189v49l-77-75c-49-47-92-80-117-88-37-12-39-11-62 16-27 32-27 31 3 226 13 88 14 110 3 122-7 9-16 16-21 16-4 0-158-186-342-412z' transform='matrix(.1 0 0 -.1 0 300)' /%3E%3C/svg%3E");
}

.nav__items {
  margin-top: 5px;

}

.brand .nav__link,
.nav__items .nav__link {
  padding: 10px 15px;
  text-align: center;
  display: block;
}

.nav__items .nav__link {
  color: var(--shades);
  font-size: 0.99rem;
}

.nav__items .nav__link:hover {
  color: var(--secondary);
}

.nav__item:nth-child(1) .nav__link::before {
  content: '1. ';
}

.nav__item:nth-child(2) .nav__link::before {
  content: '2. ';
}

.nav__item:nth-child(3) .nav__link::before {
  content: '3. ';
}

.nav__item:nth-child(4) .nav__link::before {
  content: '4. ';
}

@media (min-width: 800px) {

  .navbar,
  .nav__items {
    display: flex;
  }

  .navbar {
    flex-direction: column;
    align-items: center;
  }

  .navbar {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media screen and (max-width: 799px) {
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    background-color: var(--primary);
    opacity: 0;
    transition: all 0.2s ease;
  }

  .nav .nav__items {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    padding-inline-start: 0;
  }

  .nav .nav__items .nav__item {
    display: block;
    float: none;
    width: 100%;
    text-align: right;
    margin-bottom: 10px;
  }

  .nav .nav__items .nav__item:nth-child(1) a {
    transition-delay: 0.2s;
  }

  .nav .nav__items .nav__item:nth-child(2) a {
    transition-delay: 0.3s;
  }

  .nav .nav__items .nav__item:nth-child(3) a {
    transition-delay: 0.4s;
  }

  .nav .nav__items .nav__item:nth-child(4) a {
    transition-delay: 0.5s;
  }

  .nav .nav__items .nav__item:not(:first-child) {
    margin-left: 0;
  }

  .nav .nav__items .nav__item .nav__link {
    padding: 10px 25px;
    opacity: 0;
    color: var(--shades);
    font-size: 24px;
    font-weight: 600;
    transform: translateY(-20px);
    transition: all 0.2s ease;
  }

  .nav .nav__items .nav__item .nav__link:hover {
    color: var(--secondary);
  }

  .nav__open {
    position: absolute;
    right: 10px;
    top: 16px;
    display: block;
    width: 48px;
    height: 48px;
    cursor: pointer;
    z-index: 9999;
    border-radius: 50%;
  }

  .nav__open i {
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--secondary);
    border-radius: 2px;
    margin-left: 14px;
  }

  .nav__open i:nth-child(1) {
    margin-top: 16px;
  }

  .nav__open i:nth-child(2) {
    margin-top: 4px;
    opacity: 1;
  }

  .nav__open i:nth-child(3) {
    margin-top: 4px;
  }

}


#nav:checked+.nav__open {
  transform: rotate(45deg);
}

#nav:checked+.nav__open i {
  background-color: var(--shades);
  transition: transform 0.2s ease;
}

#nav:checked+.nav__open i:nth-child(1) {
  transform: translateY(6px) rotate(180deg);
}

#nav:checked+.nav__open i:nth-child(2) {
  opacity: 0;
}

#nav:checked~.nav__item a {
  display: block !important;
}

#nav:checked+.nav__open i:nth-child(3) {
  transform: translateY(-6px) rotate(90deg);
}

#nav:checked~.nav {
  z-index: 9990;
  opacity: 1;
}

#nav:checked~.nav ul li a {
  opacity: 1;
  transform: translateY(0);
}