/*=== General site things ===*/ 
body {
   font-family: 'Space Mono', monospace;
  /*Box Pattern Background*/
  z-index: -1;
    background-color: #efeff4;
    background-image: linear-gradient(#8fb5e7 1.3px, transparent 1.3px), linear-gradient(to right, #8fb5e7 1.3px, #efeff4 1.3px);
    background-size: 26px 26px;
}



/*=== INDEX ===*/
/* The main idea is to have everything on one page, switching tabs instead of redirecting :)*/

 /*OVERLAY*/
 #overlay 
 {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 10; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
 }
 
/* #idCardBig {} /*Enlarged ID Card */

  #cardSmall  /*ID Card in the Top Left Corner*/
  {
   position: fixed;
   top: 5%;
   left: 30px;
   
   height: 20vh;
   width:10%;
   
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   
   background: rgba(255,255,255);
   border: 3px solid #000;
   border-radius: 8px;
   box-sizing: border-box;
   box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
   
   padding: 10px;
   transition: transform 0.7s ease;
   z-index: 5; 
   cursor: pointer;
  }
  
  #cardSmall .placeholder-image /* Place Holder for the PFP*/
  {
    width:100%;
    height: 100%;
    background-color: #ccc;
    display:flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size:0.9em;
    color:#555;
    padding: 5px;
  }

  /*ID Hover Code*/
    #cardSmall:hover
  {
    transform: rotate(-15deg);
  }
  

  
/*=== SIDE NAVIGATION ===*/ 
#sideNav {
  position: fixed;
  bottom: 10%;
  left: 30px;
  display: flex;
  flex-direction: column;
  height: 60%;
  width:10%;
  background: rgba(255,255,255);
  border: 3px solid #000;
  border-radius: 8px;
  overflow: hidden;
  z-index: 5;
}

#sideNav button {
  flex: 1;
  border: none;
  background: #fff;
  cursor: pointer;
  font-family: 'Space Mono', monospace;
  font-size: 1em;
  border-bottom: 1px solid #000;
  transition: background 0.2s;
}

#sideNav button:hover {
  background: #f0f0f0;
}

.paintBrush {
  transition: transform 0.3s ease;
}

.paintBrush:hover {
  transform: translateY(-10px);
}
  
/*=== MAIN CONTENT BOX CONTAINER THING ===*/
/* Main Content Box styles */
#mainContent {
  margin: 20px;
  padding: 20px;
  border: 3px solid #000;
  background:#8fb5e7;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
  max-width: 70%;
  height: calc(90vh - 40px);
  overflow-y: auto;
  margin-left: 250px; /* leave space for side nav if needed */
}

/* Optional: Make the main content responsive */
@media(max-width: 768px) {
  #mainContent {
    margin-left: 10px;
    max-width: calc(100% - 20px);
  }
}