/* 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: rgb(0, 0, 0);
}

a {
  color: orange;
}

a:hover {
  color: yellow;
}

img {
  opacity: 1;
}

img:hover {
  opacity: 0.5;
}

#master-div {
  display: flex;
  flex direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
  position: relative;
  background-image: url('./bg_tiles.png');
}

.main-section {
  z-index: 2;
  display: flex;
  /*position: relative;*/
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 80%;
  background-color: hsl(244, 100%, 32%);
  color: rgb(0, 255, 0);
  font-family: monospace;
  border-style: solid;
  border-color: orange;
  border-radius: 20px;
  margin: 50px;
  padding: 30px;
}

.top-box {
  display: flex;
  flex-direction; column;
  border-style: dotted;
  border-width: 1px;
  border-color: yellow;
  border-radius: 15px;
  align-items:
  justify-content: flex-start;
  align-items: center;
  background-color: rgb(15, 48, 240);
  /*color: gb(100, 255, 0);*/
  padding: 5px;
  width: 80%;
}

.sub-box {
  display: flex;
  flex-direction; column;
  border-style: solid;
  border-width: 2px;
  border-radius: 15px;
  border-color: royalblue;
  justify-content: flex-start;
  align-items: center;
  background-color: rgb(15, 48, 240);
  padding: 10px;
}

.hero-box {
  background-color: rgb(15, 48, 240);
  /*display: flex;*/
  /*flex-direction; column;*/
  /*border-style: solid;*/
  /*border-width: 5px;*/
  /*border-color: blue;*/
  /*justify-content: flex-start;*/
  /*padding: 10px;*/
}


#main-banner {
  display: flex;
  flex-direction: row;
  justify-content: center; 
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
}

.link_list {
  /*display: flex;*/
  /*flex-direction; column;*/
  /*justify-content: flex-start;*/
  /*align-items: center;*/
  border-style: dotted;
  border-radius: 20px;
  border-color: purple;
  background-color: rgb(15, 48, 240);
  font-size: 20px;
  padding: 10px;
}

.flex-centre-class {
  display: flex;
  
}

#heading {
  border-radius: 2%;
  border-style: solid;
  border-color: yellow;
}

.hero_image {
  height: 200px;
  width: 400px;
  border-radius: 5%;
  border-style: dotted;
  border-color: orange;
}

#pixl-fish {
  height: 80px;
  width: 80px;
}

.hero_div {
  font-size: 15px;
}

.appendix {
  font-size: 10px;
  color: rgb(0, 255, 50);
}