/* 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-color: #000080;
  background-image: url("images/background.gif");
  background-repeat: repeat;
    45deg,
    #000080,
    #000080 10px,
    #000060 10px,
    #000060 20px
  );
  color: #000000;
  font-family: "Times New Roman", serif;
  font-size: 18px;
}

.page {
  width: 850px;
  margin: 25px auto;
  background-color: #c0c0c0;
  border: 5px ridge #ffffff;
  padding: 10px;
}

.header {
  text-align: center;
  background-color: #000000;
  color: #3050c2;
  border: 3px inset #ffffff;
  padding: 15px;
}

.header h1 {
  margin: 0;
  font-size: 36px;
  letter-spacing: 2px;
}

.subtitle {
  color: #1e0bb0;
  margin-bottom: 0;
}

.nav {
  text-align: center;
  background-color: #dadcf0;
  border: 2px solid #000000;
  padding: 8px;
  margin-top: 10px;
  font-weight: bold;
}

a {
  color: #0000ee;
  text-decoration: underline;
}

a:visited {
  color: #551a8b;
}

a:hover {
  color: red;
  background-color: yellow;
}

.content {
  background-color: #ffffff;
  border: 3px groove #808080;
  padding: 15px;
  margin-top: 10px;
}

.box {
  background-color: #eeeeee;
  border: 2px dashed #000000;
  padding: 10px;
  margin: 15px 0;
}

.footer {
  text-align: center;
  color: #ffffff;
  background-color: #000000;
  margin-top: 10px;
  padding: 5px;
  font-size: 14px;
}

.blink {
  animation: blink 1s steps(2, start) infinite;
  color: green;
  font-weight: bold;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}