body {
margin: 0;
min-height: 100vh;
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"header header"
"sidebar main";
}

/* 1. Unvisited link (Normal state) */
a:link {
  color: #FFFFFF;
  text-decoration: none; /* Removes default underline */
}

/* 2. Visited link (User has clicked it before) */
a:visited {
  color: #ffffff;
}

/* 3. Hover state (Mouse cursor over link) */
a:hover {
  color: #FFB3BC;
  text-decoration: underline; /* Adds underline back */
}

/* 4. Active state (The moment the link is being clicked) */
a:active {
  color: #8B3F60;
}

body.error-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background: #FFB3BC;
}

header {
grid-area: header;
display: flex;
justify-content: flex-end;
align-items: center;
background: #332D40;
}

.top-nav {
display: flex;
height: 100%;
}

.top-button {
min-width: 80px;
min-height: 60px;
margin: 0;
border: none;
background: #652C6E;
}

aside {
grid-area: sidebar;
background: #332D40;
}

.side-nav {
  display: flex;
  flex-direction: column;
}

.side-menu {
  width: 100%;
}

.side-menu summary {
  list-style: none;
  cursor: pointer;
}

.side-menu summary::-webkit-details-marker {
  display: none;
}

.side-button,
.dropdown a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: 0 20px;
  border: none;
  box-sizing: border-box;
  text-decoration: none;
}

.side-button {
  background: #652C6E;
}

.dropdown {
  display: flex;
  flex-direction: column;
}

.dropdown a {
  min-height: 45px;
  padding-left: 40px;
  background: #BE80D3;
}

main {
grid-area: main;
display: grid;
grid-template-columns: 1fr;
gap: 20px;
padding: 20px;
background: #FFB3BC;
}

.banner {
aspect-ratio: 4 / 1;
display: flex;
justify-content: center;
align-items: center;
background: #8B3F60;
}

.feature {
  min-height: 500px;
  padding: 20px;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 20px;
  background: #8B3F60;
}

.feature-image {
  overflow: hidden;
}

.feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feature-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}

.row {
    display: grid;
    gap: 20px;
    min-height: 100px;
}

.three-row {
    grid-template-columns: repeat(3, 1fr);
}

.two-row {
    grid-template-columns: repeat(2, 1fr);
}

.row article {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #8B3F60;
}