alexstyle.css

/* body{
  background-color: black;
} */
/* Add a black background color to the top navigation */
.horizontal_nav {
  background-color:black;
  overflow: hidden;
  padding: 10px;
  border-color: #f442e5;
  }

/* Style the links inside the navigation bar  */
.horizontal_nav a {
  float: left;
  border-radius: 8px;
  color: #f442e5;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  font-size: 25px;
  font-family:calibri;
  font-weight:bold;
  
}

/* Change the color of links on hover */
.horizontal_nav a:hover {
  background-color:#f442e5;
  color: black;
}

/* Add a color to the active/current link */
.horizontal_nav a.active {
  background-color:#f442e5;
  color: black;
}

.signup_form{
  width: 30%;
  font-size: 16px;
  font-weight: bold;
  font-family:"Lato", calibri;
  border-radius: 10px;
  background-color: #f442e5;
  padding: 20px;
  transform:translate(160%,-90%);

}
.signup_form input{
  width: 100%;
  margin-bottom: 10px;
  border-radius: 5px;
  

}
.signup_form input[type="text"], input[type="password"],input[type=email]
{
  border-color:  black;
  outline: none;
  /* height: 40px; */
  /* font-size: 16px; */
  padding: 8px 0px;
  padding-left: 5px;
  width: 100%;
  font-family:"Lato", calibri;
}
.signup_form input[type="submit"]
{
  /* height: 40px; */
  padding: 5px 0px;
  font-size: 16px;
  background: black;
  color: #f442e5;
  font-family:"Lato", calibri;
  text-decoration: none;
  font-weight:bold;
}

.image{
  width: 50%;
  transform: translate(0%,10%);
  border:3px solid #f442e5;
  /* border-radius: 5px; */
}





/* Extra small devices (phones)
@media only screen and (max-width: 600px) {
  body {background-color: rgb(175, 32, 147);}
  .signup_form{
    transform:translate(160%,-40%);
  }
  
} */

/* Extra large devices (large screens) */
@media only screen and (max-width: 1500px) {
  body {background-color:rgb(70, 9, 9);}
  .signup_form{
    transform:translate(160%,-85%);
  }
}


/* Extra large devices (large screens) */
@media only screen and (max-width: 1100px) {
  body {background-color:rgb(51, 3, 22);}
  .signup_form{
    transform:translate(160%,-85%);
  }
}


/* Large devices  */
@media only screen and (max-width: 992px) {
  body {background-color:rgb(10, 53, 31);}
  .signup_form{
    transform:translate(160%,-60%);
  }
  
}

/* Medium devices (landscape tablets) */
@media only screen and (max-width: 768px) {
  /* body {background-color: rgb(31, 31, 31);} */
  body {background-color: rgb(28, 6, 43);}
  .signup_form{
    transform:translate(160%,-54%);
  }
  
}

/* Small devices (portrait tablets and large phones) */
@media only screen and (max-width: 600px) {
  body {background-color: rgb(58, 5, 5);}
  .image{
    width: 96%;
    padding: 2%;
    border: none;
  }
  .signup_form{
    width: 90%;
    padding: 5%;
    transform:translate(0%,20%);
  }
 
}
/* start */