* {
    border: 0;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

/* Css General */
.flexcolor {
    background-color: crimson;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 50vw;
}

form,
input[type='text'],
input[type='password'] {
    border: 1px black solid;
    /* */
    border-collapse: collapse;
}

form {
    box-shadow: 1px 1px 2px 2px black;
    text-align: center;
}

input[type='text'] {
    padding: 0.5em;
    margin-top: 0.5em;
    margin-left: 4em;
    margin-right: 4em;
    display: flex;
    flex-direction: column;
}

input[type='password'] {
    padding: 0.5em;
    margin-top: 1.5em;
    margin-left: 4em;
    margin-right: 4em;
    display: flex;
    flex-direction: column;
}

input[type='submit'] {
    padding: 0.2em;
    border-radius: 5px;
    margin-top: 1em;
    margin-left: 3em;
    margin-right: 3em;
}

input[type='reset'] {
    padding: 0.2em;
    border-radius: 5px;
    margin-top: 1em;
    margin-right: 3em;
    margin-left: 3em;
}

header {
    background-color: darkgrey;
    padding-bottom: 5px;
    text-align: center;

}

footer {
    background-color: darkorange;
    text-align: center;
}

@media all and (min-width:320px) {
    .flexcolor {
        background-image: radial-gradient(circle at -7.92% 90.56%, #ff00ff 0, #f600ff 16.67%, #ce00fc 33.33%, #a30ced 50%, #7715dc 66.67%, #4719cc 83.33%, #001cbc 100%);


        width: 100%;
        height: 100vh;
    }
    header {
        background-image: radial-gradient(circle at 0% 100%, #f9b300 0, #ffa300 8.33%, #ff8f00 16.67%, #ff7800 25%, #ff5e00 33.33%, #ff3f00 41.67%, #ed0c0c 50%, #d9001b 58.33%, #c60024 66.67%, #b6002c 75%, #a70033 83.33%, #99003b 91.67%, #8e0044 100%);
    }
    footer{
        background-image: radial-gradient(circle at -7.92% 90.56%, #ffffa7 0, #ffff8f 10%, #ffff75 20%, #ffff5a 30%, #fff73b 40%, #dced0c 50%, #b2e300 60%, #83d900 70%, #49d100 80%, #00c800 90%, #00c100 100%);
        padding-bottom: 5px;
    }
    input[type='text'], input[type='password']{
        color: white;
        background:none;
    }
    input[type='text']:hover {
        
        border-radius: 5px;
        background-color: white;
        color:black;


    }
    input[type='text']:focus {
        
        border-radius: 5px;
        background:none;


    }
    input[type='password']:hover {
        
        border-radius: 5px;
        color:black;
        background-color: white;


    }
    input[type='password']:focus {
        
        border-radius: 5px;
        background: none;


    }
    input[type='submit']:hover {
        
        
        background-image: radial-gradient(circle at 120.71% 50%, #ff8400 0, #ff7503 12.5%, #ff610a 25%, #f9440d 37.5%, #ed0c0c 50%, #e0000f 62.5%, #d60015 75%, #ce001c 87.5%, #ca0025 100%);


    }
    input[type='reset']:hover {
        
        
        background-image: radial-gradient(circle at 120.71% 50%, #ff62bc 0, #ff53c2 16.67%, #ff3bc3 33.33%, #ed0cbf 50%, #c900bb 66.67%, #a800bd 83.33%, #8600c3 100%);

    }

    
}
@media all and (min-width:720px) {
    .flexcolor {
        background-image: radial-gradient(circle at 120.71% 50%, #acffff 0, #76dfff 25%, #0cbaed 50%, #0096d3 75%, #0078be 100%);

        height: 100vh;
    }
    form {
        width: 100%;
    }
    header{
        background-image: radial-gradient(circle at 120.71% 50%, #aaabaa 0, #9e9b9e 16.67%, #8f868e 33.33%, #7b6e7d 50%, #66576d 66.67%, #544561 83.33%, #443958 100%);
    }
    footer{
        background-image: radial-gradient(circle at 9.44% 107.92%, #f6b600 0, #fda500 10%, #ff9100 20%, #fa7c00 30%, #ef6405 40%, #de4a18 50%, #cb3021 60%, #b91327 70%, #a9002c 80%, #9b0031 90%, #8f0037 100%);
    }
}
@media all and (min-width:1024px) {
    .flexcolor {
        background-image: linear-gradient(270deg, #de1818 0, #de1818 50%, #de1818 100%);
        height: 100vh;
        
    }
    form{
        background-image: linear-gradient(270deg, #f95100 0, #ee3909 25%, #de1818 50%, #cd001f 75%, #bd0025 100%);
    }
}