@font-face {
    font-family: Pixelify-Sans;
    src: url("fonts/PixelifySans-Regular.ttf");
}

html, body {
    max-width: 100%;
    overflow-x: clip;
    a {text-decoration: none;}
}

body {
    background-image: url("graphics/wall.png");
    background-size: clamp(96px, 15vw, 192px) auto;
    background-color: #a26547;
    font-family: Pixelify-Sans;
    font-size: 1em;
    margin: 0;
    padding: 0;

    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

nav {
    position: relative;
    width: 100%;
    background-image: url('graphics/top_switchboard.png');
    background-repeat: repeat-x;
    background-size: clamp(64px, 10vw, 128px) auto;

    height: clamp(352px, 55vw, 704px);
    box-sizing: border-box;
    text-align: center;
    font-size: clamp(15px, 1.5vw, 20px);
    padding-bottom: clamp(25px, 3.9vw, 50px);
    padding-left: clamp(7.5px, 1.17vw, 15px);
    padding-right: clamp(7.5px, 1.17vw, 15px);
    margin-top: calc(clamp(288px, 45vw, 576px) * (-1));

    display: flex;
    align-items: flex-end;
    transition: margin-top 0.4s ease-in-out 0.3s;
    z-index: 5;
    flex-shrink: 0;
}

nav.active {
    transition: margin-top 0.4s ease-in-out 0s;
}

/* stuff with an id*/

#nav_items {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: auto;
    display: flex;
    justify-content: center;
    gap: 1.5vw;
}

#nav_items li a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2e2e2e;
    text-decoration: none;
    padding: 5px 5px;
}

#nav_items li a:hover {
    color: #403f3f;
}

#nav_items li a:active span {
    transform: translateY(0.3vw);
}

#menu {
    align-items: center;
    display: none;
    margin-left: auto;
    padding: 5px 10px;
}

nav > a {
    display: flex;
    align-items: center;
    padding: 5px 10px; /* This perfectly matches your other nav items */
}

/* everything icons */

#icons {
    margin-top: clamp(5.5px, 0.8vw, 11px);
}

.icon {
    height: clamp(20px, 3.125vw, 40px);
    aspect-ratio: 19/20;
    object-position: 0% 0%;
    object-fit: cover;
}

.icon:hover {
    object-position: 50% 0%;
}

.icon:active {
    object-position: 100% 0%;
}

#nav_items li a:hover .icon {
    object-position: 50% 0%;
}

#nav_items li a:active .icon {
    object-position: 100% 0%;
}

.text_container {
    height: 90%;
    width: calc(100% - clamp(24.276px, 2.66vw, 34px));
    margin-left: auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

#project_github {
    height: clamp(28.56px, 3.125vw, 40px);
    background-image: url('graphics/github_big.png');
    background-size: cover;
    aspect-ratio: 64/20;
}

#project_download {
    height: clamp(28.56px, 3.125vw, 40px);
    background-image: url('graphics/download_big.png');
    background-size: cover;
    aspect-ratio: 80/20;
}
.project_icon {
    background-position: 0% 0%;
}

.project_icon:hover {
    background-position: 50% 0%;
    color: #403f3f;
}

.project_icon:active {
    background-position: 100% 0%;
}

.project_icon:active > section {
    transform: translateY(0.3vw);
}

#tv_power {
    width: 16.67%;
    aspect-ratio: 11/5;
    object-position: 60% 0%;
    object-fit: cover;
}

#tv_power:hover {
    object-position: 80% 0%;
}

#tv_power:active {
    object-position: 100% 0%;
}

#tv_power.on {
    object-position: 0% 0%;
}

#tv_power.on:hover {
    object-position: 20% 0%;
}

#tv_power.on:active {
    object-position: 40% 0%;
}

/* end of icons stuff */

/* headers and subheaders and grid */

