@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Lexend', sans-serif;
   /* font-family: 'Inconsolata', monospace; */
   font-size: 2.5vmin;
   caret-color: rgba(0,0,0,0);
}

@media only screen and (max-aspect-ratio: 4/3) {
   *{
      font-size: 3.5vmin;
   }
 }

:root{
   --main-color: maroon;
   --accent-color: goldenrod;
   --dark-color: black;
   --light-color: #FAF9F6;

   --font-largest: 6rem;
   --font-larger: 4rem;
   --font-large: 2rem;
   --font-medium: 1.5rem;

   --content-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   --text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1),0px 18px 23px rgba(0,0,0,0.1);
   --hover-shadow-numbers: 0 0 0.0625rem 0.125rem;
   --active-shadow-numbers: 0 0 0.0625rem 0.25rem;   
}

body{
   background-color: var(--light-color);
   color: var(--main-color);
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

a {
   color: var(--main-color);
   text-decoration: none;
}

/* h2{
   text-shadow: var(--text-shadow);
} */


/* Navbar related styling STARTS here */

nav{
   display: flex;
   justify-content: space-between;
   background-color: white;
   height: 10vh;
   padding: 0 1vw;
   box-shadow: var(--content-shadow);
}

   /* Navbar Logo here */

   #navbar-logo{
      width: 10vh;
      padding: 2vh;
      filter: drop-shadow(0px 2px 4px black);
      transition: padding 0.125s;
   }

      #navbar-logo:hover{
         padding: 1.5vh;
         animation: rotating 1s infinite;
      }
               @keyframes rotating {
                  100% {transform: rotate(360deg);}
               }

      #navbar-logo:active{
         padding: 1vh;
      }      

   /* Navbar Links here */

   nav ul{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      list-style-type:none;
      caret-color: rgba(0,0,0,0);
   }

      nav ul li{
         /* border: 1px solid black; */
         border-radius: 2vw;
         padding: 0.5vw 1vw;
         margin: 0 1vw;
         transition: background-color 0.125s;
         transition: box-shadow 0.125s;
      }

         nav ul li a{
            /* font-size: var(--font-medium); */
            /* color: var(--main-color);
            text-decoration: none; */
            transition: font-weight 0.125s;
         }

               nav ul li:hover{
                  /* border: 1px solid var(--accent-color); */
                  background-color: var(--accent-color);
                  box-shadow: var(--content-shadow);
               }

               nav ul li:active{
                  
                  box-shadow: var(--active-shadow-numbers) var(--accent-color);
               }

               nav ul li a:active {
                  font-weight: bolder;
               }

/* Navbar related styling ENDS here */



/* Main related styling STARTS here */

main{
   height: 90vh;
   overflow-y: scroll;
   scroll-behavior: smooth;
}

