:root{
    --h: 30px;
    --bsc:black;
    --projtitle:'Big Shoulders Stencil';
    --mainf:'Bona Nova SC';
    --sub1f:'Cinzel'; 
    --sub2f:'Moon Dance';
    --sub3f: 'Big Shoulders Inline';
    --placef:'Dancing Script';
    --succes:green;
    --error:red;
}

/* --------------------- login & signup ------------------------------ */
 
.siglo{ 
    height: 90vh;   
    display: flex;
    align-items: center;
    justify-content: center;
}

.loginform {
    background: cornsilk;
    padding: 1%;  
    border-radius: 10px;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2); 
    /* text-align: center; */ 
    width: 30%; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    gap: calc(var(--h)/1.2); 
}

/* .l{ 
    box-shadow: 8px 16px 8px rgba(0, 0, 0, 0.2); 
} */

.slhead { 
    color: black;
    /* margin-bottom: calc(var(--h)); */
    font-family: var(--mainf);
    font-size: calc(var(--h)*1.3);
}

.slform{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    gap: calc(var(--h)/1.2); 
    width: 100%; 
}

.slform .slmsg {
    display: block;
    margin: calc(var(--h)/5) 0 calc(var(--h)/6);
    font-weight: bold;
    font-family: var(--mainf); 
    font-size: calc(var(--h)/1.6);
    color: lightcoral;
}

input {
    width: 70%;  
    padding: 2.7%;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: calc(var(--h)/1.9); 
    font-family: Georgia;   
}

input[type="submit"], .btn {
    width: 73%;
    text-align: center;
    background-color: #007bff;
    color: white;
    /* border: none; */
    padding: 1%;
    font-family: var(--sub2f); 
    font-size: calc(var(--h)/1.5);  
    font-weight: 600;
    border-radius: calc(var(--h)/5);
    cursor: pointer;
    transition: 0.3s;
}

input[type="submit"]:hover, .btn:hover {
    background-color: #0056b3;
}

button {
    background: none;
    border: none;
    padding: 1%;  
    width: 73%;
    border-radius: calc(var(--h)/5);
    cursor: pointer;
    transition: 0.3s;
}

button a {
    width: 100%;
    display: block;
    text-decoration: none;
    color: white;
    background-color: #28a745;
    border-radius: calc(var(--h)/6);
    font-family: var(--sub2f); 
    font-size: calc(var(--h)/1.5);    
    font-weight: 600;
    transition: 0.3s;
}

button a:hover {
    background-color: #218838;
}

.slred{
    color: black;
    font-family: var(--sub2f);
    font-size: calc(var(--h)/1.3); 
    display: block;
    margin: calc(var(--h)/5) 0 calc(var(--h)/6);
    font-weight: 600; 
}

.slred a{
    text-decoration: none;
    color: rgb(0, 0, 0);
}

.slred a:hover{
    text-decoration: double;     
    color: rgb(1, 132, 255);
    transition: all 0.5s ease; 
}

/* ----------------------- nav ---------------------------- */

.nav{ 
    display: flex;
    align-items: center;
    /* justify-content: center; */
    margin-bottom: calc(var(--h)/5); 
}

.logoimg{
    width: 6.5%; 
    position: relative;
    top: 3%;  
    left: 3%;   
    background: transparent;       
} 
 
.logoimg a{
    width: 100%;
}
 
.logoimg img{  
    width: 60%;
    object-fit: cover;
} 

.nlogin{
    display: flex;
    align-items: center;
    justify-content: center; 
    flex-direction: row;
    gap: calc(var(--h)/1.5);   
    position: absolute;
    right: 4%; 
    top: 3%;    
}

.navele a{
    text-decoration: none;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center; 
    gap: calc(var(--h)/5.4); 
    width: 100%; 
}

.navele i{
    font-size: calc(var(--h)/2); 
}

.navele label{
    display: flex; 
    font-family: var(--sub1f);
    font-size: calc(var(--h)/1.5); 
    font-weight: 600;
    cursor: pointer;
} 

.nlogin .a:hover i,.nlogin .a:hover label{ 
  color: rgb(0, 247, 103);  
  transition: all 1s ease ;
}
  
.nlogin .n:hover i,.nlogin .n:hover label{ 
    color: rgb(31, 154, 255);  
    transition: all 1s ease ;
}

.nlogin .t:hover i,.nlogin .t:hover label{
    color: orange;   
    transition: all 1s ease ;
}

.nlogin .l:hover i,.nlogin .l:hover label{ 
    color: rgb(249, 68, 68);  
    transition: all 1s ease ;
}

/* ------------------------------- responsive ------------------------------- */
/* Medium screens (Tablets) */
@media (max-width: 1024px) {
    :root {
        --h: 25px; /* Reduce heading size */
        --bsc: #222; /* Slightly lighter black */
    }
    .loginform{ 
        width: 70%;
    } 

    .logoimg{
        width: 15%;  
        position: relative;
        top: 6%;  
        left: 3%;  
        background: transparent;       
    }
}

/* Small screens (Mobile) */
@media (max-width: 768px) {
    :root {
        --h: 20px; /* Further reduce heading size */
        --bsc: #333; /* Even lighter black */
        --succes: #28a745; /* Lighter green for better contrast */
        --error: #dc3545; /* Adjust red for readability */
    }

    .loginform{ 
        width: 70%;
    }

    .logoimg{
        width: 15%;  
        position: relative;
        top: 6%;  
        left: 3%;  
        background: transparent;       
    }
}

/* Extra small screens (Phones under 480px) */
@media (max-width: 480px) {
    :root {
        --h: 18px; /* Smallest heading size */
        --bsc: #444; /* Lightest black for readability */
    }

    .loginform{ 
        width: 70%;
    }

    .logoimg{
        width: 15%;  
        position: relative;
        top: 6%;  
        left: 3%;  
        background: transparent;       
    }
}