/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
  body {
  background: linear-gradient(#aee1f9 0%, #dff8ff 50%, #f6fff7 100%);
  font-family: "Segoe UI", Tahoma, sans-serif;
  color: #023;
  text-align: center;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

header {
  background: rgba(255, 255, 255, 0.65);
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 100, 255, 0.2);
  padding: 1.2rem 2rem;
  margin: 0 auto 1.5rem;
  width: fit-content;
  backdrop-filter: blur(10px);
}

h1 {
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(255,255,255,0.8);
}

.intro {
  margin-top: 0.5rem;
  font-size: 1.05rem;
}
a.button {
    height: 18px;
    padding: 2px 8px;
    border: 1px solid #F3F3F3;
    -moz-box-shadow: 0 0 0 1px #707070;
    -webkit-box-shadow: 0 0 0 1px #707070;
    box-shadow: 0 0 0 1px #707070;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: -moz-linear-gradient(top, #F2F2F2 0%, #EBEBEB 50%, #DDDDDD 51%, #CFCFCF 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#F2F2F2), color-stop(0.5,#EBEBEB),color-stop(0.51,#DDDDDD),color-stop(1,#CFCFCF));
    background: linear-gradient(top, #F2F2F2 0%, #EBEBEB 50%, #DDDDDD 51%, #CFCFCF 100%);
    font: normal 12px sans-serif;
    color: black;
    text-decoration: none;
}
a.button:hover {
    border: 1px solid #ECF7FD;
    -moz-box-shadow: 0 0 0 1px #3C7FB1;
    -webkit-box-shadow: 0 0 0 1px #3C7FB1;
    box-shadow: 0 0 0 1px #3C7FB1;
    background: -moz-linear-gradient(top, #EAF6FD 0%, #D9F0FC 50%, #BEE6FD 51%, #A7D9F5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#EAF6FD), color-stop(0.5,#D9F0FC),color-stop(0.51,#BEE6FD),color-stop(1,#A7D9F5));
    background: linear-gradient(top, #EAF6FD 0%, #D9F0FC 50%, #BEE6FD 51%, #A7D9F5 100%);
}
a.button:active {
    padding: 2px 7px 3px 9px;
    border: 1px solid #73A7C4;
    border-bottom: 0;
    -moz-box-shadow: 0 0 0 1px #2C628B;
    -webkit-box-shadow: 0 0 0 1px #2C628B;
    box-shadow: 0 0 0 1px #2C628B;
    background: -moz-linear-gradient(top, #E5F4FC 0%, #C4E5F6 50%, #98D1EF 51%, #68B3DB 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#E5F4FC), color-stop(0.5,#C4E5F6),color-stop(0.51,#98D1EF),color-stop(1,#68B3DB));
}