header {
    background-image: url('graphics/hang_board.png');
    background-size: clamp(314.3px, 34.375vw, 440px) auto;
    background-repeat: no-repeat;
    width: clamp(314.3px, 34.375vw, 440px);
    height: clamp(108.6px, 11.9vw, 152px);

    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    margin-top: calc(clamp(11px, 1.72vw, 22px) * (-1));
    padding-top: clamp(50px, 5.25vw, 70px);

    color: #eea785;
    a:link {color: #e6cdc0;};
    a:visited {color: #e6cdc0;};
    a:hover {color: #f5e8e2;};
    a:active {color: #f5e8e2;};
    font-size: clamp(28.6px, 3vw, 40px);
    text-align: center;

    flex-shrink: 0;
}

.subheader {
    background-image: url('graphics/wall_board.png');
    background-size: clamp(257.16px, 28.125vw, 360px) auto;
    background-repeat: no-repeat;
    width: clamp(257.16px, 28.125vw, 360px);
    height: clamp(85.72px, 9.375vw, 120px);
    margin: auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: #eea785;
    a:link {color: #e6cdc0;};
    a:visited {color: #e6cdc0;};
    a:hover {color: #f5e8e2;};
    a:active {color: #f5e8e2;};
    font-size: clamp(20px, 2.1vw, 28px);
    text-align: center;
}

.subtitle {
    font-size: clamp(15px, 1.58vw, 21px);
}

.subheader span {
    margin: auto;
}

.container {
    margin-top: 50px;
    flex: 1;
}

.grid_container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 10px;
}

.projects_container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 10px;
}

/* no more headers for como */

/* blog blog blog */

.blog_container {
    display: flex;
    flex-direction: row;

    justify-content: center;
    flex: 1;

    gap: clamp(5px, 5vw, 50px);
    margin-top: 50px;
}

.blog_item {
    background-image: url('graphics/wall_paper.png');
    background-size: clamp(314.3px, 34.375vw, 440px) auto;
    width: clamp(314.3px, 34.375vw, 440px);
    height: clamp(342.88px, 37.5vw, 480px);

    padding-top: clamp(14.28px, 1.56vw, 20px);
    padding-right: clamp(11.424px, 1.248vw, 16px);
    padding-left: clamp(11.424px, 1.248vw, 16px);
    padding-bottom: clamp(9.996px, 1.092vw, 14px);
    margin: 10px;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(4.5px, 0.525vw, 7px);
    flex-shrink: 0;

    color: #2e2e2e;
    a:link {color: #ad862a;};
    a:visited {color: #ad862a;};
    a:hover {color: #d19812;};
    a:active {color: #d19812;};
    font-size: clamp(15px, 1.58vw, 21px);
}

.date {
    font-size: clamp(12.852px, 1.404vw, 18px);
    color: #474747;
}

.blog_item .description {
    font-size: clamp(12.852px, 1.404vw, 18px);
}

.blog_item .photo {
    width: clamp(291.312px, 31.824vw, 408px);
    height: auto;
    box-shadow: 1.29px clamp(0px, 0.15vw, 2px) #a9a9a9;
}

.blog_dates_container {
    display: flex;
    flex-direction: column;
    margin: 10px;
}

.month_drawers_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.month_drawer {
    background-image: url('graphics/drawer.png');
    background-size: cover;
    background-position: 0% 0%;

    width: clamp(123.43px, 14.4vw, 192px);
    aspect-ratio: 2;

    display: flex;
    align-items: center;
}

.month_drawer:hover {
    background-position: 50% 0%;
    span {
        background-color: #a16143;
        color: #ffb28f;
        animation: none;
    }
}

.month_drawer:active {
    background-position: 100% 0%;
    span {
        background-color: #8f563b;
        color: #eea785;
        transform: translateY(4.17%);
    }
}

.month_drawer > span {
    width: 80%;
    background-color: #8f563b;
    color: #eea785;
    text-align: center;
    font-size: clamp(15px, 1.58vw, 21px);

    margin-left: auto;
    margin-right: auto;
    opacity: 0%;

    animation-name: appear;
    animation-duration: 3000ms;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.last_drawer {
    box-shadow: 0px 8px 0px -4px rgba(0, 0, 0, 0.25);
}

.dates_subheader {
    background-image: url('graphics/wall_board_small.png');
    background-size: cover;
    width: clamp(123.43px, 14.4vw, 192px);
    aspect-ratio: 2;
    margin-bottom: 10px;

    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: auto;

    color: #eea785;
    font-size: clamp(20px, 2.1vw, 28px);
    text-align: center;
}

.dates_subheader > span {
    margin-left: auto;
    margin-right: auto;
}

/* end thanks bye */

/* blog article page stuff */

.paper {
    width: calc(100% - 2vw);
    max-width: 960px;
    margin: 1vw auto;
    flex: 1;

    z-index: 5;
}

#paper_top, #paper_bottom {
    width: 100%;
    margin: 0;
    display: block;
}

#blog_content {
    width: 100%;
    background-image: url('graphics/paper.png');
    background-size: 100% auto;
    background-repeat: repeat-y;

    padding-left: 6.25%;
    padding-right: 6.25%;

    box-sizing: border-box;

    color: #2e2e2e;
    a:link {color: #7a5d1a;}
    a:visited {color: #d19812;}
    a:hover {color: #d19812;}
    a:active {color: #7a5d1a;}

    h1:first-child {
        margin-top: 0;
        margin-bottom: 0;
    }
    h1 {
        font-size: clamp(41.14px, 4.8vw, 64px);
        text-align: left;
    }
    h2 {
        font-size: clamp(20.57px, 2.4vw, 32px);
        text-align: left;
    }
    h3 {
        font-size: clamp(15.43px, 1.8vw, 24px);
        color: #474747;
    }
    font-size: clamp(12.852px, 1.404vw, 18px);
    text-align: justify;

    img {
        width: 100%;
        box-shadow: 0px clamp(0px, calc((100cqw - 2vw) * (1/256)), 3.75px) #a9a9a9;
    }

    .caption {
        color: #474747;
    }
}

/* end of article shit HURRAY */

/* projects jets */

.project {
    background-image: url('graphics/wall_project.png');
    background-size: clamp(314.3px, 34.375vw, 440px) auto;
    background-repeat: no-repeat;
    width: clamp(314.3px, 34.375vw, 440px);
    height: clamp(365.74px, 40vw, 512px);

    padding-top: clamp(7.14px, 0.78vw, 10px);
    padding-right: clamp(7.14px, 0.78vw, 10px);
    padding-left: clamp(7.14px, 0.78vw, 10px);
    padding-bottom: clamp(9.996px, 1.092vw, 14px);
    margin: 10px auto;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(4.5px, 0.525vw, 7px);
    flex-shrink: 0;

    color: #2e2e2e;
    a:link {color: #7a5d1a;};
    a:visited {color: #d19812;};
    a:hover {color: #d19812;};
    a:active {color: #7a5d1a;};
    font-size: clamp(15px, 1.58vw, 21px);
}

.project span {
    width: 100%;
    display: inline-block;
}

.project .language {
    font-size: clamp(12.852px, 1.404vw, 18px);
    color: #474747;
}

.project .description {
    font-size: clamp(12.852px, 1.404vw, 18px);
}

.project .photo {
    width: clamp(299.88px, 32.76vw, 420px);
    height: auto;
}

.project_btns {
    margin-top: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(4.5px, 0.525vw, 7px);

    color: #2e2e2e;
    a:link {color: #2e2e2e;};
    a:visited {color: #2e2e2e;};
    a:hover {color: #403f3f;};
    a:active {color: #2e2e2e;};
    font-size: clamp(15px, 1.58vw, 21px);
}

/* i'm feeling empty */

/* gallery cards */

.card {
    background-image: url('graphics/wall_pic.png');
    background-size: clamp(182.87px, 20vw, 256px) auto;
    background-repeat: no-repeat;
    width: clamp(182.87px, 20vw, 256px);
    height: clamp(274.3px, 30vw, 384px);

    padding-left: clamp(7.14px, 0.78vw, 10px);
    padding-right: clamp(7.14px, 0.78vw, 10px);
    padding-top: clamp(30px, 3.28vw, 42px);
    margin: 10px auto;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(9px, 1.05vw, 14px);
    flex-shrink: 0;

    color: #eea785;
    a:link {color: #e6cdc0;};
    a:visited {color: #e6cdc0;};
    a:hover {color: #f5e8e2;};
    a:active {color: #f5e8e2;};
    font-size: clamp(15px, 1.58vw, 21px);
    text-align: center;

    transform-origin: 50% 0%;
    animation-name: hang;
    animation-duration: 1600ms;
    animation-iteration-count: infinite;
    animation-delay: -400ms;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

.card span {
    width: 100%;
}

.card .photo {
    width: clamp(168.5px, 18.4vw, 236px);
    height: auto;
}

/* that's the end of gallery stuff */

/* tv and shit */

#content {
    position: relative;
    flex: 1;
    display: flex; 
    align-items: center;
    width: calc(100% - 2vw);
    max-width: 960px;
    margin: 1vw auto;
    box-sizing: border-box;
}

#tv_content {
    position: absolute;
    width: 70%; 
    aspect-ratio: 1.4375;
    
    top: 50%;
    left: 6.82%;
    transform: translateY(-50%);
    z-index: 1;
    margin: 0;
}

#tv_show {
    width: 100%;
    height: 100%;
    background-color: #000000;
}

#tv_overlay {
    position: relative;
    width: 100%;
    aspect-ratio: 33/21;
    z-index: 2;
    pointer-events: none;
    background-image: url('graphics/tv.png');
    background-size: cover; 
    background-position: 0% 0%;

    animation-name: tv;
    animation-duration: 300ms;
    animation-iteration-count: infinite;
    animation-timing-function: steps(1, jump-end);
    animation-delay: -100ms;
}

#tv_cover {
    position: absolute;
    pointer-events: none;
    top: 11.9%;
    left: 6.82%;

    object-fit: cover;
    object-position: 0% 0%;
    width: 69.69%; 
    aspect-ratio: 1.4375;
}

#tv_power {
    position: absolute;
    top: 79.17%;
    left: 79.55%;
    pointer-events: all;
}

/* changing tv channels */

#tv_channel {
    position: absolute;
    top: 8.93%;
    left: 79.55%;
    pointer-events: all;

    object-fit: cover;
    object-position: 0% 0%;
    width: 16.67%;
    aspect-ratio: 0.88;
}

#tv_channel:hover {
    object-position: calc(100% / 23 * 1) 0%;
}

#tv_channel:active {
    object-position: calc(100% / 23 * 2) 0%;
}

#tv_channel.two {
    object-position: calc(100% / 23 * 3) 0%;
}

#tv_channel.two:hover {
    object-position: calc(100% / 23 * 4) 0%;
}

#tv_channel.two:active {
    object-position: calc(100% / 23 * 5) 0%;
}

#tv_channel.three {
    object-position: calc(100% / 23 * 6) 0%;
}

#tv_channel.three:hover {
    object-position: calc(100% / 23 * 7) 0%;
}

#tv_channel.three:active {
    object-position: calc(100% / 23 * 8) 0%;
}

#tv_channel.four {
    object-position: calc(100% / 23 * 9) 0%;
}

#tv_channel.four:hover {
    object-position: calc(100% / 23 * 10) 0%;
}

#tv_channel.four:active {
    object-position: calc(100% / 23 * 11) 0%;
}

#tv_channel.five {
    object-position: calc(100% / 23 * 12) 0%;
}

#tv_channel.five:hover {
    object-position: calc(100% / 23 * 13) 0%;
}

#tv_channel.five:active {
    object-position: calc(100% / 23 * 14) 0%;
}

#tv_channel.six {
    object-position: calc(100% / 23 * 15) 0%;
}

#tv_channel.six:hover {
    object-position: calc(100% / 23 * 16) 0%;
}

#tv_channel.six:active {
    object-position: calc(100% / 23 * 17) 0%;
}

#tv_channel.seven {
    object-position: calc(100% / 23 * 18) 0%;
}

#tv_channel.seven:hover {
    object-position: calc(100% / 23 * 19) 0%;
}

