body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: aqua;
    text-align: center;
    white-space-collapse: preserve;
    color: darkblue;
    border: 5px double darkblue;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 10px 10px 5px grey;
    transition: background-color 0.5s ease;
    }
    #BtnChange{
    background-color: darkblue;
    color: white;
    border: 5px solid darkblue;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    box-shadow:10px 10px 5px grey ;
    }
    #header1 {
    color: darkblue;
    text-shadow: 10px 10px 14px grey;
    font-style: italic;
    }
  #demo {
    font-size: 20px;
    margin-top: 20px;
    font-style: italic;
    text-shadow: 5px 5px 10px grey ;
  }
  #BtnChange:hover {
    background-color: lightblue;
    color: darkblue;
  }
  #BtnChange:active {
    box-shadow: 5px 5px 5px grey;
    transform: translateY(2px);
  }
  #header1:hover {
    color: palevioletred;
    text-shadow: 5px 5px 10px grey;

  }
    #header1:active {
        transform: translateY(2px);
    }
    #demo:hover {
        color: palevioletred;
        text-shadow: 5px 5px 10px grey;
    }
    #demo:active {
        transform: translateY(2px);
    }
     #BtnChange:focus, #header1:focus, #demo:focus {
        outline: 3px solid darkblue;
        outline-offset: 2px;
     }
        @media (max-width: 600px) {
            body {
                background-color: lightgrey;
            }
            #BtnChange {
                width: 100%;
                box-sizing: border-box;
            }
        }