/* index.html */

/* body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0px;
    padding: 0px;
    font-weight: 500;
    font-family: 'Outfit', sans-serif;
    color: white;
    background-color: #000000;
} */

/* Import a clean, readable modern font (optional but recommended) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600&display=swap');

body {
    

    /* Font settings */
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    font-size: 16px;

    /* Basic layout */
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    /* Color scheme defaults */
    background-color: #ffffff;
    color: #000000;

    /* Smooth text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Prevent font resizing in some browsers */
    -webkit-text-size-adjust: 100%;
}

/* Dark theme support using prefers-color-scheme */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #000000;
        color: #ffffff;
    }
}

/* Responsive typography scaling */
@media (max-width: 600px) {
    body {
        font-size: 15px;
    }
}

@media (max-width: 400px) {
    body {
        font-size: 14px;
    }
}



header{
    background-color: #007bff;
    min-height: 60px;
    width: 100%;
    text-align: center;
    align-items: center;
    align-content: center;
    box-shadow:0px 15px 50px -5px #0164cd;
    color: white;
}
form{
    padding: 20px;
    margin: 10px;
    /* border: solid yellow; */
    line-height: 40px;
    min-width: 100px;
    text-align: start;
}
#address{
    min-height: 30px;
    text-decoration: dotted;
}
#d,#h{
    width: 40px;
    height: 17px;
}
lable{
    color: red;
}
input{
    width: 100%;
    /* height: 20px; */
    padding: 7px;
    border: solid 1px;
    border-radius: 5px;
    border: solid 1px black;
}
input:hover{
    border: solid 1px white;
    height: 20px;
    box-shadow:0px 0px 30px #0164cd;
    
}
#generate{
    background-color: #007bff;
    width: 130px;
    min-height: 40px;
    border: solid rgb(255, 255, 255) ;
    border: 0;
    border-radius: 20px;
    cursor: pointer;
    margin-bottom: 100px;
    margin-top: 20px;
    color: white;
    font-family: 'Outfit', sans-serif;
}
#generate:hover{
    border-color: #007bff;
    border:0;
    height: 40px;
    /* width: 160px; */
    box-shadow:0px 0px 40px #0164cd;
    
}


/* idcard.html */

#disclaimer{
    overflow: hidden;
    background-color: #007bff;
    box-shadow:0px 15px 50px -5px #0164cd;

    color: white;
    height: 50px;
    width: 100%;
    
}
#disclaimer span{
    margin-top: 10px;
    display: inline-block;
    white-space: nowrap;
    animation: move-text 10s linear infinite;
    position: relative;
    animation-delay: 0s ;
}
#warning{
    color: red;
}

@keyframes move-text {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-60%);
    }
}

#card{
    margin: 50px 5px 50px 5px;
    display: flex;
    flex-wrap: wrap;
    /* border: solid red; */
    text-align: center;
    width: 100%;
    justify-content: center;
    color: black;
    
}

#front{
    position: relative;
    /* margin-right: 25px; */
    /* margin-bottom: 50px; */
    /* border: solid rgb(0, 229, 255); */
    color: black;

}

#frontcontent{
    position: absolute;
    top: 240px;
    left: -150px;
    transform: translate(-50%,-50%);
    /* border: solid red; */
    width: 200px;
    font-size: 10px;
    text-align: start;
    color: black;
}
#fd,#fh{
    color: black;
    position: absolute;
    top: 40%;
    left: -45px;
    transform: translate(-50%,-50%);
    /* border: solid red; */
    min-width: 10px;
    align-self: center;
    font-size: 15px;
}
#back{
    position: relative;
    /* border: solid rgb(208, 255, 0); */
    color: black;
}
#backcontent{
    position: absolute;
    top: 40%;
    left: -130px;
    transform: translate(-50%,-50%);
    /* border: solid red; */
    width: 235px;
    align-self: center;
    color: black;
    font-size: 9px;
    text-align: start;
}
#brollno{
    position: absolute;
    top: 85%;
    left: -145px;
    transform: translate(-50%,-50%);
    min-width: 400px;
    align-self: center;
    font-size: 10px;
    color: black;
}
#bgimg{
    width: 270px;
    height: 382px;
    position: relative;
    box-shadow:0px 0px 30px #0164cd;

}
#stuimg{
    width: 80px;
    max-height: 90px;
    position: absolute;
    top: -52%;
    left: -260px;
    /* border: solid  green; */
    padding: 110px 98px 170px 80px;
    margin: 190px 5px 50px 5px;
    z-index: 1;
}




footer img:hover{
    width: 10px;
    box-shadow: 0 0 20px rgb(0, 0, 0);

}
footer{
    text-align: center;
    color: white;
    background-color: #007bff;
    height: 300px;
    padding-top: 30px;
    box-shadow:0px 15px 50px 15px #0164cd;

    /* box-shadow: -15px 0px 20px rgba(3, 159, 255, 0.9); */
    margin-top: 90px;
    
}
footer p{
    margin-left: 30px;
    margin-right: 30px;
}
.reg-btn{
    background-color:  #007bff;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 0px 0px 20px rgb(0, 0, 0 ,0.9);

}
.reg-btn:hover{
    /* background-color:  #FF69B4; */
    background-color: #007bff;

}
a:hover{
    text-decoration: underline;
}