/* ---> GENERAL <--- */
*{
     box-sizing: border-box;
     scroll-behavior: smooth;
}

body{
     margin: 0; 
     padding: 0;
     width: 100%;
     text-decoration: none;
     font-family: 'Josefin Sans', sans-serif;
     background: #ECECEC;
}

a{
     text-decoration: none;
}


/* ---> ScrollBar */

::-webkit-scrollbar {
     width: 10px;
}

::-webkit-scrollbar-track {
     background: transparent;
}

::-webkit-scrollbar-thumb {
     background: #000;
}

::-webkit-scrollbar-thumb:hover {
     background: #555;
}

/* ---> HEAD <--- */

div.banner {
     color: #FFF;
     display: flex;
     flex-direction: row;
     background-color: #000;
     justify-content: space-between;
     width: 100%;
     height: 100vh;
}

img.mainpic {
     object-fit: cover;
     width: 50%;
     height: 100%;
}

span.hi {
     position: relative;
     top: 45%;
     margin: 0 0 0 30px;
     width: fit-content;
     font-size: 70px;
     font-family: 'Courier New', 'Courier', monospace;
     height: fit-content;
     --bg-color: #000;
     --typewriterSpeed: 4s;
     --typewriterCharacters: 11;
}

span.inc{
     --typewriterSpeed: 4s;
     padding: 10px;
     position: absolute;
     bottom: 0;
     left: 0;
     font-size: 1.25em;
     opacity: 0;
     transform: translateY(3rem);
     animation: fadeInUp 2s ease calc(var(--typewriterSpeed) + 2s) forwards;
}

     span.hi::before,
     span.hi::after {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
     }

     span.hi::before {
          background: var(--bg-color);
          animation: typewriter var(--typewriterSpeed)
                    steps(var(--typewriterCharacters)) 1s forwards;
     }

     span.hi::after {
          width: 0.125em;
          background: #FFF;
          animation: typewriter var(--typewriterSpeed)
               steps(var(--typewriterCharacters)) 1s forwards,
               blink 750ms steps(var(--typewriterCharacters)) infinite;
          /* Animation Credits: Kevin Powell (on youtube) */
     }

          @keyframes typewriter {
               to {
               left: 100%;
               }
          }
          
          @keyframes blink {
               to {
               background: transparent;
               }
          }
          
          @keyframes fadeInUp {
               to {
               opacity: 1;
               transform: translateY(0);
               }
          }

nav {
     position: sticky;
     position: -webkit-sticky;
     z-index: 5;
     top: 0;
     margin: 0 0 30px 0;
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     padding: 15px 0;
     align-content: space-around;
     background-color: #000;
     border-radius: 0px 0px 34px 34px;
}

span.navlnk {
     display: inline-block;
     font-weight: 600;
     font-size: 25px;
     margin: 10px 25px 0px 10px;
     text-decoration: none;
     color: #FFF;
     padding: 3px;
}

     span.navlnk:active{
          color: #000;
          background-color: #FFF;
     }

     .navlnk::after{
          display:block;
          content: '';
          border-bottom: solid 3px #fff;
          border-radius: 1.5px; 
          transform: scaleX(0);  
          transition: transform 250ms ease-in-out;
     }

          .navlnk:hover::after{ 
               transform: scaleX(1);  
          }

          .navlnk:active::after{ 
               border-color: #000;  
          }

span.contact{
     margin-right: 150px;
}

/* ---> BODY <--- */

.schead {
     font-size: 2.5em;
     font-weight: 150%;
     border-bottom: solid 5px;  
     margin: 0 0 20px 0; 
     width: fit-content;
     border-radius: 2.5px;  
}

/* --->About */
section.about {
     padding: 80px 200px 0px 200px;
     font-size: 1.2em;
     margin: 10px 0 10px 0;
     text-indent: 5px;
}

div.pfpwrapper{
     background: url('images/profile_pic[2].png') no-repeat center;
     float: right;
     border-radius: 34px;
     margin-left: 5px;
     width: 443px;
     height: 540px;
     object-fit: cover;
}

img.pfp{
     float: right;
     border-radius: 34px;
     margin-left: 5px;
     width: 443px;
     height: 540px;
     object-fit: cover;
     transition: all 1s ease;
}

img.pfp:hover{
     opacity: 0;
}

small.abt{
     margin: 10px;
     color: #515151;
     font-size: 0.7em;
}

/* --->Projects */
section.projects{
     margin: 10px auto 150px auto;
     white-space: no-wrap;
     width: max-content;
     padding-top: 100px;
}

h2.projects{
     margin: 10px auto;
}

div.prjpc{
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     gap: 20px;
     max-width: 1400px;
     margin: 0 auto;
     padding: 20px 10px;
}

div.prjeff{
     z-index: 0;
     border-radius: 10px;
     width: 300px;
     height: 500px;
     box-shadow: 0 0 0 #000; 
     margin-top: 5px;
     font-size: 1.5em;
     padding: 10px;
     color: rgba(40, 40, 40, 0.8);
     transition: all 0.3s ease;
     text-shadow: -1px 1px 10px rgb(224, 224, 224);
     content-visibility: hidden;
}

     div.prjeff:hover{
          margin-top: 0;
          box-shadow: -5px 5px 15px #000000F0;
          content-visibility: visible;
     }

/* ---> FOOTER <--- */

footer{
     color: #FFF;
     background-color: #000;
     padding: 50px 10px 10px 10px;
     border-radius: 34px 34px 0 0;
     width: 100%;
     height: 50vh;
     display: flex;
     justify-content: space-between;
     flex-direction: column;
}

section.contact{
     display: flex;
     align-items: center;
     flex-direction: column;
}

span.invtxtlg{
     font-size: 3rem;
     margin: 10px auto 0 auto;
     display: block;
}

span.invtxtsm{
     font-size: 1rem;
     margin: 20px auto;
     display: block;
}

div.socials{
     display: inline-block;
}

div.socials i {
     color: #FFF;
     margin: 15px;
     font-size: 2em;
}

div.foot{
     display: flex;
     justify-content: space-between;
     flex-direction: row;
}

span.hash{
     font-size: 1.3em;
}

/* ---> FOR SMALL SCREENS <--- */

@media screen and (max-width: 768px){
     div.banner{
          flex-direction: column;
     }

     nav{
          justify-content: center;
          padding: 0;
          margin: auto;
     }

     section.about{
          padding: 10px 5px;
     }

     section.projects{
          white-space: wrap;
     }
}