@font-face { font-family: 'BehowledDisplay'; src: url(BehowledDisplay.ttf); }

 /* COLOURS: 

      #c8bfb8
      #efecea
      #f5f4f2
      #fcfbfb

          Primary - #e8e5e1
          Mid Primary - #efedeb
          Dark Primary - #beb4ab
          Accent - 
          Light Text - #f9f9f9
          Dark Text/Icons - #212121
          Dividers - #767372
      */


      *, *::before, *::after { margin: 0; padding: 0; -webkit-box-sizing: inherit; box-sizing: inherit; scroll-behavior: smooth; } 
      html {-webkit-box-sizing: border-box; box-sizing: border-box; font-size: 62.5%; } 
      body { background-color: #e8e5e1; color: #212121; font-family: 'Lato', sans-serif; font-size: 1.6rem; width: 100vw; height: 100vh;  }
      h1 { font-size: 2.4rem; text-align: center; }

	  .cs { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; width: 100vw; height: calc(100vh - 160px); }
	  .cs h1 { color: black; font-family: 'BehowledDisplay'; text-transform: uppercase; font-size: 4rem; font-weight: 600; text-align: center; letter-spacing: 20px;  }
	  .cs p { text-transform: uppercase; font-size: 1.6rem; text-align: center; line-height: 30px; }


      /* MoveToTop */
      .moveToTop { display: none; position: fixed; bottom: 20px; right: 20px; align-items: center; justify-content: center; text-align: center; background-color: #beb4ab; opacity: 0.6; width: 50px; height: 50px; border-radius: 50px; padding: 10px; color: #f9f9f9; cursor: pointer; transition: opacity 0.2s linear; animation: bop 0.4s; }
      .moveToTop:hover { opacity: 1; transition: opacity 0.2s linear; }


      /* Header Bar */
      header { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 80px; height: 100px; border-bottom: 1px solid #efedeb; }
      header .title { font-family: 'BehowledDisplay'; color: #212121; letter-spacing: 4px; text-transform: uppercase; font-size: 2rem; font-weight: 600; }
      header .subtitle { font-family: 'Lato'; color: #beb4ab; letter-spacing: 2px; text-transform: uppercase; font-size: 1.2rem; font-weight: 400; }

      /* Navigation */
      nav { display: none !important; position: sticky; top: calc(50% - 125px) ; left: 20px; background: #f3f5f7; display: flex; width: fit-content; border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; padding: 10px; }
      nav p { text-decoration: none; text-transform: uppercase; font-weight: 600; text-align: center; }
      nav > ul { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; list-style: none; }
      nav > ul > li { background: #fff; color: #fff; list-style: none; border-radius: 20px; height: 30px; width: 30px; font-size: 1.8rem; cursor: pointer; transition: background 0.4s linear; }
      nav > ul > li:hover { background:#fff; transition: background 0.4s linear; }  
      nav > ul > li > a { color: #212121; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-decoration: none; text-transform: uppercase; }
      nav > ul > li > a .text { display: none;}

      /* Sections */
      .section { height: 100vh; width: 100%; padding: 60px 100px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; border-top: 1px solid #efedeb; border-bottom: 1px solid #efedeb; }
      .section h1 { font-family: 'BehowledDisplay'; font-size: 4rem; text-transform: uppercase; font-weight: 600; text-align: center; }


      /* Home Panel */
      #home { background-color: #e8e5e1; height: calc(100vh - 100px); }
      #home * { opacity: 0; margin-top: 100px; transition: all 0.4s linear; }
      #home.active * { opacity: 1; margin-top: 0; transition: all 0.4s linear; }

      #home h1 { font-family: 'BehowledDisplay'; font-size: 4rem; text-transform: uppercase; font-weight: 600; text-align: center; margin: 20px 0; }
      #home h2 { font-family: 'Lato'; font-size: 1.8rem; text-transform: uppercase; font-weight: 400; text-align: center; margin: 20px 0 0 0; }

      #home .moveDown { display: flex; align-items: center; justify-content: center; text-align: center; background-color: #beb4ab; opacity: 0.6; width: 60px; height: 60px; border-radius: 50px; padding: 10px; color: #f9f9f9; cursor: pointer; margin: 40px auto 0 auto; transition: opacity 0.2s linear; animation: bop 0.4s; }

      #home .moveDown:hover { opacity: 1; transition: opacity 0.2s linear; }


      /* About Panel */
      #about { background-color: #e8e5e1; }
      #about * { opacity: 0; margin-top: 100px; transition: all 0.4s linear; }
      #about.active * { opacity: 1; margin-top: 0; transition: all 0.4s linear; }


      /* Skills Panel */
      #skills { background-color: #beb4ab; }
      #skills * { opacity: 0; margin-top: 100px; transition: all 0.4s linear; }
      #skills.active * { opacity: 1; margin-top: 0; transition: all 0.4s linear; }

      #skills .skillsList { margin: 50px 0; width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-around; gap: 50px; }
      #skills .skillsList .type { display: grid;  align-items: center; justify-content: center; gap: 50px; }


      /* Projects Panel */
      #projects { background-color: #beb4ab; }
      #projects * { opacity: 0; margin-top: 100px; transition: all 0.4s linear; }
      #projects.active * { opacity: 1; margin-top: 0; transition: all 0.4s linear; }


      /* Experience Panel */
      #experiences { background-color: #beb4ab; }
      #experiences * { opacity: 0; margin-top: 100px; transition: all 0.4s linear; }
      #experiences.active * { opacity: 1; margin-top: 0; transition: all 0.4s linear; }


      /* Training / Learning Panel */


      /* Contact Panel */
      #contact { background-color: #e8e5e1; height: calc(100vh - 58px); }
      #contact * { opacity: 0; margin-top: 100px; transition: all 0.4s linear; }
      #contact.active * { opacity: 1; margin-top: 0; transition: all 0.4s linear; }
      #contact .methods { display: flex; flex-direction: row; align-items: center; justify-content: center; }
      #contact .methods .box { width: 40%; height: fit-content; background-color: #fff; border: 1px solid #fefefe; gap: 20px; }


      /* Footer */
      footer { background-color: #e8e5e1; padding: 20px 0; margin: 0 80px; border-top: 1px solid #efedeb; }
      footer .copyright { font-family: 'Lato'; font-weight: 400; color: #212121; text-align: center; font-size: 1.4rem; font-weight: 400; }

      

      /* Animations */
      @keyframes floatInUpwards {
        0% {
          opacity: 0;
          margin-top: 60px;
        }
        100% {
          opacity: 1;
          margin-top: 0px;
        }

      }

      @keyframes bop {
        0% { margin-top: 0;
        }
        100% { margin-top: 40px; }

      }