* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    box-sizing: 'Fira Sans', sans-serif;
}

html,
body {
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    overflow: overlay;
    overflow-x: hidden;

}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(90, 90, 90);
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.pfp {
    width: 80px;
    height: 80px;
    scale: 0.7;
    border-radius: 50%;
    top: 0px;
    right: 10px;
    position: absolute;
    border-style: solid;
    border-width: 3px;
    animation: reva .1s ease-in forwards;
    -webkit-animation: reva .1s ease-in forwards;
}
.pfp:hover {
    animation: hova .1s ease-in forwards;
    -webkit-animation: hova .1s ease-in forwards;
}

/* top left back button for login.php */

.login {
    position: absolute;
    transform: scale(2);
    top: 14px;
    left: 21px;
    text-align: center;
    box-shadow: none;
    padding-bottom: 1px;
    padding-right: 1px;
    border-radius: 10%;
    border-color: #3131315b;
    background-color: #3131313a;
}

.login:hover {
    opacity: 0.95;
    transform: scale(2.2);
}

.login:focus {
    opacity: 0.8;
}

/* end of back button */

.log {
    text-align: center;
    margin-bottom: 6%;
    color: #FFF;
}

.main {
    display: flex;
    margin-left: 2px;
    margin-right: 2px;
    flex-direction: column-reverse;
    align-items: center;
}

.main .in {
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #31313135;
    padding: 15px 100%;
    border-radius: 10%;
    border:1px solid rgba(255, 255, 0, 0.083);
    margin-right: 3px; 
    margin-left: 3px;
    margin-top: 40vmin;
    margin-bottom: 350px;
    transform: scale(2);
}


@media screen and (max-aspect-ratio: 1/1){
    .main .in {
        margin-top: 40vmax;
    }
}

@media screen and (max-width: 450px){
    #toozer {
        display: none;
    }
}
.in .usera {
    display: flex;
    flex-flow: wrap;
    margin-top: 2px;
    flex-wrap: nowrap;
    align-content: space-between;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
}

.in .user {
    display: flex;
    text-align: center;
    margin-top: 2px;
    opacity: 0.7;
    padding: 3px 4px;
    background-color: #262e5c9d;
    color: #a6a064;
    text-align: left;
    border-radius: 70px;
    outline-color: #313131;
}


.in .user:nth-child(1) {
    animation: welcome .4s forwards 0s ease-in-out normal;  
}
.in .user:nth-child(1):hover {
    filter: contrast(0.9);
}
.in .user:nth-child(1):focus {
    filter: contrast(.7);
}

@keyframes welcome {
    0% {
        transform: translateX(-250px);
        opacity: 0;
    }
    1% {
        opacity: .7;
    }
    3% {
        opacity: 1;
    }
    50% {
        transform: translateX(0px);
        opacity: 1;
    }
}
 /* EYE BUTTON START ---------------- */

#icon-eye {
    animation: opi 1s forwards 0s ease-in-out normal;
}

@keyframes opi {
    0% {
        opacity: 0;
    }
    40%{
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.in .usera #toozer {
    position: fixed;
    transform: translate(182px,-25.25px);
    /* border: none; */
    width: 21px;
    height: 25px;
    background-color: #31313100;
    cursor: pointer;
}

#icon-eye {
    transform: scaleY(.8);
    margin: auto;
    padding: 2px;
    color: #ffffff;
}

#eye {
    /* set these to blink faster/slower */
    --duration-blink: .2s;
    --duration-lashes: .2s;

    /* calculated and fixed vars */
    --delay-lashes: var(--duration-blink);
    --duration-pupil: .1s;
    --delay-pupil: calc(var(--duration-blink)*2/3);
}

#eye-bottom,
#eye-top {
    stroke-linecap: round;
}

#eye-top,
#eye-lashes {
    transition: var(--duration-blink) ease-in;
}

#eye-pupil {
    opacity: 0;
    transition: opacity var(--duration-pupil) var(--delay-pupil) ease;
}

/* open state */
.eye-open #eye-top,
.eye-open #eye-lashes {
    transform: rotateX(.5turn);
    animation: scaleUp var(--duration-lashes) var(--delay-lashes) ease-in-out;
}

.eye-open #eye-pupil {
    opacity: 1;
}

.eye-close #eye-pupil {
    opacity: 0;
}

/* EYE BUTTON END ---------------- */

/* REFRESH BUTTON START */

#Re {
    animation: opium 1.2s forwards 0s ease-in normal;
}

@keyframes opium {
    0% {
        opacity: 0;
    }
    40%{
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

#boozer {
    animation: loopie 0.235s forwards 0s ease-in-out normal;
}

@keyframes loopie {
    0% {
        transform: rotateZ(0deg);

    }
    100% {
        transform: rotateZ(360deg);
    }
}

#wrappa {
    display: flex;
    align-items: center;
    transform: translate(77px, -12.6px);
    justify-content: center;
    align-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    z-index: 1;

}

@media screen and (max-width: 360px){
    .in .user {
        width: 50vmin;
    }
    #checkboxes label {
        font-size: 8px;
    }
    div#wrappa { 
        transform: translate(21vw, -12.6px);
    }
}

