@import url("./variables.css");

* {
    cursor: var(--cursor-default);
}

body {
    background-color: #212123;
    background-image: url("../images/stars07.gif");
    font-family: 'IBM Plex Mono', monospace;
    color: var(--color-white);

}

h1 {
    font-family: var(--font-title);
    font-size: 4rem;
    color: var(--color-white);
    margin: 0;
}

.nav-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.nav-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.nav-header img {
    clip-path: circle(50% at 50% 50%);
    width: 400px;
    height: 400px;
    object-fit: cover;
}

.nav-links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.nav-links li {
    list-style: none;
}

.nav-links a {
    text-decoration: none;
    color: var(--color-white);
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    letter-spacing: 2px;
    margin: 0;
    transition: background-color 0.2s ease-in-out;
}

.nav-links a:hover {
    background-color: #b45252;
}

.main-container {
    background-color: var(--color-black);
    height: 100%;
    margin: 0 3rem;
    border: 1px dashed var(--color-white);
}
.content-container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "sidebar main right";
    border-bottom: 1px dashed var(--color-white);
}

.content-main {
    padding: 0.5rem;
    border-left: 1px dashed var(--color-white);
    border-right: 1px dashed var(--color-white);
}

 h2 {
    font-family: var(--font-secondary);
    font-size: 3rem;
    letter-spacing: 8px;
    color: var(--color-white);
    margin: 0;
}

.content-sidebar {
 padding: 0.5rem;
}

.last-photo img {
    width: 295px;
}

.last-photo img:hover {
    filter: grayscale(50%);
    transition: filter 0.2s ease-in-out;
    cursor: var(--cursor-pointer);
}

.buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.content-right {
    padding: 0.5rem;
}

.latest-update {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    padding: 0.5rem;
}

.latest-update-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    font-size: 1rem;
}
.latest-update-header h3 {
    font-family: var(--font-secondary);
    font-size: 1.5rem !important;
    letter-spacing: 8px;
    color: var(--color-white);
    margin: 0;
}

.latest-update-header p {
    margin: 0;
}

.latest-update-content li {
    list-style: "-> ";
    margin: 0;
    padding: 0;
}

.latest-update-content ul {
    margin-left: 30px;
    padding: 0;
}