style.css

*
{
    margin: 1%;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    font-family: Arial, Helvetica, sans-serif;
}
body
{
    width: 100%;
    height: 100%;
}
h1 {
  text-align: center;
  background-color: #ff00ff;
  color: #ffffff;
  font-family: 'Sofia', cursive;
  box-shadow: 5px 5px 5px 2px #ff00ff;
  border-radius: 10px;
  text-shadow: 5px 5px 5px #000000;

}
#form
{
    width: 50%;
    background-color: #ff00ff;
    margin:150px auto;
    padding: 20px 10px ;
    box-shadow: 2px 2px 14px -1px rgba(0,0,0,0.75);
    background-image: linear-gradient(#ff00ff,red);
    border-radius: 10px;

}
.show{
  border: 2px solid red;
  width: 50%;
  margin: 0 auto;
  margin-top: -50px;
  padding: 20px 10px ;
  border-radius: 10px;
  box-shadow: 2px 2px 14px -1px rgba(0,0,0,0.75);
  background-image: linear-gradient(#ff00ff,red);
  display: none;
}
.show ul{
  list-style-type: none;
}
.show li{
  margin-top: 20px;
  margin-bottom: 20px;
}

.showd{
  display: block;

}
form
{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
form div
{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
input[type="text"],select
{
    width: 80%;
    height: 30px;
}
textarea
{
    width: 80%;
}
input,select,textarea
{
   margin-bottom: 10px;
   border: 0px;
   padding: 0 10px;
   border-radius: 3px;
}
#text-area
{
    align-items: flex-start;
}
input[type="submit"]
{
   width: 80px;
   height: 30px;
   background-color: rgb(32, 226, 32);
   color: white;
   cursor: pointer;
}
input:focus,select:focus,textarea:focus
{
    border-bottom: 3px solid powderblue;
}
.page-footer {
  background-color: #ff00ff;
  text-align: center;
  color: #ffffff;
  padding: 1px;
  border-radius: 10px;
}
.footer-copyright a {
  color: #ffffff;
  text-decoration: none;
  background-color: #000000;
  border-radius: 2px;
  padding: 2px;
}
.btn {
  margin-right: -300px;
}
.btn input {
  background-image: linear-gradient(green,#ff00ff);
  font-size: 100%;
}