/* define global variables */
:root {
  --pixel-size: 0.3em;
}

@font-face {
  font-family: minimum; /* set name */
  src: url(minimum.ttf); /* url of the font */
}

body {
    background: #82b9cf;
    background: linear-gradient(0deg, rgba(130, 185, 207, 1) 0%, rgba(87, 199, 192, 1) 19%, rgba(106, 222, 126, 1) 55%, rgba(186, 237, 83, 1) 100%);
}

p {
    margin-top: 0;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
h2 {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}
h3 {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
h4 {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}
h5 {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;

}
li {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

ul.tag-list {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;

    li {
        padding: 0.5em;
        margin: 0.2em;
        width: fit-content;
        border: 2px solid #322a2d;
        border-radius: 2em;
        text-wrap-mode: nowrap;
    }
}

.img-fullres {
    image-rendering: auto;
}

.column-container {
    display: flex;
    justify-content: space-around;
    align-items: center;

    img {
        max-width: 40%;
        max-height: 30em;
    }
    img.smooth-rendering {
        image-rendering: auto !important;
    }
}

.project-item {
    padding: 2em;
    background-color: cornsilk;
    border-radius: 3em;
    margin-top: 1em;
    img {
        border-radius: 1.5em;
    }
}

p.code {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 500;
    color: #FFF;
    font-style: normal;
    white-space: break-spaces;
    margin-top: 0;
    margin-bottom: 1em;
    padding: 1em;
}
.shell-window {
    background-color: #322a2d;
}

.code.top {
    padding-bottom: 0;
    margin-bottom: 0;
}

.code.bottom {
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;
}

#title-art {
    font-size: min(1em, calc(80vw / 60));
    padding-top: 0;
    padding-bottom: 0;
}

header {
    width: fit-content;
}

nav {
    margin-top: calc(var(--pixel-size) * 5);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    position: fixed;
    right: 0;
    top: 0;
    margin-top: 0;
    height: 100%;
    padding-left: calc(var(--pixel-size) * 2);
    padding-right: calc(var(--pixel-size) * 1);
    

    background-color: #4f546a;
}

/* nav media queries */

/* mobile portrait size */
@media only screen and (max-width: 600px) {
    nav {
        display: none;
    }
    .column-container {
        flex-direction: column-reverse;
        img {
            max-width: 90%;
            max-height: initial;
        }    
    }
    .shell-window {
        min-height: calc(var(--pixel-size) * 28);
    }
}

/* mobile landscape size*/
@media only screen and (min-width: 600px) and (max-width: 900px) {
    nav {
        display: none;
    }
    .column-container {
        flex-direction: column-reverse;
    }
}

/* keyframes for tweening and stuff */
@keyframes slideIn {
    from {
        transform: translateX(-90vw);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-90vw);
    }
}

.slideIn {
    transform: translateX(-90vw);
    animation: slideIn 0.5s forwards;
    animation-fill-mode: both;
}

.slideOut {
    transform: translateX(0);
    animation: slideOut 1s forwards;
    animation-fill-mode: both;
}


/* for each window */

#work {
    left: 4em;
}


#school {
    left: 2em;
}

#skills {
    left: 3em;
}

#projects {
    left: 5em;
}

#links {
    left: 1em;
}

.window-inner {
    padding: 1em;
    padding-top: 2em;
    padding-bottom: 2em;
    background-color: #FFF;
}

.window {
    width: fit-content;
    position: relative;
    margin-top: 2em;
    margin-bottom: 2em;

    .window-top-bar {
        display: flex;
        flex-direction: row;
        height: calc(var(--pixel-size) * 7);

        .window-title {
            border-image: url(windowbar9slice.png);
            image-rendering: pixelated;
            border-image-slice: 3 1 3 1 fill;
            border-image-width: calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 1);
            min-width: 50vw;

            .window-title-text {
                /* TODO set a roughly pixel-accurate size */
                font-family: "minimum";
                font-size: calc(var(--pixel-size) * 10);
                margin-top: -0.35em;
                margin-left: calc(var(--pixel-size) * 1);


            }
        }
        .window-buttons {
            height: 100%;
            width: calc(var(--pixel-size) * 24);
            
            background-image: url(windowbuttons.png);
            background-repeat: no-repeat;
            background-size: contain;
            image-rendering: pixelated;
        }
    }

    .window-bottom {
        border-image: url(window9slice.png);
        image-rendering: pixelated;
        border-image-slice: 12 10 15 4;
        border-image-width: calc(var(--pixel-size) * 12) calc(var(--pixel-size) * 10) calc(var(--pixel-size) * 15) calc(var(--pixel-size) * 4);

        max-width: calc(50vw + var(--pixel-size) * 10);
        min-height: calc(var(--pixel-size) * 28);

        padding-top: 0;
        padding-right: calc(var(--pixel-size) * 10);
        padding-bottom: calc(var(--pixel-size) * 4);
        padding-left: calc(var(--pixel-size) * 4);
    }
}

.navbutton {
    .button {
        image-rendering: pixelated;
        width: fit-content;
        height: fit-content;
        min-width: 5em;
        min-height: 5em;
        padding: calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 3);


        div {
            background: transparent;
            cursor: pointer;
            border: none;
            background-repeat: no-repeat;
            background-size: contain;
            image-rendering: pixelated;
            margin: calc(var(--pixel-size) * 2);

            display: flex;
            justify-self: center;
        }

        div.icon-work {
            width: calc(var(--pixel-size) * 21);
            height: calc(var(--pixel-size) * 16);
            background-image: url(icon_work.png);
        }

        div.icon-school {
            width: calc(var(--pixel-size) * 19);
            height: calc(var(--pixel-size) * 19);
            background-image: url(icon_school.png);
            top: calc(var(--pixel-size) * 6) !important;
        }

        div.icon-skills {
            width: calc(var(--pixel-size) * 14);
            height: calc(var(--pixel-size) * 20);
            background-image: url(icon_skills.png);
        }

        div.icon-projects {
            width: calc(var(--pixel-size) * 21);
            height: calc(var(--pixel-size) * 19);
            background-image: url(icon_projects.png);
        }

        div.icon-links {
            width: calc(var(--pixel-size) * 18);
            height: calc(var(--pixel-size) * 18);
            background-image: url(icon_links.png);
        }

    }
    .button.unpressed {
        border-image: url(unpressed9slice.png);
        border-image-slice: 7 7 9 8 fill;
        border-image-width: calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 8);

        div {
            filter: invert();
        }
    }
    .button.pressed {
        border-image: url(pressed9slice.png);
        border-image-slice: 7 7 9 8 fill;
        border-image-width: calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 8);
        
        div {
            position: relative;
            top: calc(var(--pixel-size) * 4);
        }
    }
}

.project-icon-holder {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
    width: 100%;

    a > img {
        width: calc(var(--pixel-size) * 22);
        height: calc(var(--pixel-size) * 22);
        padding-bottom: 1em;
    }
}

/*
#projects > .window-bottom > .window-inner {
    padding-left: 0;
    padding-right: 0;
}
*/