@media screen and (max-width: 360px){
    #PassGen .copy {
        translate: 38vw 29.2px;
    }
}

.in .usera #boozer {
    position: fixed;
    width: 21px;
    height: 21px;
    background-color: none;
    cursor: pointer;
    color: #313131;
    z-index: 1;

}

#Re {
    transform: scale(.814);
    margin: auto;
    width: 21px;
    height: 21px;
    padding: 2px;
    /* transform: translate(43px,-23.65px); */
    fill: #ffffff;
    color: #313131;
    transform-origin:center;
    z-index: 1;

}

/* REFRESH BUTTON END */

/* COPY BUTTON START  */

.copy {
    position: fixed;
    transform: translate(143px, -22.4px);
    border: none;
    background-color: #e5802d00;
    cursor: pointer;
    height: 10px;
    width: 10px;
    z-index: 0;
    -webkit-tap-highlight-color: transparent;
    
}

.copy {
    animation: opi 1.4s forwards 0s ease-in-out normal;
}

.copy svg {
    height: 40px;
    width: 40px;
    translate: -6px -6px;
    transform: scale(0.64);
}

.copy .clip {
    opacity: 1;
    animation: reva .1s ease-in forwards;
    -webkit-animation: reva .1s ease-in forwards;
}

button.copy:hover .clip {
    animation: hova .1s ease-in forwards;
    -webkit-animation: hova .1s ease-in forwards;
}

@-webkit-keyframes hova {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.07);
    }
}

@-webkit-keyframes reva {
    from {
        transform: scale(1.07);
    }

    to {
        transform: scale(1);
    }
}

@keyframes hova {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.07);
    }
}

@keyframes reva {
    from {
        transform: scale(1.07);
    }

    to {
        transform: scale(1);
    }
}

@keyframes animo {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1.5);
    }
    
}

@-webkit-keyframes opacityyy {
    0% {
        opacity: 1;
        transform: scale(1, 1);
    }

    0.621% {
        opacity: 1;
        transform: scale(1, 0.8);
    }

    3.104% {
        opacity: 0.8;
        transform: scale(0.9);
    }

    12.415% {
        opacity: .1;
        transform: scale(0);
    }

    24.829% {
        opacity: 0;
    }

    75.171% {
        opacity: 0;
    }

    85.585% {
        opacity: 0.1;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1.07);
    }
}

@keyframes opacityyy {
    0% {
        opacity: 1;
        transform: scale(1, 1);
    }

    0.621% {
        opacity: 1;
        transform: scale(1, 0.8);
    }

    3.104% {
        opacity: 0.8;
        transform: scale(0.9);
    }

    12.415% {
        opacity: .1;
        transform: scale(0);
    }

    24.829% {
        opacity: 0;
    }

    75.171% {
        opacity: 0;
    }

    85.585% {
        opacity: 0.1;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1.07);
    }
}

*/ .copy {
    display: block;
    margin: 40px auto 0;
}

.copy:focus .path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
}

.copy .line {
    opacity: 0;
}

.copy .check {
    opacity: 0;
}

.copy .circle {
    opacity: 0;
}

@-webkit-keyframes opacityy {
    0% {
        opacity: 1;
        stroke-dashoffset: 1000;
    }

    22.01% {
        stroke-dashoffset: 0;
    }

    77.99% {
        stroke-dashoffset: 0;
    }

    100% {
        opacity: 1;
        stroke-dashoffset: 1000;
    }
}

@keyframes opacityy {
    0% {
        opacity: 1;
        stroke-dashoffset: 1000;
    }

    22.01% {
        stroke-dashoffset: 0;
    }

    77.99% {
        stroke-dashoffset: 0;
    }

    100% {
        opacity: 1;
        stroke-dashoffset: 1000;
    }
}

@-webkit-keyframes dash {
    0% {
        opacity: 1;
        stroke-dashoffset: 1000;
    }

    16.84% {
        stroke-dashoffset: 0;
    }

    83.16% {
        stroke-dashoffset: 0;
    }

    100% {
        opacity: 1;
        stroke-dashoffset: 1000;
    }
}

@-webkit-keyframes dash-check {
    0% {
        opacity: 1;
        stroke-dashoffset: -100;
    }

    16.84% {
        stroke-dashoffset: 900;
    }

    83.16% {
        stroke-dashoffset: 900;
    }

    100% {
        opacity: 1;
        stroke-dashoffset: -100;
    }
}

@keyframes dash {
    0% {
        opacity: 1;
        stroke-dashoffset: 1000;
    }

    16.84% {
        stroke-dashoffset: 0;
    }

    83.16% {
        stroke-dashoffset: 0;
    }

    100% {
        opacity: 1;
        stroke-dashoffset: 1000;
    }
}

@keyframes dash-check {
    0% {
        opacity: 1;
        stroke-dashoffset: -100;
    }

    16.84% {
        stroke-dashoffset: 900;
    }

    83.16% {
        stroke-dashoffset: 900;
    }

    100% {
        opacity: 1;
        stroke-dashoffset: -100;
    }
}

