global.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&family=Roboto+Mono&display=swap');
 
body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  font-family: "Roboto Mono";
  color: #953ca7;
  margin: 0px;
}
h2{
  padding-left: 10px;
}
p {
  color: rgb(190, 28, 169);
}

 .topnav {
  background-color: rgb(184, 127, 181);
  overflow: hidden;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 24px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: rgb(190, 28, 169);
}

.topnav a.active {
  background-color: #953ca7;
  color: white;
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 768px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Style the input container */
.topnav .login-container {
  float: right;
}

/* Style the input field inside the navbar */
.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
  width: 150px; /* adjust as needed (as long as it doesn't break the topnav) */
}

/* Style the button inside the input container */
.topnav .login-container button {
  float: right;
  padding: 6px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
  color: #924da0;
}

.topnav .login-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 768px) {
  .topnav .login-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .login-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

  .title1 {
    text-align: center;
  }


  .p1 {
    font-family: "Poppins";
    font-weight: 400;
    text-align: center;
  }

  .footer {
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgb(167, 90, 160);
    color: white;
    text-align: center;
  }
   /* Style all font awesome icons */
  .footer .fa {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
  }

  /* Add a hover effect if you want */
  .footer .fa:hover {
    opacity: 0.7;
  }

  /* Set a specific color for each brand */

  /* Facebook */
  .fa-facebook {
    background: transparent;
    color: white;
    font-size: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
  }

  /* Twitter */
  .fa-twitter {
    background: transparent;
    color: white;
    font-size: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
  }