/* 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-color: #000;
  color: #fff;
  font-family: Helvetica;
}

h1 {
  color: #ddd;
  font-size: 36px;
  font-weight: bold;
}

h2 {
  color: #ddd;
  font-size: 24px;
  font-weight: bold;
}

a {
  color: #66f;
}

#profile_block {
  background-color: #000000;
  /* Brick Pattern */
  background-image:  
    linear-gradient(335deg, #1a1a1a 23px, transparent 23px),
    linear-gradient(155deg, #1a1a1a 23px, transparent 23px),
    linear-gradient(335deg, #1a1a1a 23px, transparent 23px),
    linear-gradient(155deg, #1a1a1a 23px, transparent 23px);
  background-size: 58px 58px;
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}

#footer_block {
  max-width: 1024px;
  border-top: dashed 3px #99f;
  margin: 30px auto 30px auto;
}

/* Container constrained to 1024px */
.nav-container {
    width: 1024px;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 10px;
}

.nav-button {
    flex: 1;
    background-color: #333333; /* Dark Gray */
    color: #ffffff;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Lighter blue drop shadow than the black background */
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.4); 
    
    /* Ensure text stays centered */
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.nav-button:hover {
    /* Mid-value blue glowing edge */
    box-shadow: 0 0 10px #3b82f6, 0 0 20px #2563eb;
    transform: translateY(-2px);
    background-color: #444444;
}

.nav-button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(30, 58, 138, 0.6);
}

/* Responsive handling for smaller screens */
@media (max-width: 1024px) {
    .nav-container {
        width: 95%;
        flex-wrap: wrap;
    }
    .nav-button {
        flex: 1 1 30%; /* Wrap to 2 rows on tablets */
        min-width: 140px;
    }
}

@media (max-width: 600px) {
    .nav-button {
        flex: 1 1 45%; /* Wrap to 3 rows on mobile */
    }
}