/* 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: Black;
  color: black;
  font-family: Verdana;
  margin: 0;
}
a:link {
  color: pink;
  background-color: black;
  text-decoration: none;
}
a:visited {
  color: pink;
  background-color: black;
  text-decoration: none;
}
a:hover {
  color: black;
  background-color: pink;
  text-decoration: none;
}
a:active {
  color: black;
  background-color: pink;
  text-decoration: none;
}
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.box {
  display: flex;
  justify-content: center;
}
  .summary {
    background-color: LightGreen;
    width: 1080px;
    padding: 25px;
    border: 3px dotted white;
    margin:10px;
  }
  .main1 {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
  }
  .main2 {

  }
  .movies {
    background-color: Lavender;
    border: 10px solid HotPink;
    width: 38%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 5%;
    padding-right: 5%;
    margin-top: -20px;
    margin-bottom: 50px;
  }
  .television {
    background-color: Lavender;
    border: 10px solid HotPink;
    width: 38%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 5%;
    padding-right: 5%;
    margin-top: 5px;
    margin-bottom: 50px;
  }
  .games {
    background-color: Lavender;
    border: 10px solid HotPink;
    width: 38%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 5%;
    padding-right: 5%;
    margin-top: -5px;
    margin-bottom: 10px;
  }
  .music {
    background-color: Lavender;
    border: 10px solid HotPink;
    width: 38%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 5%;
    padding-right: 5%;
    margin-top: -5px;
    margin-bottom: 50px;
  }
  .bookz {
    background-color: Lavender;
    border: 10px solid HotPink;
    width: 38%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 5%;
    padding-right: 5%;
    margin-top: -20px;
    margin-bottom: 350px;
  }
.banner {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start
  align-content: center
  margin-top: 0px;
  margin-left: 0px;
}
.bannertext {
  background-image: url("spacebg.jpg");
  background-size: cover;
  position:fixed;
  width: 20%;
  height: 100vh;
  outline: 2px solid white;
  padding-top: 25px;
  padding-right: 5px;
  padding-left: 50px;
  padding-bottom: 25px;
  font-size:30px;
  text-align: center;
}
.updatelog {
  background-image: url("spacebg.jpg");
  background-size: cover;
  position:absolute;
  width: 25%;
  height: 25vh;
  outline: 2px solid white;
  padding-top: 15px;
  padding-right: 5px;
  padding-left: 15px;
  padding-bottom: 25px;
  margin-top: 5%;
  margin-left: 73%;
  text-align: left;
  overflow-y: scroll;
  overflow-x: hidden;
}
.musicplayer {
  background-image: url("spacebg.jpg");
  background-size: cover;
  position:absolute;
  width: 25%;
  height: 22vh;
  outline: 2px solid white;
  padding-top: 15px;
  padding-right: 5px;
  padding-left: 15px;
  padding-bottom: 25px;
  margin-top: 30%;
  margin-left: 73%;
  text-align: center;
  overflow-y: scroll;
  overflow-x: hidden;
}
.ul1 {
  font-family: "Courier New";
  font-size:18px;
  color:black;
  background-color: Lavender;
  border: 2px solid HotPink;
}
.ul2 {
  font-family: "Courier New";
  font-size:45px;
  color:white;
}
.centerbox {
  display:flex;
  justify-content: center;
  align-items: center;
}
.aboutbox {
  margin:auto;
  border: solid 9px white;
  border-radius: 20px;
  padding: 10px;
  width: 950px;
  height: 880px;
  z-index: 10;
  background-color: white;
  box-shadow: 7px 7px 9px white, -7px -7px 9px white;
}
.aboutboxinner {
  border: solid 9px black;
  border-radius: 20px;
  padding: 10px;
  height: 840px;
  z-index: 10;
  background-color: black;
}
.title {
  font-family:'Lunar Echo';
  color:white;
  font-size:65px;
  z-index:200;
  text-shadow: 4px 4px 0px #FF9DD9, -2px -2px 0px #FFCD46, 0px 0px 6px black;
}
.aboutboxcontent {
  border: solid 3px white;
  padding: 10px;
  z-index: 15;
  background-color: black;
}
.aboutboxtext {
  font-family:'Lofi * Lifestyle';
  color:White;
  font-size:25px;
  margin-bottom:10px;
}
.aboutboxlist {
  font-family:'Lofi * Lifestyle';
  color:White;
  font-size:25px;
  margin-bottom:10px;
  list-style-type: circle;
}
.aboutboxmain {
  display:flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}
.shortboxes {
  display:flex;
  flex-flow: column nowrap;
  gap:10px;
}
.linkbox {
  margin:auto;
  padding: 10px;
  width: 920px;
  height: 710px;
  z-index: 10;
  background-color: black;
}
.vmubox {
  width: 512px;
  height: 836px;
  margin: auto;
  background-image: url("dreamcastvmu.png");
  background-size: cover;
}
.vmucontainer {
  width: 320px;
  height: 270px;
  background-color: black;
}
.dreamcastcontainer {
  border: solid 3px gray;
  width:1200px;
  height:600px;
  background-color: LightGray;
  margin:auto;
  margin-top:50px;
  display:flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}
.dreamcaststack {
  display:flex;
  gap: 10px;
  flex-flow: column nowrap;
  width: 580px;
  height:580px;
  margin-top:10px;
}
.dreamcasttitle {
  border: solid 3px gray;
  background-color: lightgray;
  width:580px;
  height:60px;
}
.dreamcastcontent {
  border: solid 3px gray;
  background-color: lightgray;
  width:580px;
  height:520px;
}
.dreamcastp {
  font-family: 'Dreamcast';
  font-size: 25px;
  text-align:center;
}
@font-face {
    font-family: "Lofi * Lifestyle";
    src: url("/fonts/Lofi Lifestyle Demo.ttf") format("truetype");}
@font-face {
        font-family: "Lunar Echo";
        src: url("/fonts/LunarEchoRegular-e9p83.ttf") format("truetype");}
@font-face {
        font-family: "Dreamcast";
        src: url("/fonts/NiseSegaDreamcast.ttf") format("truetype");}