*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #9F1239;
}

#head-el{
    padding: 0.8em 2em 0.4em 2em;
    font-size: 5rem;
    font-family: 'Karla', sans-serif;
    color:white;
    letter-spacing: -0.025rem;
    
}

#descp-el{
    padding: 0 4em;
    font-size: 2.6rem;
    font-family: 'Inter', sans-serif;
    color: #D5D4D8;
}

#genbut-el{
    margin: 2.5em 5em 2em 5em;
    padding: 0.4em 0.8em;
    background-color: #FCD34D;
    font-size: 2rem;
    border:none;
    box-shadow: 0px 1px 2px black;
    border-radius: 6px;
    color: rgb(70, 36, 36);
}

.hr-line{
    width: 78%;
    border-top: 1px solid #FDA4AF;
    margin: 0 10em;
}

.passwords{
    display:flex;
    justify-content: space-between;
}

#passDiv1 , #passDiv2 {
    margin: 2em 5em 1.5em 5em;
    padding: 0.4em 0.8em;
    background-color: #F43F5E;
    border-radius: 6px;
    width: 12.5em;
    height: 2em;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 2rem;
    color: #FCD34D;
}

@media screen and (max-width: 600px) {
    html{
        font-size: 13px;
        text-align: center;
    }

    #head-el{
        padding: 2em 0.25em 1.25em 0.25em;
    }

    #descp-el{
        padding: 0;
    }

    #genbut-el{
        margin: 2.5em 0;
    }

    .hr-line{
        width: 95%;
        margin: 0 0.25em 2.5em 0.25em;
    }

    .passwords{
        display: flex;
        flex-direction: column;
        margin-bottom: 6em;
    }

    #passDiv1 , #passDiv2{
        margin: 1em 1.25em;
    }

}