* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Press Start 2P', monospace;
    background-color: #2a1c30;
    color: #00ff99;
    background-image: repeating-linear-gradient(
        to bottom,
        rgb(28, 29, 48) 0px,
        rgb(28, 29, 48) 0.5px,
        rgba(0, 0, 0, 0) 1px,
        rgba(0, 0, 0, 0) 1.5px
    );
}

/* NAVBAR*/
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    background: #141d3b;
    border-bottom: 3px solid #00e5ff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 50px;
}

.nav-title {
    color: #eeff00;
    font-size: 14px;
}

.nav-menu {
    display: flex;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 5px 50px 5px 0;
}

.nav-menu li {
    padding: 0;
    font-size: 11px;
    border: 2px solid #00e5ff;
    color: #00e5ff;
    cursor: pointer;
    transition: 0.2s ease;
    background-color: rgb(6, 17, 43);
}

.nav-menu li a {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px 14px;
}

.nav-menu li.active {
    background: #ff2b7a;
    border-color: #ff2b7a;
    color: white;
}

.nav-menu li:not(.active):hover {
    background-color: #00e5ff;
    color: #141d3b;
}

/* Floating header content*/
.hero-content {
    text-align: center;
    padding-top: 200px;
}

.floating {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

.hero h1 {
    font-size: 35px;
    margin: 0;
    letter-spacing: 3px;
    color: #eeff00;
}

.dots {
    margin-top: 14px;
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.red { background: #ff4d4d; }
.yellow { background: #ffd500; }
.green { background: #00ff99; }

/* HOME TAB*/
.readme-section {
    display: flex;
    justify-content: center;
    margin: 80px 20px;
}

.terminal-window {
    width: 90%;
    max-width: 1000px;
    border: 3px solid #00e5ff;
    background: #0b132b;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
}

.terminal-header {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 3px solid #00e5ff;
    position: relative;
}

.terminal-buttons {
    display: flex;
    gap: 6px;
}

.terminal-buttons .btn {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.terminal-buttons .red { background: #ff4d4d; }
.terminal-buttons .yellow { background: #ffd500; }
.terminal-buttons .green { background: #00ff99; }

.terminal-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: #fff;
    letter-spacing: 1px;
}

.terminal-body {
    padding: 28px 32px;
    font-size: 12px;
    line-height: 1.9;
    color: #00ff33;
}

.terminal-body p { margin-bottom: 22px; }

/* cards in HOME TAB */
.cards-section {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin: 60px 20px 100px;
}

.card {
    width: 313px;
    height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 4px solid;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 12px;
    text-decoration: none;
}

.card .icon { font-size: 40px; margin-bottom: 12px; }
.card h2 { font-size: 15px; margin: 0 0 8px 0; font-weight: 100; }
.card .level { font-size: 8px; color: #fff; }

.card.movie { background: #ff2b794b; border-color: #ff2b7a; color: #ff2b7a; }
.card.music { background: #00e5ff52; border-color: #00e5ff; color: #00e5ff; }
.card.art { background: #eb63158c; border-color: #ffd500; color: #ffd500; }

.card:hover { transform: translateY(-6px); box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); }

/* poster cards for MOVIES and ART TAB*/
.posters {
    padding-top: 50px;
    align-items: flex-start;
}
.poster-card {
    padding: 0;
    height: 520px;
    width: 330px;
    border-width: 4px;
    overflow: hidden;
    background: #0b132b;

    display: flex;
    flex-direction: column;
}
.poster-image {
    flex: 1;
    width: 100%;
    overflow: hidden;
}
.poster-image img {
    width: 100%;
    object-fit: cover;
    object-position: center;
    image-rendering: pixelated;
}

.poster-info {
    width: 100%;
    padding: 14px;
    background: #0b132b;
    text-align: left;
    font-size: 9px;
}

.poster-info .year {
    float: right;
    font-size: 9px;
    padding: 4px 6px;
    border: 2px solid #ff2b7a;
    color: #ff2b7a;
}

.poster-info h2 {
    font-size: 14px;
    margin: 6px 0;
    color: #eeff00;
}


.poster-info .genre {
    font-size: 9px;
    color: #00e5ff;
}

.poster-info .desc {
    font-size: 8px;
    line-height: 1.5;
    margin: 6px 0;
    color: #00ff99;
}

.poster-info .rating {
    color: #ffd500;
    font-size: 9px;
}
.poster-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 25px rgba(255, 43, 122, 0.6);
}

/* spotify song embed in MUSIC TAB*/
.spotify-section {
    display: flex;
    justify-content: center;
    margin: 80px 20px 120px;
}

.spotify-frame {
    width: 100%;
    max-width: 900px;
    border: 3px solid #00e5ff;
    background: #0b132b;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.5);
    position: relative;
}

.spotify-header {
    padding: 10px 14px;
    border-bottom: 3px solid #00e5ff;
    background: #141d3b;
}

.spotify-title {
    font-size: 10px;
    color: #eeff00;
    letter-spacing: 1px;
}

.spotify-frame iframe {
    display: block;
    border: none;
}


/*mobile responsiveness */
@media screen and (max-width: 600px) {
    .navbar {padding: 8px 10px;border-bottom-width: 2px; }
    .nav-left {margin-left: 0;gap: 8px;}
    .nav-title {font-size: 9px;white-space: nowrap;}
    .nav-menu {
        display: flex;
        flex-direction: row;   
        gap: 6px;
        margin: 0;
        flex-wrap: wrap;      
        justify-content: flex-end;
    }
    .nav-menu li {font-size: 7px; border-width: 1.5px;}
    .nav-menu li a {padding: 6px 8px;}

    .hero-content { padding-top: 120px; }
    .hero h1 { font-size: 22px; letter-spacing: 2px; }
    .dot { width: 8px; height: 8px; }

    .readme-section { margin: 40px 12px; }
    .terminal-window { width: 100%; border-width: 2px; }
    .terminal-header { padding: 6px 10px; }
    .terminal-title { font-size: 9px; }
    .terminal-body { padding: 16px 20px; font-size: 10px; }

    .cards-section { flex-direction: column; gap: 16px; margin: 40px 12px 80px; align-items: center; }
    .card { width: 100%; max-width: 300px; height: auto; }
    .card .icon { font-size: 28px; margin-bottom: 8px; }
    .card h2 { font-size: 9px; }
    .card .level { font-size: 7px; }

    .poster-card {
        width: 100%;
        max-width: 320px;
        height: 480px;
    }

    .poster-info h2 {
        font-size: 11px;
    }

    .spotify-title {
        font-size: 9px;
    }

   .spotify-frame iframe {
        height: 300px;
    }

    
}
/*I used my interests to build a creative website, 
that describes who I am, through the media that I consume and create. 
This made the process so much more fun and engaging as I am actively engaging in things I love most.
Throughout my journey of building this website, I've encountered some problems especially in css, as sometimes 
the elements might displayed all over the place or come up skwed and you don't know what might have happened to cause that. 
But overall the journey had been fun and I really learned more in-depth on how to manipulate and appropriately use html tags
and css selectors.  */