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

body {
    background-color: #2b2b2b;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: grid;
    place-content: center;
}

.container,h2,
.lengthrow p,
.checkbox {
    color: #e2e2b6;
}

.container {
    height: auto;
    width: 98%;
    background: #021526;
    position: relative;
    padding: 10px 30px;
}

.container::after,
.container::before {
    content: "";
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    background: linear-gradient(45deg,
            #ff5100,
            #0000ff,
            #008000,
            #bea009,
            #ff0000,
            #800080,
            #00e5ff);
    position: absolute;
    top: -5px;
    left: -5px;
    z-index: -1;
    background-size: 500%;
    animation: ani 5s linear infinite alternate;
}

.container::after {
    filter: blur(25px);
}

@keyframes ani {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}

h2 {
    font-size: 1.5rem;
    margin: 1vw 0vw;
    font-weight: 600;
    margin-bottom: 30px;
    letter-spacing: 0.1rem;
}

h2 span {
    text-decoration: 4px underline #fbf6e2;
    text-underline-offset: 8px;
}

.inputbox {
    position: relative;
}

#Passwordbox {
    width: 100%;
    padding: 10px 20px;
    outline: 0;
    border: 3px solid #46afff;
    font-weight: 600;
    font-size: 1.5rem;
}

#Passwordbox::placeholder {
    font-weight: 400;
}

.inputbox span {
    position: absolute;
    top: 20%;
    right: 10px;
    font-size: 2rem;
    color: #03346e;
    font-weight: 900;
    cursor: copy;
}

.lengthrow {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    font-weight: bolder;
    font-size: 1.5rem;
}

#rangeinput {
    appearance: none;
    background-color: #46afff;
    width: 100%;
    height: 1vh;
    outline: none;
    border-radius: 50px;
    margin: 12px 0;
}

#rangeinput::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: #46afff;
    border: 4px solid #fff;
    border-radius: 50px;
    outline: 2px solid #46afff;
    cursor: pointer;
}

.row {
    margin: 3vh 0vh;
    position: relative;
    box-shadow: 0 0 5px rgba(107, 107, 107, 0.4);
    padding: 10px 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
}


.row label {
    margin-inline: 5px;
    font-weight: 600;
    font-size: 1.2rem;
}
.row input[type="checkbox"]{
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background-color: #fff;
    color: #03346e;
}

.genbtn {
    width: 100%;
    position: relative;
    font-size: 3vh;
    font-weight: 700;
    padding: 10px 20px;
    border: 0;
    outline: 0;
    border-radius: 0.4rem;
    cursor: pointer;
    background-color: #87cbff;
    color: #03346e;
    transition: 0.6s;
    margin-block: 4vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.genbtn:active {
    scale: 0.92;
}

.genbtn:hover {
    background: #03346e;
    background: linear-gradient(270deg, rgba(14, 32, 66, 0.681) 0%, rgba(0, 113, 123, 0.873) 60%);
    color: #040426;
    border: 1px solid #e2e2b6;
    color: #e2e2b6;
}

.genbtn span {
    margin-inline: 5px;
}

@media all and (max-width:320px) {

    .container::after,
    .container::before{
        display: none;
    }
}


@media all and (max-width:450px) {

    .container {
        width: 100%;
        height: auto;
        padding: 10px;
    }

    #Passwordbox,
    .rwo label {
        font-size: 1rem;
    }

    .inputbox span,
    .checkbox {
        font-size: 1.7rem;
    }

    .row {
        padding: 10px 7px;
    }

    .genbtn {
        font-size: 2.5vh;
    }

}