.button {
  background-image: linear-gradient(to right,#022DBD , #85a1ff ); /* Gradient from Burnt Orange to Peach */
  border: none;
  color: #FFFFFF; /* White text */
  padding: 16px 32px; /* Some padding to make it look nice */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s; /* Add a transition effect on hover */
  cursor: pointer;
  border-radius: 8px; /* Rounded corners for a sleek look */
}

.button:hover {
  background-image: linear-gradient(to right, #6681db , #48b1db); /* Gradient from Peach to Sky Blue on hover */
}

body {
  background-color: #a7bbfb ;
}

   /* Navigation CSS code */
nav {
        background-color: #022DBD ;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        padding: 16px;
      }

ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

li {
        display: inline-block;
        margin-right: 16px;
      }
 a {
        color: black ;
        text-decoration: none;
        transition: color 0.2s;
        padding: 8px 16px;
        border-radius: 24px;
        background-color: #85a1ff ;
      }
a:hover {
  color: black; 
}


@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #f7931e }
}
#typewriter {
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 24px;
  white-space: nowrap;
  overflow: hidden;
  border-right: .15em solid #f7931e;
  animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: calc(100% - 0.15em) }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #f7931e }
}
#demo {
  font-size: 24px;
  color: #cc9443;
}
.collapsible {
  border-radius: 8px;
  text-align: center;
  background-image: linear-gradient(to right, #022DBD , #01081e );
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  border-radius: 8px;
  text-align: center;
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-image: linear-gradient(to right,#2d91b9, #07516e ); 
}
#collapse {
  text-align: center;
}
.bookmarklet-button {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}
p {
    font-family: 'Comic Sans MS', cursive, sans-serif;
}
input[type=text], select {
  width: 30%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: linear-gradient(to right, #022DBD , #F1CBAF);
  border-radius: 4px;
  box-sizing: border-box;
}
input[type=password], select {
  width: 30%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: linear-gradient(to right, #022DBD , #F1CBAF);
  border-radius: 4px;
  box-sizing: border-box;
}