#tv_channel.seven:active {
    object-position: calc(100% / 23 * 20) 0%;
}

#tv_channel.eight {
    object-position: calc(100% / 23 * 21) 0%;
}

#tv_channel.eight:hover {
    object-position: calc(100% / 23 * 22) 0%;
}

#tv_channel.eight:active {
    object-position: calc(100% / 23 * 23) 0%;
}

/* end of tv_channels */

/* end of tv stuff */

/* the pigeon goes footer foo */

footer {
    position: relative;
    width:100%;
    background-image: url('graphics/footer_switchboard.png');
    background-repeat: repeat-x;
    background-size: clamp(91.8px, 10vw, 128px) auto;
    height: clamp(91.8px, 10vw, 128px);

    color: #2e2e2e;
    a:link {color: #7a5d1a;};
    a:visited{color: #d19812;};
    a:hover {color: #d19812;};
    a:active {color: #7a5d1a;};

    font-size: clamp(10px, 1.17vw, 15px);
    text-align: center;

    flex-shrink: 0;
}

/* footer foooooooo */

/* animations */

@keyframes hang {
    from {transform: rotate(-3deg);}
    to {transform: rotate(3deg);}  
}

@keyframes tv {
    0% {background-position: 0% 0%;}
    33.3% {background-position: 50% 0%;}
    66.7% {background-position: 100% 0%;}
    100% {background-image: 0% 0%;}
}

@keyframes tv_on {
    0% {object-position: 0% 0%;}
    14.29% {object-position: 14.29% 0%;}
    28.57% {object-position: 28.57% 0%;}
    42.86% {object-position: 42.86% 0%;}
    57.14% {object-position: 57.14% 0%;}
    71.43% {object-position: 71.43% 0%;}
    85.71% {object-position: 85.71% 0%;}
    100% {object-position: 100% 0%;}
}

@keyframes tv_off {
    0% {object-position: 100% 0%;}
    14.29% {object-position: 85.71% 0%;}
    28.57% {object-position: 71.43% 0%;}
    42.86% {object-position: 57.14% 0%;}
    57.14% {object-position: 42.86% 0%;}
    71.43% {object-position: 28.57% 0%;}
    85.71% {object-position: 14.29% 0%;}
    100% {object-position: 0% 0%;}
}

@keyframes appear {
    from {opacity: 0%;}
    to {opacity: 100%;}
}

/* end of animations */

/* responsive changes*/

@media screen and (max-width: 1500px) {
    .projects_container {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 700px) {
    .projects_container {
        grid-template-columns: 1fr;
    }

    .month_drawers_container {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 650px) {
    #tree {
        display: none;
    }
    
    #menu {
        display: flex;
        cursor: pointer;
    }
    
    nav.active {
        margin-top: 0;
    }

    #nav_items {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        gap: 5px;
        opacity: 0;
        visibility: hidden;
        
        transition: opacity 0.3s ease 0s, visibility 0s 0.3s;
    }

    #nav_items li {
        width: 100%;
        height: clamp(42px, 6.56vw, 84px);

        /* Source - https://stackoverflow.com/a/13374813 Posted by user1823021 Retrieved 2026-07-27, License - CC BY-SA 3.0 */
        border: 2px #7a5d1a;
        border-style: none none solid none;
    }

    #nav_items li a {
        padding: 0;
        align-items: center;
        justify-content: center;
        gap: 10px;
        height: 100%;
    }

    /* When the island is expanded, show the menu items */
    nav.active #nav_items {
        opacity: 1;
        visibility: visible;
        /* When opening: wait 0.4s for island to finish sliding down, then fade in */
        transition: opacity 0.3s ease 0.4s, visibility 0s 0.4s;
    }
    
    .grid_container {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 550px) {
    .blog_container {
        flex-direction: column-reverse;
        margin-left: auto;
        margin-right: auto;

        margin-top: 20px;
    }

    .month_drawers_container {
        grid-template-columns: 1fr 1fr;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 400px) {
    .grid_container {
        grid-template-columns: 1fr;
    }
}