/* 
NAVIGATION-COLORS:
-----------------
nav-container #365059
border-right #7CB1A4
main-title #D1F9D1
author-title/link-text #D1F9D1
main-title:hover / link-text:hover #7CB1A4

CONTENT-COLORS:
---------------
content-container #7E8C54 #1E2B30

FONT: Helvetica
*/

/* === GLOBAL === */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.main-container{
    display: flex;
    flex-direction: row;

    box-sizing: border-box;

    width: 100%;
    height: 100vh;

}

/* Navigation Container*/
.nav-container {
    background-color: #365059;
    width: 20%;
    min-width: 375px;
    height:100%;

    gap: 45px;

    display: flex;
    flex-direction: column;

    border-right:1px solid #7CB1A4;

    /* For rain */
    position: relative; 
    overflow: hidden;
}


/* Logo Container */
.logo-container{
    display: flex;
    flex-direction: column;

    width: 100%;
    padding-left: 150px;
    padding-top: 35px;
    gap: 5px;
    flex-shrink: 0;
}
#main-title{
    font-size: 1.5em;
    margin: 0px;
    padding-bottom: 0px;
    font-family: Helvetica;
    color:#D1F9D1;
    transition: color 0.2s linear; 
}
#author-title{
    margin: 0px;
    padding: 0px;
    font-family:'Courier New', Courier, monospace;
    color:#D1F9D1;
    
}
#main-title:hover{
    color:#7CB1A4;
    cursor: pointer;
}
#title-link{
    text-decoration: none;

}


/* Nav Links */
.link-container{
    width: 100%;
    
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left:150px;

    flex-grow: 0;
    flex-shrink: 0;
}
.nav-link{
    cursor: pointer;
}


/* Dropdown Nav Links */
.dropdown{
    width: 100%;

    text-align: left;

    padding:0px;
    margin:0px;
}
summary {
    list-style: none;
    cursor: pointer;
}
summary::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 0.75ch;
  
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid currentColor;
  
    transform-origin: 3px center; 
    transition: transform 0.2s ease;
}
.dropdown[open] > summary::before {
    transform: rotate(90deg);
}
.dropdown-content{
    display:flex;
    flex-direction:column;
    justify-content: flex-start;

    padding-left: 20px;
    gap: 5px;
    padding-top: 10px;
}


/* Simple Nav Links */
.nav-text-container{
    width: 100%;
    text-align: left;

    padding:0px;
    margin:0px;
}
.link-text{
    margin:0px;
    font-family: Helvetica;
    text-decoration: none;
    color: #D1F9D1;
    font-weight: bold;
    font-size:.9rem;
    transition: color 0.2s linear; 
}
.link-text:hover{
    color:#7CB1A4;
}
.link-text.active {
    color: #7CB1A4;
}


/* Nav Rain */
.raindrop {
    position: absolute;
    width: 2px;
    height: 15px;
    background-color: rgba(255, 255, 255, 0.6); /* Slightly transparent looks more like real rain */
    animation: fall linear infinite;
    top: -20px;
    pointer-events: none; /* Keeps drops from messing with clicks or hover states */
}
@keyframes fall {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(115vh);
    }
}


/* Social's Container */
.socials-container{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;

    height: 100%;

    padding-bottom: 50px;
    padding-left: 150px;
}


/* Content Container*/
.content-container{
    background-color: #1E2B30;
    width: 80%;

    height: 100%;
    overflow-y: auto;
    
    /* Chrome Hide Scroll*/
    &::-webkit-scrollbar {
        display: none;
    }
    /* Firefox Hide Scroll */
    scrollbar-width: none;
    /* IE Hide Scroll */
    -ms-overflow-style: none;
}

.content-wrapper{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 60%;
    margin-top: 100px;
    margin-left: 100px;
}
.content-wrapper-raw-md{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 70%;
    margin-left: 100px;
    color: #D1F9D1;
    font-family: Helvetica;
}

/* Content Text */
.page-header{
    color: #D1F9D1;
    font-family: Helvetica;
}
.article-head{
    color: #D1F9D1;
    font-family: Helvetica;
}
.article-para{
    color: #D1F9D1;
    font-family: Helvetica;
}

.horizontal-line{
    border-bottom: 2px solid #D1F9D1;
}


/* === ABOUT === */

/* === PROJECTS === */


/* === PIXEL ART === */
.pixel-grid{
    display: grid;
    grid-template-columns: 1fr 1fr; /* Avoids repeat() while keeping 4 equal columns */
    gap: 20px;
    width: 80%;
    box-sizing: border-box;

    padding-top: 130px;
    padding-left: 50px;
    padding-right: 50px;
}
.pixel-art-card{
    display: flex;
    flex-direction: column;
}
.pixel-art-thumbnail{
    width: 100%;
    background-color: #ffffff; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    /* Perfect Square for Pixel Art */
    aspect-ratio: 1 / 1;
}
.pixel-art-thumbnail img {
    width: 100%;
    height: 100%;

    /* Doesn't crop */
    object-fit: contain; 
  
    /*Helps Pixel Art */
    image-rendering: pixelated; 
    image-rendering: crisp-edges;
}
.pixel-card-info{
    padding: 12px;
    display: flex;
    flex-direction: column;
    text-align:left;
    gap: 4px;
}
.pixel-title{
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #D1F9D1;
}
.pixel-date{
    margin: 0;
    font-size: 0.85rem;
    color: #D1F9D1;
}



/* Tablet and Mobile */
@media (max-width: 768px){
    /* Global */
    .main-container{
        flex-direction: column;
    }


    /* Left Bar */
    .nav-container{
        width: 100%;
        min-height: auto;
    }
    .logo-container{
        padding-left: 10px;
    }
    .link-container{
        padding: 0px;
    }
    .nav-link{
        padding-left: 10px;
    }
    .dropdown{
        padding: 0px;
    }
    .nav-text-container{
        padding: 0px;
    }
    .socials-container{
        padding-left: 10px;
        padding-bottom: 10px;
    }


    /* Right Section */
    .content-container{
        width: 100%;
        flex-grow: 1;
    }
    .content-wrapper{
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;

        overflow: scroll;
    }

    /* Pixel Art */
    .pixel-grid {
        grid-template-columns: 1fr;
        padding: 0px;
        width: 100%;
  }
}