home.css

/* FROM THIS SECTION CONTAINS MY EDITTING OF MY SEARCH BAR   */
*{
  box-sizing: border-box;
}
html{
  height: 100%;
}
body{
  background-image: url("images/bckgrd6.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.top{
  display: flex;
  background-color: #75757a;
  color: #f68b1e;
}
.top h3{
  padding-right: 20px;
}
a{
  text-decoration: none;
  color: #000;
  
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
.topnav {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  height: 60px;
  align-content: center;
  align-items: baseline;
  background: #fff;
 
}
.topnav div
{
  margin-right: 50px;
}
.topnav div button:hover,
.topnav div select:hover,
.topnav div a:hover
{
  color: #f68b1e;
  /* color:#75757a; */
}
.topnav .search-container input[type= text]
{
  border-width: 2px;
  border-style: ridge;
  border-radius: 8px; 
  padding: 10px 100px 10px 10px ;
  font-size: 20px;
  border-color: #000;
}

.topnav .search-container button
{
  padding: 5px 10px;
  font-size: 16px;
  background-color: #fff;
  border: none;  
}

.topnav div select
{
  border: 0px;
  font-size: 20px;
}
.topnav div a 
{
  font-size: 20px;
  list-style: none;
}
#wallpaper
{
  background-repeat: no-repeat;
  background-position: center;
}
.fa,.fa-search{
  background-color: #fff;
}
/* For Flex frame  */
.flexframe
{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;  
  height: 60px;
  padding-top: 20px;
  border-radius: 3px;
}
.flexframe .frame1,
.flexframe .frame2
{
  background-color: #fff;
  border-radius: 3px;
  width: 218px;
  height: 384px;
}
.flexframe .frame1 
{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 20px;
}
.flexframe .frame1 a 
{
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
}
.flexframe .frame1 a:hover
{
  color: #f68a1e;
  width: fit-content;

}

.flexframe .frame2
{
  background-color: transparent;
  display: flex;
  flex-direction:column;
  justify-content: space-between;
  background-color: transparent;
}
.flexframe .frame2 img
{
  height: 184px;  
  width: 218px;
  border-radius: 5px;

}
.flexframe .partition{
  margin-right: 10px;
}
.flexframe .slideshowad
{
 width: 712px;
 height: 384px;   
}
.flexframe .slideshowad img{
  width: 712px;
  height: 384px;
  border-radius: 3px;   
}


/* Sections */
.secframe
{
  display: flex;
  justify-content: space-around;
  position: relative;
  top: 350px;
}

.secframe .sec1
{
display: flex;
flex-direction: row;
background-color: #fff;
}

.secframe .sec1 div{
  margin-left: 10px;
}
.secframe .sec1 div img
{
  width: 127.5px;
  height: 127.5px;
  border-radius: 10px;
}
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgb(46, 151, 221); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}



#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
  
}