/* 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: white;
  color: black;
  font-family: Verdana;
  background-image: url('BackPic.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

img {
  background-color: rgba(0, 0, 0, 0.7); 
  color: black; /* Make text readable */
  padding: 20px;
  /* Fades edges to transparent on left and right */
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  -mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

@font-face {
  font-family: 'Stampy';
  src: url('/Fonts/Stamp.ttf');
}


h1 {
  font-family: 'Stampy';
  text-align: center;
  color: DarkRed;
  font-size: 45px;
  background-color: rgba(0, 0, 0, 0.8); 
  padding: 10px;
  /* Fades edges to transparent on left and right */
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  -mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

@font-face {
  font-family: 'OldText';
  src: url('Fonts/Olondona.otf');
}

h5 {
  font-family: 'OldText';
  font-size: 60px;
  margin: 40px;
  color: DarkViolet;
  font-weight: normal;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8); 
  padding: 10px;
  /* Fades edges to transparent on left and right */
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  -mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

@font-face {
  font-family: 'Neon';
  src: url('Fonts/Cyber.ttf');
}

h6 {
  font-family: 'Neon';
  font-size: 50px;
  color: DeepPink;
  margin: 40px;
  font-weight: normal;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8); 
  padding: 10px;
  /* Fades edges to transparent on left and right */
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  -mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

h2 {
  font-family: 'Stampy';
  font-size: 50px;
  color: DarkGreen;
  font-weight: normal;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8); 
  padding: 10px;
  /* Fades edges to transparent on left and right */
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  -mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

h3 {
  font-family: 'Stampy';
  text-align: center;
  color: DarkRed;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.8); 
  padding: 10px;
  /* Fades edges to transparent on left and right */
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  -mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

p {
  text-align: center;
  line-height: 20px;
  margin-right: 100px;
  margin-left: 100px;
  color: DarkGoldenRod;
  background-color: rgba(0, 0, 0, 0.8); 
  padding: 10px;
  /* Fades edges to transparent on left and right */
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  -mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.pos1 a{
  text-align: center;
  color: DarkMagenta;
  font-size: 30px;
  margin-right: 20px;
}

.pos2 a{
  text-align: left;
  color: DarkGreen;
  font-size: 30px;
  margin-right: 20px;
}

.pos3 a{
  text-align: right;
  color: DeepPink;
  font-size: 30px;
  margin-right: 20px;
  font-family: 'ND';
}

#navbar {
  display: flex;
  justify-content: center; /* Centers the links within the container */
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.8); 
  /* Fades edges to transparent on left and right */
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  -mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

p6 {
  font-family: 'Stampy';
  font-size: 30px;
  color: DarkRed;
  background-color: rgba(0, 0, 0, 0.8); 
  padding: 10px;
  /* Fades edges to transparent on left and right */
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  -mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}