@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css?family=Orbitron&display=swap');
@import url('https://fonts.googleapis.com/css?family=Share+Tech&display=swap');

html, body {
  margin: 0;
  padding: 0;
  background-image: linear-gradient(rgb(58, 0, 91), rgb(10, 0, 19));
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  justify-content: center;
}

#content{
  width:60%;
  margin:auto;
  margin-top: 5%;
  background-color: rgba(255, 255, 255, 0.699);
  border-radius: 20px;
  font-family: 'Orbitron', sans-serif;
  box-shadow: 10px 10px 50px 8px rgb(0, 0, 0);
}

p{
  line-height: 2em;
  color: #fff;
  text-shadow: 2px 2px 10px #fff;
  font-family: 'Press Start 2P', sans-serif;
}

.outerhologram{
  /* background-color: rgba(255, 255, 255, 0.229); */
  border-radius: 0px;
  border: solid;
  text-shadow: 2px 2px 10px #fff;
  border-color: rgba(255, 255, 255, 0);
  border-width: thick;
  font-family: 'Orbitron', sans-serif;
  margin: auto;
  margin-top: 5%;
  font-size: small;
  text-align: center;
}

#inside{
  margin-right: 55%;
  margin-top: 5%;
}

.outside{
  width: 70%;
  margin: auto;
  text-align: center;
}

h1{
  text-align: center;
  letter-spacing: 20px;
}

canvas {
  margin:auto;
  /* display: block;
  border-radius: 10px;
  border-width: 0px; */
  /* border-color: rgb(0, 0, 0); */
  /* border-left: 0;
  border-right: 0;
  position:relative */
  /* box-shadow: 10px 10px 50px 8px rgb(0, 0, 0); */
  /* margin-top: 50px; */
}

#sketchHolder {
  margin: 0 auto;
  position: relative;
  width: 100%;
  /* background-color: #fff; */
}

.message{
  background-image: url(https://raw.githubusercontent.com/mop9047/CCLab_f22/main/FINAL%20PROJ/HOLOGRAM.png);
  background-size: 100%;
  background-repeat: no-repeat;
  margin-top: 5%;
}

.parallax {
  /* The image used */
  background-image: url(https://toppng.com/uploads/preview/planets-dark-shadow-space-11569851417r2skrueim9.jpg);

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.sticky {
  position: sticky;
  position: -webkit-sticky;
  /* background: #f83d23; */
  /* width: 100px;
  height: 100px; */
  right:0;
  top: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.wrapper {
  width: 100%;
  margin: auto;
  /* background-color: #ccc; */
  align-content: top;
}
.wrapper {
  height: 1200px;
  margin-top: 3%;
}

@media (min-height: 768px) {
  #wrapper{
    height: 2000px;
  }
}
.button{
  border: none;
  display: block;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: auto;
  cursor: pointer;
  border-radius: 10px;
  color: black;
  font-family: 'Orbitron', sans-serif;
  justify-content: center;
  margin-top: 2%;
}