.copycline {
    opacity: 0;
}
.copycheck {
    opacity: 0;
}
.copycircle {
    opacity: 0;
}

.copy .path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
}

.copyclip {
    animation: opacityyy 3.222s ease-in normal;
    -webkit-animation: opacityyy 3.222s ease-in normal;
}

.copycircle {
    animation: opacityy 2.862s 0.18s ease-in-out;
    -webkit-animation: opacityy 2.862s 0.18s ease-in-out;
}

.copyline {
    stroke-dashoffset: 1000;
    animation: dash 2.262s 0.48s ease-in-out forwards;
    -webkit-animation: dash 2.262s 0.48s ease-in-out forwards;
}

.copycheck {
    stroke-dashoffset: -100;
    animation: dash-check 2.262s 0.48s ease-in-out forwards;
    -webkit-animation: dash-check 2.262s 0.48s ease-in-out forwards;
}


/* COPY BUTTON END*/

/* PASSWORD GENERATOR END */

/* PASSWORD GENEREATOR START */

#lengthin input::-webkit-outer-spin-button,
.in div.usera input[type=number]::-webkit-inner-spin-button {
    display: none;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

.in div.usera input[type=number] {
    appearance: textfield;
    -moz-appearance:textfield; 
}

.in div.usera #rand_pass {
    transform: scale(0.96);
}

.in div.usera div#lengthwrapper {
    display: flex;
    flex-direction: column;
    margin: auto;
    margin-top: 3px;
    justify-content: center;
    align-items: center;
}

.in div.usera div#lengthwrapper #lengthin {
    overflow: auto;
    border-radius: 10px;
    max-width: 27px;
    max-height: 15px;
    margin-right: 4px;
    padding: 1px;
    text-align: center;
    font-size: 12px;
    background-color: #0009011f;
    color: white;
}

.in div.usera div#lengthwrapper #lengthslide {
    vertical-align: middle;
}

 div.usera button#saavy {
    max-width: 60px;
    justify-content: center;
    margin: auto;
}

/* Slider start */


input[type=range] {
    min-width: none;
    width: 125px;
    height: 10px;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(17, 17, 17, 0);
    outline: none;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.306);
    animation: opi 1.2s forwards 0s ease-in-out normal;
}

input[type=range]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #000901;
    cursor: pointer;
    border: 5px solid rgb(119, 233, 200);
    box-shadow: -407px 0 0 400px #0c360f93;
}
  
/* Slider end */

/* Checkboxes */

/* #Hwrapper {
    display: none;
} */

#Twrapper {
    margin-top: 5px;
}
label {
    color: white;
    font-size: 12px;
    vertical-align: top;
}

input[type=checkbox] {
    transform:scale(0.7);
    vertical-align: top;
}

/* Checkboxes end */


/* PASSWORD GENERATOR END */

.in .reggie {
    display: flex;
    margin-top: 10px;
    margin-bottom: 2.5px;
    padding: 3px;
    border-width: 1.5px;
    border-radius: 6px;
    text-align: center;
    color:aliceblue;
    background-color: #e5802d0b;
    border:1px solid #313131f0;
    cursor: pointer;
}

#dash {
    width: 26vh;
    justify-content: center;
}

.in .reggie {
    animation: reva .075s ease-in forwards;
}
.in .reggie:hover {
    animation: hova .075s ease-in forwards;
}

@keyframes hova {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
        filter: brightness(1.3);

    }
}

@keyframes reva {
    from {
        transform: scale(1.1);
    }

    to {
        transform: scale(1);
    }
}

/* sign up links and whatever */

small {
    color: rgb(73, 167, 198);
}

a {
    text-decoration: none;
}

.inlink {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-right: 3px;
    margin-left: 3px;
    margin-top: 37px;
    margin-bottom: 35px;
    transform: scale(2.2);
    text-align: center;
    white-space: pre-line;
}

/* end of signup links */

#helllo {
    text-align: center;
    margin-bottom: 10px;
}

/* top left back button for login.php */

.login {
    position: absolute;
    transform: scale(2);
    top: 14px;
    left: 21px;
    text-align: center;
    box-shadow: none;
    padding-bottom: 1px;
    padding-right: 1px;
    border-radius: 10%;
    border-color: #3131315b;
    background-color: #3131313a;
}

.login:hover {
    opacity: 0.95;
    transform: scale(2.2);
}

.login:focus {
    opacity: 0.8;
}

/* end of back button */


/* background */

canvas#canvas {
    filter: blur(5px) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="a"><feComponentTransfer><feFuncA type="linear" slope="10"/></feComponentTransfer></filter>#a');
    z-index: -1;
    position: fixed;
    min-height: 200px;
    min-width: 10px;
    width: 160vmax;
    height: 281vmin;
    top: 0;
    left: 0;
    overflow: overlay;
    transform: rotate(60deg) scale(2) translateY(0%);
    --gradient-color-1: #ef008f;
    --gradient-color-2: #6ec3f4;
    --gradient-color-3: #7038ff;
    --gradient-color-4: #ffba27;
    --gradient-speed: 0.000006;
}