/* body and general page styling */
body {
  background-color: #6e63c4;
  display: flex;
  flex-direction: column;  
  align-items: center;     
  padding: 40px;
  margin: 0;
  min-height: 100vh;
  font-family: sans-serif;
}

/* header image */
header img {
  width: 100%;
  max-width: 900px;
  height: auto;
  display: block;
  margin: 0 auto 30px;   /* 30px space below the header */
}

/* content + buttons container */
.content-container {
  display: flex;
  justify-content: flex-start;  /* content on left */
  align-items: flex-start;
  width: 100%;
  max-width: 900px;             /* container max width */
  gap: 0;                        /* buttons hug content box */
}

/* content box */
#content {
  flex: 1;                       
  display: flex;
  justify-content: center;
  background-color: white;
  border-radius: 15px;
  padding: 20px;
  width: 800px;                  /* bigger content box */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* main content */
main {
  width: 600px;
  padding: 20px;
  text-align: center;  
  margin: 0px;
}

#side-buttons {
  display: flex;
  flex-direction: column;   /* vertical */
  gap: 80px;
}

/* buttons general styles */
#side-buttons button {
  padding: 15px 25px;       
  border: none;
  border-radius: 20px;      
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  transform: rotate(90deg); /* vertical on large screens */
  font-size: 16px;          
  width: 110px;             /* fixed width to prevent sticking out */
  box-sizing: border-box;   /* include padding in width */
}

/* individual button colors and text */
#side-buttons button:nth-child(1) { background-color: #ff6b6b; color: #B01E40; } /* about */
#side-buttons button:nth-child(2) { background-color: #ffd93d; color: #D17217; } /* system */
#side-buttons button:nth-child(3) { background-color: #6bcf7f; color: #0D8080; } /* vialent */
#side-buttons button:nth-child(4) { background-color: #4dabf7; color: #4363D1; } /* diary */

/* hover effect for all screens */
#side-buttons button:hover {
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 6px 15px rgba(0,0,0,0.25);
}

/* responsive for small screens (<1100px) */
@media (max-width: 1100px) {
  .content-container {
    flex-direction: column;   /* stack buttons above content */
    align-items: center;
  }

  #side-buttons {
    flex-direction: row;       /* horizontal buttons */
    justify-content: center;   /* center above content box */
    margin-bottom: 0;          /* touch content box */
    gap: 15px;                 /* horizontal spacing */
  }

  #side-buttons button {
    transform: rotate(0deg);   /* horizontal */
  }

  #side-buttons button:hover {
    transform: scale(1.1);     /* just scale, no rotation */
  }

  #content {
    width: 90%;                /* shrink for smaller screens */
  }
}