@font-face{
    font-family: "Edit Undo";
    src: url("Fonts/editundo/editundo.ttf");
}
@font-face{
    font-family: "Born2";
    src: url(Fonts/Born2bsporty/born2bsporty-fs.otf);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: black;
    font-family: "Born2";
    color: green;
    max-width: 1200px;   /* or whatever max width you want */
    margin: 0 auto;      /* centers the whole page */
    padding: 0 10%;      /* adds side breathing room */
}

.topbar {
    display: flex;
    align-items: center;
}

.nav-logo{
    margin-right: 5vw;
    margin-left: 5vw;
}

.nav-logo img{
    image-rendering: pixelated;
    height: clamp(16px, 2vw, 48px)
}

.nav-links img {
    image-rendering: pixelated;
    width: inherit;
    display: block;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0;
}

.nav-links a {
    position: relative;
    display: inline-block;
    align-items: center;
    margin: 0;
    width: clamp(50px, 6vw, 100px);
}

.nav-links a:hover .pixels{
    content: url(../Images/Navigation/pixel-art-hover.png);
}

.nav-links a:hover .games{
    content: url(../Images/Navigation/games.png);
}

.nav-links a:hover .about{
    content: url(../Images/Navigation/about-export.png);
}

.nav-links a:hover .things{
    content: url(../Images/Navigation/things-hover.png);
}

.container {
    display: flex;
    min-height: calc(100vh - 100px);
}

/* SIDEBAR */
.sidebar {
    width: clamp(150px, 10vw, 300px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 10px;
    gap: 25px;
}

.sidebar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: black;
    font-weight: bold;
    font-size: 0.8rem;
    gap: 5px;
    width: clamp(50px, 6vw, 100px)
}

.sidebar-item img {
    width: inherit;
    image-rendering: pixelated;
    object-fit: contain;
}

.sidebar-item:hover .recs {
    content: url(../Images/Navigation/recs-hover.png)
}

.sidebar-item:hover .possesions {
    content: url(../Images/Navigation/possesions-hover.png)
}

.sidebar-item:hover .shrine {
    content: url(../Images/Navigation/shrine-hover.png)
}

/* CONTENT */
.content {
    flex: 1;
    padding: 20px 30px;
}

.content h1 {
    font-size: 2rem;
    font-weight: 900;
    text-align: center;
    color: #00ff00;
}

.title-wrapper {
    overflow: hidden;
    width: 100%;
}

.title {
    font-family: "Edit Undo";
    color: #1bba1b;
    font-size: 2.5rem;
    display: inline-block;
    white-space: nowrap;
    animation: marquee 10s linear infinite;
}

@keyframes marquee {
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}

.image-area img {
    width: 10vw;
    image-rendering: optimizeQuality;
}

.image-area {
    align-items: center;
    text-align: center;
}

.image-area table {
    margin: 0 auto;
}

.image-area a {
    position: relative;
    display: inline-block;
}

.image-area a::after {
    content: attr(data-tooltip);
    white-space: normal;
    width: 9vw;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: black;
    color: green;
    font-family: "Edit Undo";
     z-index: 9999;
    font-size: 0.85rem;
    padding: 6px 10px;
    opacity: 0;
    pointer-events: none;
}

.image-area a:hover::after {
    opacity: 1;
}