@import url("./reset.css");
@import url("./base.css");
@import url("./header.css");
@import url("./footer.css");


aside {
    position: fixed;
    height: 20rem;
    width: 12rem;
    background-color: var(--menu-bg-color, #f1f1f1);
    border: 0px solid var(--menu-border-color, #ccc);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

aside ul {
    list-style-type: none;
    padding: 0;
}

aside ul li {
    margin: 10px 0;
}

aside ul li a {
    text-decoration: none;
    color: var(--menu-link-color, #5a5d60);
    font-weight: bold;
}

aside ul li a:hover {
    color: var(--menu-link-hover-color, hsl(200, 72%, 55%));
}

/* Dark mode styles */
.dark-mode aside {
    --menu-bg-color: #07253e;
    --menu-border-color: #555;
    --menu-link-color: #f1f1f1;
    --menu-link-hover-color: #74C0FC;
}

img {
    margin-bottom: 20px;
    margin-top: 20px;
}

img {
    cursor: pointer;
    transition: transform 0.3s ease;
}

img:hover {
    cursor: pointer;
}

img:active {
    transform: scale(1.75);
    /* center in page*/
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}