/* Custom properties */
:root{
  --light-color: #394740;
 --light-color-alt: rgba(55, 62, 59, 0.6);
 --primary-background-color: #06090800;
 --secondary-background-color: #ecf1ee;
 --hover-light-color: #fff;
 --gradient-color: linear-gradient(
     115deg,#5db681b7,#d8ded9c7,#5db681b7,#d8ded9c7,#5db681b7);
 --transparent-dark-color: rgba(224, 239, 229, 0.882);
 --transparent-light-color: rgba(12, 229, 62, 0.1);
 --font-family: 'Poppins', sans-serif;
 --font-size-xsm: 1.2rem;
 --font-size-sm: 1.6rem;
 --font-size-md: 2.4rem;
 --font-size-lg: 3rem;
 --font-size-xl: 4rem;
 --gap: 2rem;
 --margin-sm: 2rem;
 --margin-md: 3rem;
 --item-min-height-sm: 20rem;
 --item-min-height-md: 30rem;
}

body{
  font-family: var(--font-family);
  color: var(--light-color-alt);
  background-color: var(--primary-background-color);
  letter-spacing: 1px;
  transition: background-color .25s,color .25s;
  display: grid;
  grid-template-areas:
  "header header header"
  "hero hero hero"
  "project project side"
  "career1 career2 career3"
  "learning learning learning"
  "footer footer footer"; 
  grid-template-columns: 1fr 1fr 1fr;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  
  margin: 0; 
}
header, footer,  div {
  padding: 1.2rem;
  background: var(--secondary-background-color);
  border-radius: 5px;
}
#landingHeader {
  grid-area: header;
  }
#landingHero {
  grid-area: hero;
  }
#landingProject { 
  grid-area: project; 
  background-color: white;     
  }
#landingSidebar { 
  grid-area: side; 
  } 
#landingCareer1 {
  grid-area: career1;
}
#landingCareer2 {
  grid-area: career2;
}
#landingCareer3 {
  grid-area: career3;
}
#landingLearning {
  grid-area: learning;
  min-height: 8rem;
}
#landingFooter {
  grid-area: footer;
}
/* Mobile Template */
@media screen and (max-width: 767px) {
  body{
    display: grid;
  grid-template-areas:
  "header"
  "hero"
  "project"
  "side"
  "career1"
  "career2"
  "career3"
  "learning"
  "footer"; 
  grid-template-columns: 1fr;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  }
  .project-grid{ 
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
  }
}
a{
  color: inherit;
  text-decoration: none;
}

ul{
list-style: none;
}

img{
max-width: 100%;
}
/*  Header  */
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 2rem;
z-index: 999;

}
.navbar{
position: fixed;
top: 0;
left: 1rem;
width: 100%;
height: 1.4rem;
z-index: 999;
display: flex;
align-items: center;
justify-content: space-between;
padding-block: 1.5rem;
}
.menu{
position: absolute;
top: 1rem;
right: 1.5rem;
width: 23rem;
padding: 1.5rem;
background-color:var(--secondary-background-color);
opacity: 0;
transform: scale(0);
transition: opacity .25s ease-in;
}
.list{
position: relative;
right: 1.8rem;
display: flex;
align-items: center;
gap: var(--gap);
text-decoration: none;
}

h2{
color: var(--light-color);
}
/* Hero */
#landingHero{
padding: 0;
margin-left: 1.2rem;
margin-right: 1.2rem;
margin-top: 4.6rem;
height: 190px;
}

.hero-img{
position: absolute;
right: 1rem;
height: 190px;
object-fit: contain; 
border-radius: 8px;
opacity: 70%;
-webkit-mask-image: linear-gradient(
              to right, 
              rgba(0,0,0,0) 0%, 
              rgba(0,0,0,1) 70%,
          );
          mask-image: linear-gradient(
              to right, 
              rgba(0,0,0,0) 0%, 
              rgba(0,0,0,1) 70%
              
          );
}
.headline-banner{
background-color: var(--secondary-background-color);
align-items: center;
gap: var(--gap);
font-size: var(--font-size-xsm);

}

.headline{
background-color: #000;
color: var(--light-color);
font-size: 1rem;
text-transform: uppercase;
text-align: center;
letter-spacing: 1px;
padding: 4px;
height: 100%;
border-radius: 5px;
}

.headline span{
height: inherit;

}
.headline-description{
  background-color: rgba(224, 239, 229,);
  z-index: 999;
}

.fancy-border{
position: relative;
overflow: hidden;
width: fit-content;
border-radius: 5px;
}

.fancy-border::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
background: var(--gradient-color);
background-size: 50% 100%;
z-index: 5;
}

.fancy-border span{
position: relative;
z-index: 10;
display: inline-flex;
background-color: var(--secondary-background-color);
padding: .6rem 1rem;
}

/* Fancy border animation effect */
  .fancy-border:hover::before{
    animation: animate_border .75s linear infinite
}

@keyframes animate_border{
    to{
        transform:translateX(-50%)
    }
}
.headline-description{
color: var(--light-color);

}
.headline-description:hover{
color: var(--hover-light-color);
background-color: rgba(55, 62, 59, 0.6);
border-radius: 5px;
padding: 2px;

}

/* Projects */

.project-grid{ 
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-row-gap: 5px;
  grid-column-gap: 5px;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  margin: 0;
  padding: 0;
  
}

.Project{
  margin-right: 0;
  margin-bottom: 1rem;
  margin-left: 1rem;
  background-color: var(--secondary-background-color);
  padding: 0;
  border-radius: 5px;
  height: 12rem;
  gap: var(--gap);
  
  position: relative;
}
.article{
  position: absolute;
  bottom: 0;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  background-color: pink;
}
.article-image{
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform .25s;
  border-radius: 5px;
  z-index: 1;
}

.article-category{
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  background-color:black;
  font-size: 1rem;
  color: white;
  text-transform: uppercase;
  border-radius: 5px;
  z-index: 2;
}

.article-data-container{
  position: absolute;
  padding: 0;
  bottom: 0;
  width: 100%;
  z-index: 3;
  background-color: #eef3f0;
  border-radius:0 0 5px 5px;
  ;

}
.article-title div{
  padding: 1rem 0;
  background-color: #394740;;
  transition: background-color .5s;
  border-radius: 0 0 5px 5px;
  color: #000;
  z-index: 5;
}

/* Light theme color hover styles */
.article:hover .article-data-container{
  background-color: #394740;;
  color: var(--hover-light-color);
  border-radius: 5px;
}


.article:hover .article-title{
  color: var(--hover-light-color);
  border-radius: 5px;
}

/* Sidebar */

.sidebar{
  display: flex;
  border: solid 2px;
  padding: 10px;
  margin: 20px;
  border-radius: 5px;
}

/* Learning */

.learn-title{
  margin-bottom: 2rem;
  margin-left: 1rem;
}

.learn{
  display: inline flex;
  border: solid 2px;
  padding: 10px;
  margin: 1rem;
  border-radius: 5px;
}

/* Footer */
.footer{
background-color: var(--secondary-background-color);
}

.footer-container{
  gap: var(--gap);
  }




.footer-list{
flex-direction: column;
align-items: flex-start;
}

.footer-title{
font-size: var(--font-size-sm);
text-transform: uppercase;
margin-bottom: var(--margin-sm);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 1rem;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #3f4254;
}

::-webkit-scrollbar-thumb:hover {
  background: #2e303b;
}