body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;

        background: url("https://media.istockphoto.com/id/1021625100/vector/clock-timer-icon-seamless-pattern-background-business-concept-vector-illustration-time-alarm.jpg?s=612x612&w=0&k=20&c=A0EWpeSqSLPk8J80aNQD6DbspwvIUqS3mTXeRsC0CVA=") no-repeat center center fixed;
        background-size: cover;
      
        font-family: Arial, sans-serif;
  }
  
  #myH1 {
    font-size: 3rem;
    font-weight: bold;
    color: hsl(0, 0%, 25%);
    margin-bottom: 20px;
  }
  
  #container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 40px;
    border: 4px solid black;
    border-radius: 20px;
    background-color: white;
  }
  
  #display {
    font-size: 3.5rem;
    font-family: monospace;
    font-weight: bold;
    color: hsl(0, 0%, 20%);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    margin-bottom: 20px;
  }
  
  #controls button {
    font-size: 1.2rem;
    font-weight: bold;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: white;
    min-width: 90px;
    transition: background-color 0.3s;
  }
  
  #startBtn {
    background-color: green; 
  }
  #startBtn:hover {
    background-color: greenyellow;
  }
  
  #stopBtn {
    background-color:red; 
  }
  #stopBtn:hover {
    background-color: redorange;
  }
  
  #resetBtn {
    background-color: blue; 
  }
  #resetBtn:hover {
    background-color: blueviolet;
  }