/* Default Light Theme */
:root {
    --primary-color:#68AE6B;    
    --secondary-color: #253847; 
    --tertiary-color: #FFEB3B;    
    /*color of text */  
    --background-color: white;
    --text-color: var(--secondary-color);
    --primary-text-color:#ffffff;
    --secondary-text-color:var(--primary-color);
    --tertiary-text-color:black; 


}


body{
	color:#68AE6B;
	background-color:#253847;

}
.font-gputeks{

font-family: 'Gputeks', sans-serif;
}

.font-fear-robot{
	font-family: 'Fear Robot', sans-serif;

}


.font-whois{
font-family: 'Whois', sans-serif;
}

.canvas{
		color:#68AE6B;
	background-color:#253847;
}

 

.logo-container{
	background-color: #252525 !important;
}
.navigation-bar{
	width:100%;
            background-color: var(--primary-color);
color:var(--primary-text-color);
}


.right-sidebar{
	max-width: 70%;
	min-width: 70%;
	padding: 0px;
	margin :0px;
}


.sidebar-button{
	margin: 2px;
	padding:5px;
	border: 1px solid #B0BEC5;
	color:var(--primary-color);
	font-weight: bold;
            box-shadow: 0 7px 8px rgba(0, 0, 0, 0.3);

	font-size:clamp(1.2rem, 0.2rem + 0.1vw, 1.6rem);
	text-overflow: fit;

}

.sidebar-button:active{
	color:var(--primary-text-color);
	background-color: var(--primary-color);

}
.sidebar-heading{
	color:var(--tertiary-text-color);
	padding:3px;
	background-color: var(--tertiary-color);
            text-align: center;
}

 .mobile-navigation-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }

        .mobile-navigation-bar .button{
            box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
        	padding:5px;
        	color:var(--text-color);
        	background-color:var(--primary-color);
        	border-radius: 50%;
        }
        .mobile-navigation-bar .logo {
            display: flex;
            justify-content: center;
            flex-grow: 1; /* Allow logo to center */
        }

        .mobile-navigation-bar .icon {
            font-size: 24px;
            color: white;
            cursor: pointer;
        }

        .page-content {
            margin-top: 30px; /* Space for fixed navbar */
            padding: 10px;
        }




.mobile-navigation-bar{
	background-color: var(--primary-color);
	color:var(--primary-text-color);

}




.desktop-navigation-bar{

}

.desktop-navigation-bar-button{
	padding:7px;
	font-weight: bold;
	color:var(--primary-text-color);
	background-color: var(--primary-color);
	text-align: center;
	font-size: clamp(1rem, 0.2vw + 0.1rem, 2rem);
	transition: all ease 0.3s;
	 font-family: 'Fear Robot';
}


.desktop-navigation-bar-button:hover{
color:var(--tertiary-text-color);
	background-color: var(--tertiary-color);
	padding: 6px;
	transform: scale(1.01);
font-weight: bolder;

}









.sliding-left-sidebar {
  opacity: 0;  
  transform: translateX(-100%);  
  animation: slideLeft 0.5s forwards;  
}


.sliding-right-sidebar {
  opacity: 0;  
  transform: translateX(-100%);  
  animation: slideLeft 0.5s forwards;  
}



@keyframes slideLeft {
  0% {
    opacity: 0; 
    transform: translateX(-100%);  
  }

  100% {
    opacity: 1; 
    transform: translateX(0);  
  }
}


@keyframes slideRight {
  0% {
    opacity: 0;  
    transform: translateX(100%);  
  }

  100% {
    opacity: 1;  
    transform: translateX(0);  
  }
}

.page-title{
	text-align: center;
	font-weight: bolder;
	color: var(--tertiary-color);
	padding: 3px;
	font-family: 'Fear Robot', sans-serif;
	border: 1px solid var(--tertiary-color);

}
.logo-image{
	max-width: 100%;
	min-width: 100%;
	min-height:auto;
	max-height:auto;
}
.profile-image{
	max-width: 200px;
	min-width:200px;
	min-height: 200px;
	max-height: 200px;
	object-fit: contain;
}

.coding-icon-container{
	font-size: clamp(3rem, 1vw + 0.3rem, 4rem);
	align-items: center;
	text-align: center;

}

.section{

}
 

.contact-info-sub-section a{
	text-decoration: none;
	text-align: center;
	padding: 3px;
}
.contact-info-sub-section a:hover{
	text-decoration: none;
	text-align: center;
	padding: 3px;
	transform:scale(1.2);
}

.sub-section{
	padding: 10px;
	margin: 0px;
	border:1px solid rgba(var(--primary-color), 0.3);
	border-radius: 10px;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);


}

.sub-section .word-search-on-click{
	font-weight: bolder;
	padding: 2px;
	font-size: clamp(1.2rem, 1vw, 2.3rem);
}
.sub-section-heading{
	border-radius:10px 10px 0px 0px  ;
	background-color:var(--tertiary-color) ;
	color: var(--tertiary-text-color);
	text-align: center;
	font-weight:bolder;
	padding: 3px;
	font-family: 'Fear Robot', sans-serif;

}


.item-card{
    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.4);
    color: var(--primary-color);
 transition:hover 0.5s ease, transform 0.4s ease; 
}

.item-card:hover{
	transform:scale(1.1);
	color:var(--tertiary-color);
    box-shadow: 0 0 9px rgba(255, 235, 59,0.9);


}
.item-card:hover .item-card-description{
	font-weight: bolder;
	color:var(--tertiary-color);
	font-size: clamp(1.2rem, 1vw + 0.1rem	, 2rem);

}

.item-card:hover .item-card-title{
	font-size: clamp(2rem, 1vw + 0.4rem	, 3.2rem);
}


.item-card img{
	max-width:100%;
	min-width:100%;
	max-height: 200px;
	min-width: 200px;
	object-fit: cover;
}
.item-card-title{
	font-weight:bold;
	text-align: center;
	color: var(--tertiary-color);

}

.item-card-description{
	color: white;
	font-weight: light;
	font-size: clamp(0.8rem, 0.8ren, 2rem);
}


.technology{
	border: groove var(--tertiary-color) 2px;
	padding: 7px;
	text-align: center;
	font-size:small;
	color:var(--tertiary-color) !important;
}


.technology-button:hover{
		background-color: var(--tertiary-color);
		color: var(--tertiary-text-color) !important;

}