hack2023.css

/* 
 * Optional: Makes the sample page fill the window. 
 */
 html,
 body {
   height: 100%;
   margin: 0;
   padding: 0;
   font-family:Arial, Helvetica, sans-serif;
 }

#logo {
  height:80px;
  position:absolute;
  top:0;
  left:0;
  
}

#address-input {
  height:3em;
  width:20%;
  font-size:medium;
  padding-left:5px;
  border-radius:25px;
  border-width:0px;
  z-index:1;
}

#search-bar {
  display:flex;
  justify-content:center;
  align-self:stretch;
}

#voice-button {
  background-image: url("./mic.png");
  background-size: contain;
  background-repeat:no-repeat;
  background-position:center;
  background-color:white;
  height: 100%;
  width:2em;
  border-radius:15px;
  border-width:0px;
  margin-left:3px;
  
}

#voice-button:hover {
  background-color:lightgray;
}

#voice-button:active {
  background-color:darkgray;
  transition: background-color 0.1s;
  height:98%;
  width:1.96em;
}

#myVideo {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter: blur(5px);
  z-index:-1;
  opacity:50%;
}

 body {
   display:flex;
   justify-content:center;
   align-items:center;
   flex-direction:column;
   /* opacity:40%; */
   background-color:black;
   z-index:-1;
   /* opacity:100%; */
 }
 
#output {
  font-size:large;
  padding-inline:15px;
  text-align:justify;
  height:50%;
  width:50%;
  background-color: white;
  border-radius:8px;
  padding-top:15px;
  overflow:auto;
  /* overflow-wrap: break-word; */
  display:none;
}

#loading {
  font-size:45px;
  color:white;
  display:none;
}