/* Declans-CSS*/
 /* This creates the style for buttons at the top of my webpages which will link across the pages. I used a neon blue border with a drak background and neon text. I also made the button glow when hovered over.*/

.bar a button {
  padding: 14px 28px;                     
  border: 2px solid #00aaff;              
  background: rgba(0, 15, 35, 0.7);       
  color: #eaf4ff;                        
  font-size: 17px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  
  text-shadow: 0 0 6px #00aaff;          
  box-shadow:
    0 0 8px #00aaff,                      
    0 0 16px #0094dd,
    inset 0 0 6px rgba(0, 170, 255, 0.3); 
  
  background-image:
    linear-gradient(0deg, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 20px 20px;              /* Creates subtle grid effect */
  
  transition: 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.bar a button:hover {
  background: #00aaff;                   
  color: #001426;                         
  box-shadow:
    0 0 16px #00c8ff,
    0 0 36px #00aaff,
    inset 0 0 12px rgba(0, 200, 255, 0.5);
  transform: translateY(-3px);
}


 body {
  font-family: 'Helvetica Neue', sans-serif;
  background: radial-gradient(circle at top left, #001a33, #000814 60%);
  color: #eaf4ff;
  padding: 20px;
}

/* Due to the dark contrast of my webpages, a normal hyperlink when presed goes purple and is hard to see, so i chahnged the hyperlinks to be neon green and bold with no underline by default and go pink when pressed making it easier to see */
a {
  color: #00FF00;          
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: #FFFF00;            
  text-decoration: underline;
}

a:visited {
  color: #00FFFF;          
}


 /* This code styles paragraphs with a larger font adding a neon-blue border, rounded edges, and inner and outer glowing effects. It also includes padding, centered spacing, subtle text glow */
p {
  font-size: 1.4rem;
  line-height: 1.55;
  color: #eaf4ff;


  border: 2px solid #00aaff;
  border-radius: 14px;

  padding: 24px 28px;
  margin: 45px auto;
  max-width: 92%;

  box-shadow:
    0 0 12px #00aaff,
    0 0 24px #0094dd,
    inset 0 0 12px rgba(0, 170, 255, 0.4);

  text-shadow: 0 0 6px rgba(0, 170, 255, 0.6);

  transition: 0.3s ease;
}

 /*The below code gives makes the iframes centered, with a neon glow design with rounded edges and inner shadows. When you hover over it, the glow intensifies and the border brightens, and the iframe slightly lifts up*/

iframe {
  width: 75%;                  
  max-width: 800px;            
  height: 600px;        
  margin: 40px auto;         
  display: block;              
  
  border: 2px solid #00aaff;              
  border-radius: 14px;                   
  box-shadow:
    0 0 12px #00aaff,                      
    0 0 24px #0094dd,
    inset 0 0 12px rgba(0, 170, 255, 0.4);
  transition: 0.3s ease;
}

iframe:hover {
  box-shadow:
    0 0 16px #00c8ff,
    0 0 38px #00aaff,
    inset 0 0 18px rgba(0, 200, 255, 0.7);
  border-color: #00e5ff;
  transform: translateY(-3px);
}

 /* The below code makes the paragraphs glow with a neon effect and lifts up slightly when hovered over. It also adds a centered horizontal line below each paragraph*/

p:hover {
  box-shadow:
    0 0 16px #00c8ff,
    0 0 38px #00aaff,
    inset 0 0 18px rgba(0, 200, 255, 0.7);
  transform: translateY(-3px);
  border-color: #00e5ff;
}

p::after {
  content: "";
  display: block;
  width: 60%;
  height: 2px;
  background: #006be6;
  margin: 20px auto 0 auto; /* space + centered divider */
  opacity: 0.35;
}
                                /* Styles the footer across all the pages Matchs up with the neon theme*/
footer {
  font-family: 'Georgia', 'Garamond', 'Palatino Linotype', serif;
  font-weight: bold;
  font-style: italic;
  color: #cfe8ff;
  text-align: center;
  padding: 10px;
}