styles.css

body
{
    background-image: url('bg.png');
    background-size: cover;
    background-repeat: no-repeat;

}

.bodyindex{
  background-image: url('https://i.ibb.co/QCDkDTH/Copy-of-moodify-1.png');
  /* background-size: cover; */
  width: 100%;
  height: 100%;
}

.form1{
 color: white;
}
.footer{
  color: white;
}
.file1 {

  background-color: black;
  opacity: 0.7;
font-family: sans-serif;
  border-radius: 10px;
  color: white;
  width: 300px;
  padding: 20px;
  border-style: solid ;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
}
.title
{
 /* margin-left: 30%;
 margin-top: 7%;
 padding-right: 10px; */

 align-self: center;
 font-size: 20px;
 height: 40%;
 width: 40%;
 /* background-color:rgba(255,255, 255); */
 color: rgba(255, 0, 0);

 position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

#image
{
    padding-left: 20px;
    padding-top: 5px;
    height: 80%;
    width: 25%;
    margin-top: 5%;
    margin-left: 38%;
    border: 5px;
    font-size: 10px;
    background-color: white;
    color: red;
}

#pic
{
    z-index: 5px;
    border: 5px;
    color:black;
    background-color: black;
    height: 40%;
    width: 90%;
}

.title-header{
  position: relative;
  text-align: center;
  color: white;
  width: 100%;
}

.header-image{
  width: 30%;
}

.container{
  color: white;
}

a:link, a:visited {
  text-decoration: none;
  color: white;
}

.footer{

  height: 60px;
  width: 100%;
  margin-left: 0;
  margin-top: 40px;
opacity: 0.0;
}