/* || VARIABLES || */

/**
 * Set general variables
 */
:root {
    /**
     * Light mode values
     */
    @media (prefers-color-scheme: light) {
        --background-color: #ffffff;
        --text-color: #000000;
    }

    /**
     * Dark mode values
     */
    @media (prefers-color-scheme: dark) {
        --background-color: #222222;
        --text-color: #ffffff;
    }
}

html, body, #content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
#content {
    overflow: auto;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

/* || GENERAL STYLES || */

/**
 * Style for the entire body, setting general colors and removing the default margins
 */
.body {
    margin: 0;
    background-color: var(--background-color);
    color: var(--text-color);

    /**
     * Make the page into a grid, primarily so the footer is always at the bottom
     * Rows in order are header, navbar, main, and footer
     */
    overflow: auto;
    height: 100vh;

    /**
     * Ensures pixelated sprites are scaled up without modification
     */
    image-rendering: pixelated;
}

/**
 * Remove formatting from links to make them appear as regular text
 */
.a {
    all: unset;
    cursor: pointer;
}

/**
 * Change the color of the project links to set apart from the regular text
 */
.project-link {
    color: color-mix(in srgb, var(--text-color) 50%, #555555 50%)
}

/**
 * Halve the opacity of project links when hovered over for emphasis
 */
.project-link:hover {
    opacity: 50%;
}

/**
 * General styling for all form inputs
 */
.input {
    margin: 1.5vmin 0;
    text-align: left;
    min-height: 2em;
    font: revert;
    resize: none
}

/* || UTILITIES || */

/**
 * Horizontally center all content within, limiting to 80% of the viewport's width
 */
.centered {
    max-width: 80vw;
    margin: auto;
    text-align: justify;
    text-align-last: center;
    position: relative;
}

/**
 * Double the font size for the name at the start of my personal blurb
 */
.name {
    font-size: 200%;
}

/**
 * Scale the personal photo to fill its column
 */
.headshot {
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    border: .3em solid color-mix(in srgb, var(--background-color) 60%, #999999 40%);
    box-sizing: border-box;
}

/**
 * Make a 1x2 grid for main columns
 */
.col-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 5%;
    margin: 5vh 10vw;
    max-height: 50vh;
    align-content: center;
}

/**
 * Specify the overflow for and center the images in columns
 */
.image-col {
    overflow: hidden;
    object-position: center;
}

/**
 * Specify the overflow for the information in columns and justify the text
 */
.text-col {
    overflow: auto;
    text-align: justify;
    align-content: center;
}

/**
 * Keep the divider as 80% of the page's width
 */
.divider {
    width: 80vw;
    box-sizing: border-box;
}

/**
 * Position the div for the feedback button so it is always halfway down the right side of the viewport
 */
.feedback-button {
    position: fixed;
    right: 0;
    top: calc(50% - .75vw);
    z-index: 100;
}

/**
 * Style the feedback button to be consistent with the rest of the site
 */
#feedback-button {
    /*
     * Rotate and reposition the button to be flush with the right side
     */
    rotate: 270deg;
    position: relative;
    width: 6em;
    height: min(3em, 6vw);
    right: calc(min(1.5em, 3vw) - 3em);

    /**
     * Simple style changes for the colors, border, font, and cursor
     */
    background-color: color-mix(in srgb, var(--background-color) 30%, #555555 70%);
    border: .2em solid color-mix(in srgb, var(--background-color) 30%, #333333 70%);
    border-bottom: unset;
    font-size: 1.25em;
    color: var(--text-color);
    cursor: pointer;

    /**
     * Ensure the button is able to get pointer events, mostly for piano compatability
     */
    pointer-events: all;
}

/**
 * Halve the opacity of the feedback button when hovered over for visual feedback matching links
 */
#feedback-button:hover {
    opacity: 50%;
}

/**
 * Size, position, and otherwise style the container that pops up with the feedback form when the button is clicked
 */
#feedback-container {
    background-color: color-mix(in srgb, var(--background-color) 30%, #555555 70%);;
    overflow: auto;
    border-radius: 2%;
    display: none;
    align-content: center;

    /*
     * Position the container in the center of the screen on top of everything else
     */
    width: 40vw;
    height: 40vh;
    position: fixed;
    z-index: 1000;
    top: 30vh;
    left: 30vw;

    /**
     * Ensure the form is able to get pointer events
     */
    pointer-events: all;
}

/**
 * Create the form as a grid filling the space of the pop-up container
 */
#feedback-form {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 3fr 1.5fr;
    height: 95%;
    width: 90%;
    margin: auto;
}

/**
 * Style the submit button for emphasis
 */
#feedback-submit {
    font-size: 150%;
    text-align: center;
    background-color: color-mix(in srgb, var(--background-color) 30%, #999999 70%);
}

/**
 * Reformat the page to a single column if too thin
 */
@media not screen and (min-width: 650px) {
    /**
     * Change to a single row of text with two automatically sized columns
     */
    .col-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        max-height: revert;
    }

    /**
     * Reduce the maximum height of the image, so it is not too large
     */
    .image-col {
        max-height: 40vh;
        overflow: visible;
    }

    /**
     * Allow the text column to overflow so it is all displayed without needing to scroll
     */
    .text-col {
        overflow: visible;
    }
}