.section-container{
   /* border: 1px solid black;  */
   min-height: 90vh;
   max-height: max-content;
   display: flex;
   flex-wrap: wrap;
   box-shadow: var(--content-shadow);
   caret-color: rgba(0,0,0,0);
}

   /* About Me section here */

   #about-me-container {
      /* background-color: salmon; */
      justify-content: center;
      align-items: center;
      padding: 2.5vh 1vw;
      gap: 5vmin;
   }

      #about-me-container > div {
         /* border: 3px solid black; */
         height: max-content;
      }

      #portrait{
         height: 60vh;
         border-radius: 2vw;
         /* box-shadow: var(--content-shadow); */
         filter: drop-shadow(0px 4px 8px black);
         transition: height 1s;
      }

         #portrait:hover {
            height: 80vh;
         }

         #portrait:active {
            animation: swinging 6s infinite;
            animation-direction: alternate;
         }
                  @keyframes swinging {
                     25% {transform: rotate(90deg);}
                     75% {transform: rotate(-90deg);}
                  }


         #hi-text{
            font-size: var(--font-largest);
            text-align: left;
            font-weight: 900;
            text-shadow: var(--text-shadow);
         }

         #im-text{
            font-size: var(--font-large);
            text-align: left;
            /* text-shadow: var(--text-shadow); */
            margin: 1vh 0;
         }

         #loading-bar{
            margin: 3vh 0 0 0;
            border-radius: 2vw;
            width: 3vw;
            height: 5vh;
            background-color: var(--accent-color);
            animation-name: loading-effect;
            animation-duration: 3s;
            animation-direction: alternate;
            animation-iteration-count: infinite;
            box-shadow: var(--content-shadow);
         }

         @keyframes loading-effect {
            0% {width: 3vw}
            50%{background-color: var(--accent-color);}
            100% {width: 80vmin; background-color: var(--main-color);}
         }

   /* Learning Projects here */

   #learning-projects-container {
      background-color: white;
      /* padding: 2vmin; */
      display: flex;
   }

      #learning-projects-title {
         font-size: var(--font-large);
         /* background-color: gray; */
         width: 98vw;
         text-align: center;
      }

      #individual-projects-container {
         /* background-color: pink; */
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
      }

         .individual-project-box {
            background-color: var(--light-color);
            box-shadow: var(--content-shadow);
            margin: 5vh 2vw;
            /* padding: 1vmin; */
            width: 55vmin;
            min-height: 30vmin;
            border-radius: 2vmin;
            display: flex;
            /* transition: box-shadow 0.5s; */
            transition: transform 0.5s;
         }

                     .individual-project-box:hover {
                        /* box-shadow: var(--hover-shadow-numbers) var(--accent-color); */
                        transform: translateY(-15px);
                     }

            .individual-project-img{
               flex: 1 3 100px;
               background-color: var(--accent-color);
               /* width: 50%; */
               border-radius: 2vmin 0 0 2vmin;
               padding: 1vmin;
            }

            .individual-project-text{
               flex: 3 1 200px;
               margin: 2vmin;
            }
               .project-title{
                  font-weight: 900;
                  margin-bottom: 1vmin;
                  text-decoration: underline;
               }

               .project-description{
                  line-height: 4vmin;
                  /* font-weight: bold; */
                  color: var(--dark-color);
                  transition: font-weight 2s;
                  transition: text-align 2s;
               }

                     .project-description:hover {
                        line-height: 4vmin;
                        font-weight: bold;
                        color: var(--dark-color);
                        text-align: justify;
                        /* font-size: var(--font-medium); */
                     }

   /* Contact Information here */

   #contact-information-container{
      display: flex;
      flex-direction: column;
      padding: 1vmin;
   }

      #moving-block-container{
         background-color: none;
      }
         #moving-block{
            width: 3vmin;
            height: 3vmin;
            position: relative;
            animation-name: example;
            animation-duration: 10s;
            animation-iteration-count: infinite;

          }
          
          @keyframes example {
            0%   {left:0; top:0px;}
            25%  {left:95vw; top:0px;}
            50%  {left:95vw; top:85vh;}
            75%  {left:0px; top:85vh;}
            100% {left:0px; top:0px;}
          }

      #contact-information-title{
         margin: 3vmin;
         font-size: var(--font-large);
         text-align: center;
      }

      #contact-cards-container{
         /* background-color: salmon; */
         display: flex;
         flex-direction: column;
         flex-wrap: wrap;
         align-items: center;
         margin-top: 5vh;
      }

      .contact-card {
         font-size: var(--font-medium);
         margin: 5vmin;
         color: white;
         padding: 5vmin;
         min-width: max-content;
         width: 25vmin;
         text-align: center;
         border-radius: 2vmin;
         box-shadow: var(--content-shadow);
         transition: width 0.5s, font-size 0.5s, font-weight 0.5s;
         /* transition: height 1s; */
      }

               .contact-card:hover {
                  width: 80vw;
                  font-weight: bold;
                  font-size: var(--font-larger);
               }

         #linkedin-div{
            background-color: #0072b1;
         }

         #github-div{
            background-color: #333;
         }

      #footerish{
         margin-top: 5vh;
         text-align: center;
         padding: 0 20vw;
      }

/* Main related styling ENDS here */

/* width */
::-webkit-scrollbar {
   width: 0.5vw;
 }
 
 /* Track */
 ::-webkit-scrollbar-track {
   background: white; 
 }
  
 /* Handle */
 ::-webkit-scrollbar-thumb {
   background: var(--light-color); 
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
   background: var(--accent-color); 
 }

 .not-done {
    background-color: salmon;
 }