h1 {
  color: #f2ee7e;
}
p {
  color: lavender;
}
ul {
  color: lightyellow;
}
.myButton {
  background-color: #110024;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  color: white; /* White text */
  padding: 10px 20px; /* Space inside the button */
  font-size: 16px; /* Text size */
  cursor: pointer; /* Change cursor on hover */
  /* Add a smooth transition for hover effects */
  transition: background-color 0.3s;
  border-radius: 0px;
  border-style: solid;  /* Required: without a style, no border will appear */
  border-width: 3px;
  border-color: #4f3061;
}
.myButton:hover {
  background-color: #5000a6; /* Color changes to a darker blue when hovered */
}

.myButton:active {
  background-color: #edff66; /* Color changes when clicked/active */
}

.myButton:focus {
  outline: none;             /* Optional: remove default focus outline */
  box-shadow: 0 0 0 3px #5a01a7; /* Add a custom focus ring for accessibility */
}


body {
            display: flex;
            height: 100vh; /* Viewport Height */
            margin: 0; /* Remove default body margin */
            background-color: #1b0429; 
        }

.left-box-flex {
            width: 250px;
            height: 1000px;
            background-color: #1b0429;
            color: white;
            text-align: center;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            margin-top: 20px;
}

.left-box-flex{
            border-radius: 0px;
            border-style: solid;  /* Required: without a style, no border will appear */
            border-width: 3px;
            border-color: #4f3061;
            padding: 20px;
            width: 200px;
}

.main-content-flex{
            border-radius: 0px;
            border-style: solid;  /* Required: without a style, no border will appear */
            border-width: 3px;
            border-color: #4f3061;
            padding: 20px;
            width: 200px;
}

.main-content-flex {
    width: 700px;
    height: 1000px;
    background-color: #000000;
    color: white;
    text-align: center;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

}