HTML/CSS - Login Page (💥💥) Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html lang="en">
    <head>
    <title>Random Color Button</title>
    <title>Login Test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>
    <body id="Card" onload="showPage()" id="myPage">
     <br><header id="in"><h1><b>My Basic Login</b></h1></header>
        <div class="into" id="Crod">
        <div class="Div-1">
            <label><i class="material-icons">person</i> Username:</label><br>
           <input type="text" id= "ho" name="name" class="Name" required autofocus placeholder="Enter your name here">
           <br><br><label><i class="material-icons">person</i> Designation/Title:</label>
         <br><label class="container">
  Mr
  <input type="checkbox" unchecked="unchecked" value="Mr" id="checkbox1" name="title">
  <span class="checkmark"></span>
</label>
     <label class="container">
         Mrs/Miss
        <input type="checkbox" unchecked="unchecked" value="Mrs/Miss" id="checkbox2" name="title" >
  <span class="checkmark"></span> 
     </label> <br>

css

#in{
    font-size:19px;
}
*{
    margin:0 10 10 0;
    padding:0;
    box-sizing:border-box;
    font-family:"Courier New";
    font-size:none;
    font-weight:bold;
    border-color: #ccc;
    animation-name:scrollLeft;
}
body{
    height:100%;
    display:grid;
    align-items:center;
    justify-content:center;
    margin-top:0px;
    margin-left:20px;
    font-size:19px;
    background: linear-gradient(57deg,  #fdd266,  #c33c7a,  #595ba8,  #e96d2b,  #d1e45f,  #5a81cf,  #ff40d0);
    background-size: 600% 600%;
    animation: GradientAnimation 30s ease-in infinite;
}
@keyframes GradientAnimation {
    0% {

BROWSER

Console