body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;   /* centers navigation + main horizontally */
  background-color: darkblue;
  color: white;
  font-family: Comic Sans MS;
  background-image: url("BACKGROUND.JPG");
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: center;
  
    }
.ticker {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  width:80%;
  font-size: 50px;
}

.ticker-content {
  display: flex;
  animation: ticker 60s linear infinite;
}

.ticker span {
  display: inline-block;
  padding-left: 100%;
  animation: ticker 20s linear infinite;
  margin-right: 0rem; /* space between scrolling items */
}

.yellow {
    color: yellow;      /* your custom color */
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes scrollUp {
  from {
    bottom: -100%;
  }
  to {
    bottom: 100%;
  }
}
    
    body::before {
  content:"";
  position:fixed;
  inset:0;

  background: radial-gradient(circle at top,#ff00ff22,transparent 70%),
              radial-gradient(circle at bottom,#00ffff22,transparent 70%);

  pointer-events:none;
}
    .main {
    max-width:1200px;
    width:70%;
    padding:1rem;
    background-color: rgba(0, 0, 0, 0.92);   /* black @ 50 % opacity */
    background: linear-gradient(90deg,#0f0c29,#302b63,#24243e);
    border-bottom:2px solid #ff00ff;
    border-radius: 50px;
    box-shadow:
    0 0 10px #ff00ff,
    0 0 20px #ff00ff,
    0 0 40px #00ffff inset;
}
  
    .center {
        align-items: center;   /* centers navigation + main horizontally */
        display: flex;
        justify-content: center;   /* centers them horizontally */
    }
        .blinkie {
        align-items: center;   /* centers navigation + main horizontally */
        justify-content: center;   /* centers them horizontally */
    }
    
    .navigation {
    max-width:1200px;
    width:70%;
    padding:1rem 1.5rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background: linear-gradient(90deg,#0f0c29,#302b63,#24243e);
    border-bottom:2px solid #ff00ff;
    border-radius: 50px;
    box-shadow:
    0 0 10px #ff00ff,
    0 0 20px #ff00ff,
    0 0 40px #00ffff inset;
}

.rounded {
    border-radius: 500px; /* makes the corners rounded */
  }

nav button:hover {
  color:#ff00ff;
  border-color:#ff00ff;

  box-shadow:
  0 0 10px #ff00ff,
  0 0 20px #ff00ff,
  inset 0 0 10px #ff00ff;

  transform: scale(1.05);
}
      
    nav button {
  background:black;
  color:#00ffff;
  border:2px solid #00ffff;

  padding:8px 16px;
  margin-left:10px;

  font-family: "Comic Sans MS";
  font-size:1rem;

  cursor:pointer;

  transition: all .25s ease;

  box-shadow:
  0 0 5px #00ffff,
  inset 0 0 5px #00ffff;
}  
    }    
    .right-text {
    text-align: right;
    padding-right: 1rem;
}
     .left-text {
    text-align: center;
    padding-right: 1rem;
}   
h1 {
  margin:0;
  font-size:2.5rem;
  color:#00ffff;

  text-shadow:
  0 0 5px #00ffff,
  0 0 10px #00ffff,
  0 0 20px #ff00ff,
  0 0 40px #ff00ff;
}

    p[name="legal"] {
    font-size: .5rem;   /* pick any size you like – e.g. 18px, 1.5em, etc. */
}

    .box{
      width:200px;
      height:200px;
      background-color:white;
      margin: 0 auto;
    }
    


html{background:#F0F0F0;}
.dino{
  margin:0;
  width:9px;
  height:
  9px;
  position:absolute;
  
 left:50%;
  top:31.25%;
  transform:translate(-50%, -50%) scale(1);
  transform-origin:top left;
  

  
  
  /* This is the Dino animation */
animation:move 400ms steps(1) infinite;
box-shadow:0px -9px 0 0 #535353,9px 0 0 0 #535353,-18px 0 0 0 #535353,-27px 0 0 0 #535353,-27px -9px 0 0 #535353;}
.dino::before{content:'';width:9px;height:9px;margin:-171px 0 0 27px;display:block;box-shadow:
0px 18px 0 18px #535353,
10px 9px 0 18px #535353,
50px 14px 0 13px #535353,
44px 1px 0 10px #535353,
-9px 54px 0 9px #535353,
-1px 89px 0 10px #535353,
-4px 58px 0 13px #535353,
-36px 99px 0 27px #535353,
-27px 54px 0 0 #535353,
-36px 72px 0 9px #535353,
45px 45px 0 0 #535353,
36px 45px 0 0 #535353,
27px 45px 0 0 #535353,
18px 45px 0 0 #535353,
18px 72px 0 0 #535353,
27px 72px 0 0 #535353,
27px 81px 0 0 #535353,
-5px 112px 0 5px #535353,
-23px 139px 0 5px #535353,
-18px 153px 0 0 #535353,
-54px 135px 0 9px #535353,
-36px 135px 0 0 #535353,
-54px 153px 0 0 #535353,
-63px 153px 0 0 #535353,
-63px 99px 0 18px #535353,
-72px 126px 0 0 #535353,
-90px 108px 0 0 #535353,
-90px 90px 0 9px #535353,
-90px 90px 0 9px #535353,
-108px 81px 0 0 #535353,
-90px 72px 0 0 #535353,
-99px 72px 0 0 #535353,
-99px 63px 0 0 #535353,
-108px 72px 0 0 #535353,
-108px 63px 0 0 #535353,
-108px 54px 0 0 #535353,
-108px 45px 0 0 #535353;}
@keyframes move{
	0%, 100% {margin-top:9px;box-shadow:9px -9px 0 0 #535353,18px 0px 0 0 #535353,27px -9px 0 0 #535353,-45px 0px 0 0 #535353,-45px -18px 0 0 #535353,-54px -9px 0 0 #535353,-72px -9px 0 0 #6E6E6E,-90px 0px 0 0 #6E6E6E,-99px -18px 0 0 #6E6E6E}
	50% {margin-top:0px;box-shadow:0px -9px 0 0 #535353,9px 0 0 0 #535353,-18px 0 0 0 #535353,-27px 0 0 0 #535353,-27px -9px 0 0 #535353;}
}