body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 40px;
background: radial-gradient(circle at top, #1b2838 0%, #0b121a 60%);
color: #c7d5e0;
}


h1 {
color: #66c0f4;
text-transform: uppercase;
letter-spacing: 2px;
}


p {
color: #b8c6d1;
}


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

ul li {
    margin: 12px 0;
    background: linear-gradient(180deg, #1f2f46, #162433);
    border: 1px solid #2a475e;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
    padding: 0;
}

ul li:hover {
    background: linear-gradient(180deg, #243b55, #1b2f44);
}

/* Make the entire box clickable */
ul li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 12px 16px;
    color: #66c0f4;
    text-decoration: none;
    font-weight: 500;
}

ul li a:hover {
    color: #9fd6ff;
    text-decoration: underline;
}

a {
color: #66c0f4;
text-decoration: none;
font-weight: 500;
}


a:hover {
color: #9fd6ff;
text-decoration: underline;
}


nav ul {
list-style: none;
padding: 0;
}


nav li {
margin: 10px 0;
}


.gallery img,
.logo img {
width: 250px;
margin: 10px;
border-radius: 8px;
border: 1px solid #2a475e;}