@media screen and (max-width:678px) {
    
/*phone*/
footer{
    margin-top: 90%;
}

span{
    color: darkslategray;
  }
  header{
    margin-right: -25%;
      text-align: center;
      color: darkslategray;
      font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      text-decoration:dotted;
      background-color:rgb(232, 238, 232);
  
  }

body{

    font-family: Cambria, Cochin, 'Georgia', Times, serif;
  background-color: rgb(189, 189, 189) ;
    text-align: center;
align-content: center;

}

img{
    position: relative;
    left: 39%;
    top: 120px;
    max-width: 60px;
    position: relative;
}

H4{
    display: 0;
    text-align: center;
}
marquee{
    color: black;
    font-size:xx-small;
}
form{
    display: inline-block;
    align-content: center;
    text-align: center;
    margin-top: 25%;
    background-color:darkslategray;
    margin-left: 10%;
    margin-right: 20%;
    padding: 40px 20%;
    border-radius: 10px;
    color: white;
}
form:hover{
    box-shadow: 0 0 20px gray;
}
label { 
    color: whitesmoke;
    letter-spacing: 1.2px;
    text-align: center;

}
#id{
    border: 0;
    outline: 0;
    border-radius: 0;
    background-color:transparent;
    border-bottom: 2px solid white;
    color: whitesmoke;
    margin-bottom: 12px;
    
}
hr{
    background-color: black;
}
#id:hover{
    
    transition: all 0.2s ease;
    border-radius: 7px;
}
#pass:hover{
    transition: all 0.2s ease;
    border-radius: 7px;
    border:  2px solid white;
    box-shadow: 0 0 20px whitesmoke;
}

.Submit{
    margin-top: 5px;
    border: 0;
    outline: 0;
    padding: 10px 10px;
    color: white;
    background-color: green;
    border-radius: 15px;
    margin-left: 11px;

}
.Submit:hover{
    transition: all 0.3s linear;
    outline: 0;
}
.Reset{
    margin-top: 5px;
    border: 0;
    outline: 0;
    padding: 10px 10px;
    color: white;
    background-color: red;
    border-radius: 15px;
    margin-left: 11px;
}
.Reset:hover{
    box-shadow: 0 0 20px red;
    outline: 0;
}
#Reg-error{
color: red;

}

}




@media screen and  (min-width:678px) {

  /*computer*/
body{
     border: 0;
     outline: 0;
    font-family: Cambria, Cochin, 'Georgia', Times, serif;
    background-color: rgb(189, 189, 189);
    text-align: center;
align-content: center;

}
marquee{
    position: relative;
    top: 150px;
}

span{
    color: darkslategray;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  }
  header{
      padding-top: 0;
      padding-bottom: 5px;
      margin-top: 0;
      text-align: center;
      color: darkslategray;
      font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      background-color:rgb(232, 238, 232);
  
  }
img{
 position: relative;
 left: 35%;
 top: 7rem;
    max-width: 70px;
    position: relative;
}

h4{
    display: 0;
    text-align: center;
    position: relative;

}

form{
    margin-top: 8%;
    background-color:darkslategray;
    margin-left: 20%;
    margin-right: 20%;
    padding: 40px 20%;
    border-radius: 10px;
    color: white;
}
label { 
    color: whitesmoke;
    letter-spacing: 1.2px;
    text-align: center;

}
#id{
    border: 0;
    outline: 0;
    border-radius: 0;
    background-color:transparent;
    border-bottom: 2px solid whitesmoke;
    text-align: center;
    align-content: end;
    margin-left: 5px;
    color: whitesmoke;
    text-shadow: 0 0 15px transparent;
    
}
#pass{

    border: 0;
    outline: 0;
    margin-left: 5px;
    background-color: transparent;
    border-bottom: 3px solid white;
    text-align: center;
    color: whitesmoke;
    text-shadow: 0 0 15px white;
}

#id:hover{
    
    transition: all 0.2s ease;
    border-radius: 7px;
}
#pass:hover{
    transition: all 0.2s ease;
    border-radius: 7px;
    border:  2px solid white;
    box-shadow: 0 0 20px whitesmoke;
}

.Submit{
    margin-top: 5px;
    border: 0;
    outline: 0;
    padding: 15px 20px;
    color: white;
    background-color: green;
    border-radius: 15px;
    margin-left: 11px;

}
.Submit:hover{
    transition: all 0.3s linear;
    outline: 0;
}
.Reset{
    margin-top: 5px;
    border: 0;
    outline: 0;
    padding: 15px 20px;
    color: white;
    background-color: red;
    border-radius: 15px;
    margin-left: 11px;
}
.Reset:hover{
    
    border-bottom: 5px solid white;
    outline: 0;
}
#Reg-error{
color: red;

}  
    
}