body{
    font:'Raleway', sans-serif;
    color: rgba(0, 0, 0, 0.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    top:0%;
    background: linear-gradient(to right,red,yellow );
    width: auto;

}
h1{
    font:600 3.5em 'Raleway', sans-serif;
    color:rgba(0, 0, 0, 0.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    width: 100%;
}
h3{
    font:900 1em 'Raleway', sans-serif;
    color:rgba(0, 0, 0, 0.5);
    text-align: center;
    text-transform: none;
    letter-spacing: 0.5em;
}
/* .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px; 
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  } */
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }
  .logo {
    width: 100px; /* Adjust the size of the logo */
    height: 100px;
    border-radius: 50%; /* Create a round shape */
    object-fit: cover; /* Ensure the image fits within the dimensions */
    margin-bottom: 20px; /* Adjust the spacing between the logo and the title */
  }

  input[type="color"] {
    margin-bottom: 10px;
  }
  
  .center {
    text-align: center;
    margin-top: 10px; /* Adjust the top margin as needed */
  }
  
  button#randomBtn {
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #555;
    color: #fff;
    border: none;
    cursor: pointer;
  }
  
  button#randomBtn:hover {
    background-color: #333;
  }
  #gradient {
    background: linear-gradient(to right, red, blue);
  }
  
  @media only screen and (min-width: 768px) {
    /* Apply different background for screens wider than 768px */
    #gradient {
      background: linear-gradient(to right, red, blue);
    }
  }
  
  @media only screen and (max-width: 480px) {
    /* Apply different background for screens narrower than 480px */
    #gradient {
      background: linear-gradient(to right, red, blue);
      background-repeat: no-repeat;
      background-size: cover;
      height: 100vh; /* Set height to 100% of the viewport height */
    }
    
    h1 {
      font-size: 2em; /* Adjust the font size for better display on mobile */
    }
    h3{
        font-size:x-small;
    }
  }