styles.css

body{
    background-color: #111; 
  }
  /*colour of text*/
  h1 , p{
    color: #ffffff;
    font-size: 25px;
  }
  /*text size*/
  h1{
    font-size: 60px;
  }
  /* so the inline container behind the logo has an orange square*/
  span{
    background-color: orange;
    color: #000;
    padding: 6px;
    border-radius: 5px;
    
  }
  
/* Styles for the sidebar and button */
.sidebar {
  position: fixed;
  height: 100%;
  width: 0;
  position: fixed;
  background-color: black; /* Set the background color to black */
  /* opacity: 1; */
  color: #FFFFFF;
  overflow-x: hidden;
  z-index: 1; /* Ensure the sidebar is above other elements */
}
/*time taken for it to pull out and the size of option text*/
.sidebar a {
    padding: 10px 10px 10px;
    font-size: 25px;
    color: #ffffff;
    display: block;
    transition: 0.3s;
}

/*close funtio styling*/
.sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
}
/*to set position, like how far it pulls out*/
.openbtn {
    font-size: 32px;
    background-color: #000000;
    color: orange;
    padding: 10px 10px 10px;
    border: none;
    position: absolute;
    left: 0;
}

/* main content area */
#main {
    transition: margin-left .5s;
    padding: 5px;
    margin-left: 0;
    position: absolute;
    left: 60px;
    top: 20px;
}

/*font for logo and positioning*/
.logo {
   
    font-family: 'helvetica', sans-serif;
    margin-top: 20%;
    font-size: 24px;
    color: #ffffff;
    position: absolute;
    top: 20px;
    left: 150px; /*moves to left*/
}

 /*SEARCH BAR stuff, positioning it*/
#demo{
  width:10%;
  height:1px;
  border-radius:20px;
  margin-top: -20px;
  padding-top: 40px;  /*thickness*/
  padding-right:400px;
  margin-left: 450px;
  padding-left: 90px;
  background-color: #292929;
  line-height: normal;
}
/*so user input will be visible against dark background*/
input{
  color: white;
}

  /* to move it up , to be more visible*/
.placeholder {
  position:top;
  left: 20px;
  top: 2px;  
  background-color: white;  
  padding: 0 20px;  
  size: 50px;
}
/* to position the search icon*/
#searchbutton{
  position: relative;
  top: -40px;
  padding-right:40px;
  margin-left: 310px;
  padding-left: 100px;
}
/*setting font from google font import*/
.norm{
  font-family: 'Rubik Mono One';
  padding-left: 40px;
  padding-right: 40px;
}
/*centering text*/
.center{
  text-align: center;
}
/*for sign up buttons*/
.border{
  background-color: #292929;
  border-radius: 2px;
  height: 40px;
  width: 250px;
  border:1px solid rgb(69, 68, 68);
  color:  rgb(212, 204, 204);
  
}
/*setting font from google font import*/
.info{
  font-family:'Nova Mono' ;
  color: white;
}
h2{
  text-align: center;
}
/*to get rid of the underline*/
a{
  text-decoration: none;
}

/* Dropdown Button */
.dropbtn {
  background-color: transparent;
  color: white;
  padding: 16px;
  font-size: 25px;
  border: none;
}
.hi:hover{
  background-color: orange;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: rgb(0, 0, 0);
  color: white;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color:orange;
  color: black;
}

/*positioning*/
.searchbox {
  position: absolute;  
  outline: none;
  padding: 5px;
  border: 1px solid rgb(50, 50, 50); 
  top:5%;
}

/*profile */
.profile{
  /* top:-50px; */
  position: absolute;
  margin-left: 78%;
  padding-left: 200px;
  margin-top: 2%;
}

/*BUTTONS*/
.btn-group button {
  flex: 1; /* Distribute available space equally */
  background-color: #000000; 
  border: 1px solid rgb(26, 27, 26); 
  color: white; /* White text */
  padding: 10px 73px; /* Adjust padding */
  }

.btn-group{
  display: flex;
  justify-content: space-between;
  margin-top: 6%; /* Adjust the margin-top value as needed */
  right: 40%;
  width: 60%;

}
/* Clear floats */
.btn-group:after {
  content: "";
  clear: both; /*ensures button group clears any floats.*/
  display: table;
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #434443;
}


/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: -10px;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 400px;
  padding: 10px;
  background-color: rgb(84, 84, 84);
}


/* Set a style for the submit/login button */
.form-container .btn {
  background-color: orange;
  color: rgb(0, 0, 0);
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 200px;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: rgb(69, 69, 67);
  color: #000;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

.norm{
  position: absolute;
  top:20%;
}
#change{
  position: absolute;
  color: white;
  font-size: 30px;
  font-weight: 800;
  position: relative; /* Set the position property as needed */
  top: 30vh; /* Adjust the top property to position the element vertically */
  text-align: center;
}