style.css

*{
    margin:0;
    padding:0;
}
body{
    background-color:rgb(255, 255, 255);
}
.container{
    width:60%;
    padding:2em;
    background-color :#02254b;
    margin:0 auto;
    transform:translateY(15%);
    
}
img{
    width:40px;
    background-color: aliceblue;
    border-radius: 1.1em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}

.dark-mode{
    background-color:#000000 ;
}
h1{
    margin: 0;
}
.headingOne{
    color:white;
 
}
.headingTwo{
    color:green;
}
h5{
    margin: 1em 0;
    color:white;
}
#getPassword{
    margin: 1.5em 0;
    background-color:rgb(98, 158, 8);
    font-size: 1rem;
    padding:0.6em;
    color: white;
}
.generatedPasswords{
    display: flex;
    margin-top:2em;
    gap:1em;
    max-width:171.81px;
}
#passwordOne,#passwordTwo{
    background-color: #2e3c70;
    color: aliceblue;
    width:50%;
    padding:0.8em;
    text-align: center;
}
label{
    color:white;
}
label,input{
    margin-top: 1.5em;
}

/* Media Queries for Responsiveness */

@media (min-width: 675px) {
    .box {
        width: 60%;
        padding: 3em;
        text-align: center;
    }
    .heading{
        display: flex;
        justify-content: center;
        gap:0.5em;
    }
    #getPassword {
        font-size: 1.2rem;
    }
    label{
        margin-right: 0.5em;
    }
    .generatedPasswords{
        margin:2em auto;
        max-width: 350px;
    }
    
}