/* Reset default margins and paddings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Set body background and font */
body {
  font-family: 'IBM Plex Sans JP', sans-serif;
  background-color: #0a0f2c; /* deep blue background */
  color: #ffffff;           /* white text */
  line-height: 1.6;
  padding: 20px;
}

header {
  background-color: #0a0f2c;
  color: #00d9ff;
  padding: 1em 0;
  text-align: center;
  border-bottom: 2px solid #00d9ff;
  box-shadow: 0 2px 10px rgba(0, 217, 255, 0.4);
}

nav a {
  color: #ffffff;
  margin: 0 1em;
  text-decoration: none;
  font-weight: 600;
  padding: 0.5em;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;
}

nav a:hover {
  background-color: #00d9ff;
  color: #0a0f2c;
}

/* Centered main container */
main {
  max-width: 900px;
  margin: 2em auto;
  background-color: #111634;
  border: 2px solid #00d9ff;
  border-radius: 8px;
  padding: 2em;
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.2);
}

/* Headings styling */
h1, h2, h3 {
  font-family: 'Rubik', sans-serif;#
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #00d9ff; /* bright cyan accent color */
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Paragraph spacing */
p {
  margin-bottom: 20px;
}

/* Image styling */
img {
  max-width: 200px;
  border: 3px solid #00d9ff;
  border-radius: 8px;
  margin: 0 0 20px 20px;
  float: right;
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.5);
}