/* 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." */


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #ffddba;
  color: black;
  font-family: monospace, georgia;
}

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header header"
    "left content right";
  min-height: 100vh;
  gap: 1rem;
  padding: 1rem;
  margin: 0 auto;
  max-width: 1200px;
}

.header {
  grid-area: header;
  background: white;
  color: black;
  padding: 1rem;
  text-align: center;
  border-radius: 12px;
  border: 2px solid #ccc;
}

.left,
.right {
  background: #f4f4f4;
  padding: 1rem;
  border-radius: 12px;
  border: 2px solid #ccc;
}

.left {
  grid-area: left;
}

.right {
  grid-area: right;
}

.toggle-btn {
    display: none;
  }

.content {
  grid-area: content;
  padding: 1rem;
  background: #ffffff;
  border-radius: 12px;
  border: 2px solid #ccc;
  max-width: 100%;
  overflow-wrap: break-word;
}

.small-text {
  font-size: 12px;
  margin-bottom: 8px;
}

h1, h2, h3, h4, h5, h6, p {
  margin-bottom: 10px;
}

ul {
  padding-left: 20px;
  margin-left: 0;
}

li {
  margin-bottom: 10px;
}

/* Media query for smaller screens (mobile) */
@media (max-width: 1000px) {
  .layout {
    grid-template-columns: 1fr; /* Single column layout */
    grid-template-areas:
      "header"
      "content"
      "left"; /* Stack the sidebars below the content */
  }

  .left{
    margin-top: 1rem; /* Space between content and sidebars */
  }
  
  .right {
    position: fixed; /* Fix the sidebar on the screen */
    top: 0;
    right: 0; /* Align to the right of the screen */
    width: 200px; /* Width of the sidebar */
    height: 100vh; /* Full height */
    background-color: #f4f4f4;
    padding: 1rem;
    border-radius: 12px;
    border: 2px solid #ccc;
    transition: transform 0.3s ease-in-out; /* Smooth transition for sliding effect */
    z-index: 1000; /* Ensure it appears above the other content */
    transform: translateX(100%); /* Initially off-screen */
  }

  /* Show the sidebar when 'visible' class is added */
  .right.visible {
    transform: translateX(0); /* Slide the sidebar into view */
  }

  /* Toggle Button for Sidebar */
  .toggle-btn {
    font-size: 30px;
    background: white;
    border: 1px solid #ccc;
    color: black;
    cursor: pointer;
    padding: 1rem;
    display: block;
    position: fixed; /* Fixed position to stay at the bottom right */
    bottom: 10px; /* 10px from the bottom of the screen */
    right: 10px; /* 10px from the right of the screen */
    z-index: 1100; /* Ensure the button is above the sidebar */
  }
  
  .small-text {
  font-size: 16px;
  margin-bottom: 8px;
}
}