/* 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-image: url("https://i.pinimg.com/736x/f2/ec/d0/f2ecd044def370aded30879c685c03f5.jpg");
     background-size: cover;
  color: white;
 font-family: 'Play', sans-serif; 
  text-align: center;


} /* <--- Added this to close the body */

.title { /* <--- Added this opening bracket */
  color: #2B0B28;
  align-items: center;
  gap: 15px;
  display: flex;           /* Makes the container "active" */
  flex-direction: column;
} /* <--- Added this to close the title */


.title::after{
  content: "";
display: block; 
 width: 13em;
  height:14em ;
  background-image: url("https://i.pinimg.com/736x/98/ef/ca/98efca4795138ee89b0f68a2431bb4da.jpg");
  aspect-ratio: 1/1;
background-position:center;
  text-align: center;;
  background-size: contain;
  background-repeat: no-repeat;
  

}


.bluetext {  background-image: url("https://i.pinimg.com/736x/42/99/d7/4299d7d82d19b64e411db3802bd585ce.jpg");
    border-radius: 8px;     
    width:300px; 
     padding: 20px;
    top: 380px;
     border: 2px solid #0A16FF;
   left: 130px;
     position: absolute; 
      font-size: 24px;
     }



.title:hover {
  color: #ff00ff; /* Changes the text to bright pink on hover */
  cursor: pointer;
}

.textbox {
  background-image: url(https://i.pinimg.com/736x/5d/73/49/5d7349c852205e1b6754a2241859519c.jpg);
  border-radius: 8px;     /* Optional: rounds the corners */
  width: 300px;           /* Sets a fixed width */
  background-position: center;
   text-align: center;;
   align-items: center;
    margin-right: 50px;     /* THE MAGIC LINE: 0 for top/bottom, auto for left/right */ 
    float: right;
  border: 2px solid #333;
  padding: 20px;
 /*position: absolute; This "unlocks" the top/right commands */
  position: absolute; /* This "unlocks" the top/right commands */
  top: 150px;         /* Distance from the very top of the page */
  right: 150px;        /* Distance from the right edge */

}


.quintessential-regular {
  font-family: "Quintessential", serif;
  font-weight: 400;
  font-style: normal;
  color: #0C127D;
}




.greentext {
  background-image: url("https://i.pinimg.com/736x/80/b7/e5/80b7e58b650f2f2d1faf60f5c62e3df0.jpg");
    border-radius: 8px;     
    width:300px; 
     padding: 20px;
    top: 90px;
     border: 2px solid #2A7831;
   left: 150px;
     position: absolute; 
      font-size: 24px;
     }
     
#evilnet { 
 position:absolute;
 top: 300px;
 left:320px;
 width:100px;
}



#alienreal {
 position:absolute;
 top: 300px;
  left:210px;
  width:100px;
}




#blogset { 
  
  position:absolute;
 top: 438px;
  left:410px;
width:235px;
  transform: scaleX(-1);
   z-index: 10; 
}







.blink {
  animation: blinker 2s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.blinkfaster {
  animation: blinker 0.5s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

#evilnet, #alienreal #blogset {
  cursor: pointer; /* Changes mouse to a hand */
  transition: transform 0.2s; /* Makes the movement smooth */
}

/* Optional: Make it "pop" when hovered */
#evilnet:hover, #alienreal:hover {
  transform: scale(1.2); /* Makes the button grow slightly */
  filter: brightness(1.5) }

#loser {
  right:40px;
  position: absolute;
   top: 700px;  
   width: 500px;
   height: 200px;
}

#sowhat {
 position:absolute;
 top: 700px;
 width: 500px;
  height: 200px;
  right:1380px;
}

.play-regular {
  font-family: "Play", sans-serif;
  font-weight: 900;
  font-style: oblique;
  color: #B08FDB;
}

.play-bold {
  font-family: "Play", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.jersey-10-regular {
  font-family: "Jersey 10", sans-serif;
  font-weight: 300;
   font-style: oblique;
  color: #182E16;
}