/* 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." */
   
@font-face {
   font-family: "VCR OSD Mono";
   src: url('VCR OSD Mono.ttf')
 }

header {
  font-size: 3rem;
  text-shadow: 5px 5px 3px black;
  text-align: center;
  font-family: "VCR OSD Mono";
  border: 1rem double black;
  margin: 0% 25%;
  background-color: rgba(71, 44, 110, 0.9);
}

body {
  background-color: rgb(92, 58, 142);
  background-image: url("Resources/Images/outline_filled_256.png");
  background-position: 0px 0px;
  background-repeat: space repeat;
  color: white;
  font-family: monospace;
  font-size: 1.5rem;
  text-shadow: 
      0px -2px 2px black,
      0px 2px 2px black,
      -2px -2px 2px black,
      2px 2px 2px black,
      2px -2px 2px black,
      -2px 2px 2px black,
      2px 0px 2px black,
      -2px 0px 2px black;
}

p {
  border: 4mm ridge rgba(117, 225, 252, 0.9);
  padding: 1rem;
  margin: 1rem 20% 1rem 20%;
  background-color: rgba(63, 63, 63, 0.95);
}

footer {
  text-align: center;
  font-weight: bolder;
  font-style: oblique;
}

a {
  color: white;
  outline-color: transparent;
  border: 0.5rem groove rgba(117, 225, 252, 0.9);
  background-color: rgba(0,0,0,0.9);
  padding: 0.5rem;
}

a:link {
 color: rgb(255, 93, 93);
}

a:visited {
  color: rgb(138, 167, 247);
}

a:focus {
  text-decoration: none;
  background: rgba(117, 50, 111, 0.9);
}

a:hover {
  text-decoration: none;
  background: rgba(117, 50, 111, 0.9);
}

a:active {
  text-decoration: none;
  background: rgba(117, 50, 111, 0.9);
}

.directors {
  font-size: 1rem;
  font-family: times;
  letter-spacing: 3px;
  margin: 0% 33.33%;
  border: 2px solid;
  background: rgba(68,20,36,0.9)
}