@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
:root{
    /* colors */
    --bg-clr: #111827;
    --accent: #22d3ee ;
    --heading: #e2e8f0;
    --text-body: #94a3b8;

    --ubuntu-mono: "Ubuntu Mono", monospace;
}

.light-theme {
    --bg-clr: #fdf6e3;         
    --accent: #268bd2;          
    --heading: #657b83;        
    --text-body: #586e75;       
    --border: #eee8d5;         
    --btn-bg: #eee8d5;       
    --btn-hover: #268bd2;       
    --btn-text: #073642;        
}  

/* background */
* {
    transition: background-color 0.5s ease, color 0.5s ease;
}

.my-bg-black{
    background: var(--bg-clr);
}

/* text & fonts */

.ubuntu-mono{
    font-family: "Ubuntu Mono", monospace;
}

.my-text-heading{
    color: var(--heading);
}
.my-text-body{
    color: var(--text-body);
}


/* buttons */

.btn-1 {
    background-color: #1f2937;
    color: #e5e7eb;
    border: 1px solid #334155;
    padding: 0.5rem 1.2rem;
    margin: 0.3rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    font-family: 'Chakra Petch', sans-serif;
}
  
.btn-1:hover {
    background-color: #3b82f6;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
}
.btn-1.active{
    background-color: var(--accent);
    color: var(--bg-clr);
    box-shadow: 0px 0px 4px 0px var(--accent);
    border: none;
}

.light-theme .btn-1.btn-1.active{
    background-color: var(--accent);
    color: #fff;
}

.light-theme .btn-1 {
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}
  
.light-theme .btn-1:hover {
    background-color: var(--btn-hover);
    color: white;
    box-shadow: 0 4px 10px rgba(38, 139, 210, 0.2);
    transform: translateY(-2px);
}


.btn-2 {
    background-color: #1f2937;
    color: #e5e7eb;
    border: 1px solid #334155;
    padding: 0.5rem 1.2rem;
    margin: 0.3rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    font-family: 'Chakra Petch', sans-serif;
}
  
.btn-2:hover {
    background-color: #3b82f6;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
}

.light-theme .btn-2 {
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}
  
.light-theme .btn-2:hover {
    background-color: var(--btn-hover);
    color: white;
    box-shadow: 0 4px 10px rgba(38, 139, 210, 0.2);
    transform: translateY(-2px);
}
  

/* border */

.container-border{
    padding: 20px;
    border: 3px solid var(--accent);
    border-radius: 10px;
}
.light-theme .container-border {
    border: 2px solid var(--border);
    background-color: #fefcf5;
}
.card-border{
    padding: 20px;
    border: 1px solid var(--accent);
    border-radius: 10px;
    background-color: #182033;
}
.light-theme .card-border {
    border: 2px solid var(--border);
    background-color: #fefcf5; 
}
  

/* filter gallery */

.fade-in {
    animation: fadeIn 0.3s ease-in;
}
  
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* filter gallery end */
  

/* me start */

.me-parent{
    bottom: 0px;
    right: 10px;
}

.me {
    transition: all 0.3s ease, filter 0.3s ease;
    border-radius: 50%;
    filter: drop-shadow(0 0 5px var(--accent));
}

.light-theme .me{
    filter:sepia(0.5)
}

.me:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* me end */